小・中規模でのサイト制作では、それほど明確な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を参考に作られています。
自分でルールを作る
個人で制作する場合、ルールが無くても問題無く進められますが、今後の事を考えてある程度自分でルールを定めましょう。
コメント