ブログ

CSSを書く時に使っている命名規則やCSS設計

エムラ
CSSのイメージ

CSSは簡単に書けるけど壊れやすい。

適当に書いていると上書き合戦になってしまったり名前がかぶってしまったり管理が非常に難しい言語です。
 

CSSを管理するための方法の一つにclassの命名規則があります。
class名を書くときのルールを決めておこうということです。
 

CSS設計や命名規則にはいろんな種類があり、僕はおおよそですがBEM(ベム)FLOCCS(フロックス)を参考にしています。
 

 

BEM(ベム)

Block(ブロック…大きなくくり)
Element(エレメント…部品)
Modifire(モディファイア…状態)


これらをハイフンやアンダースコアでつなぎ合わせてclass名をつくる命名規則です。

bem-methodology-ja/definitions.md at master · juno/bem-methodology-ja · GitHub
 

 

こんな感じです。
BlockとElement間は「__」でつなぎ、Modifire間は「--」でつなぎます。
ハイフンやアンダースコアが2つ並んでいて気持ち悪い気がしますが使っている内に慣れると思います。


 

FLOCSS(フロックス)

個人的に一番しっくりくるCSS設計がFLOCCSです。
谷拓樹さんによって考案されたCSS設計方法です。
 

”FLOCSS(フロックス) は、OOCSSやSMACSS、BEM、SuitCSSのコンセプトを取り入れた、モジュラーなアプローチのためのCSS構成案です。”

GitHub - hiloki/flocss: CSS organization methodology.

 

プロジェクト固有のclass名の頭には「p-」をつけたり、
コンポーネント(パーツ)には「c-」を、
ユーティリティ(便利なもの)は「u-」を、
接頭詞をつけることでclass名を役割ごとに分類します。
 

BEMでは別の状態を表す時にハイフンを連ねて定義しますが、FLOCSSでは「is-」をつけて変化を表します。
以下はボタンのコンポーネントに「主要」である状態がついているときのclassです。
 

このようにクラス名を組み合わせてバリエーションを増やしていくことが可能です。

 

おわりに

細かい事を話し出すと長くなってしまうので、CSS設計について学ぶには谷拓樹さん著の「Web制作者のためのCSS設計の教科書」を是非読んでみて下さい。

業務でCSS設計をされている方にとても役に立つ本です。



とはいってもCSS設計で迷う点はまだまだ多くて、他人が僕の書いたソースを見るとモヤッとする部分があるかもしれません。


5年以上前はCSSの命名規則なんて人によって独自ルールだったし、CSSを設計するという概念さえなくサイト制作を行っていた人もいたと思います。
CSS設計が日本のWeb業界にも広まったのはとても嬉しいことです。


今のところズコーデザインではほぼ僕一人しかCSSを書かないのですが、複数人で制作をするときにこそCSS設計は真価を発揮すると思います。


CSS設計を勉強してよいCSSライフを送って下さい。