cssのクラス命名規則

css3webサイト制作

小・中規模でのサイト制作では、それほど明確なcss設計をしなくても問題は起こりませんが、大規模案件になるとhtmlもcssもかなりの量になり、css設計がないと保守性が悪くなってしまったり、意図しないところに影響してしまったりします。また、複数人で制作する場合、css設計なしに各々が好き勝手に書くとコードがとても複雑になってしまいます。

なので、cssを運用するルールを決める必要がありますが、特にクラス名の付け方にルールを用いる必要があります。

代表的なCSSの命名規則

BEM

BEMはBlock Element Modifierの略で、多く使われている代表的な命名規則です。

OOCSS

OOCSSはObject Oriented CSSの略で、オブジェクト指向にもとづいたcss設計です。
TwitterGithubYoutubeなどで採用されているcss設計で、普段Bootstrapを使っている方は理解しやすいかもしれません。(BootstrapはTwitter社が開発したフレームワークです。)

SMACSS

SMACSSはScalable and Modular Architecture for CSSの略で、OOCSSやBEMを参考に作られています。


自分でルールを作る

個人で制作する場合、ルールが無くても問題無く進められますが、今後の事を考えてある程度自分でルールを定めましょう。


github.com

コメント

タイトルとURLをコピーしました