小・中規模でのサイト制作では、それほど明確なCSS設計をしなくても問題は起こりませんが、大規模案件になるとhtmlもCSSもかなりの量になり、CSS設計がないと保守性が悪くなってしまったり、意図しないところに影響してしまったりします。また、複数人で制作する場合、CSS設計なしに各々が好き勝手に書くとコードがとても複雑になってしまいます。
なので、CSSを運用するルールを決める必要がありますが、特にクラス名の付け方にルールを用いる必要があります。
＜代表的なCSSの命名規則＞
★BEM
BEMはBlock Element Modifierの略で、多く使われている代表的な命名規則です。
★OOCSS
OOCSSはObject Oriented CSSの略で、オブジェクト指向にもとづいたCSS設計です。
Twitter、Github、Youtubeなどで採用されているCSS設計で、普段Bootstrapを使っている方は理解しやすいかもしれません。(BootstrapはTwitter社が開発したフレームワークです。)
★SMACSS
SMACSSはScalable and Modular Architecture for CSSの略で、OOCSSやBEMを参考に作られています。
＜自分でルールを作る＞
個人で制作する場合、ルールが無くても問題無く進められますが、今後の事を考えてある程度自分でルールを定めましょう。
- 明確な命名規則である
- 他人が見てもざっくり命名規則がわかる
- 保守性を考えた命名規則
参考サイト