Sassがきっかけで変化したCSSコーディング。BEMを取り入れてみました。

Sassの力をフルに引き出すには、もっと根っこからCSSのコーディング方法を変える必要がある！と思い、BEMを取り入れたコーディングを始めました。

Sassだけに頼っても、生産性は上がらない！

Sassを使い始めたものの、思ったほど効率が上がらない。なにか引っかかっておりました。いろいろ考えた結果、Sassがどうとかじゃなくて、自分のコーディングスタイルをもっと見なおした方がいいという結論に。

「CSS設計の教科書」を読む

そんな折、「Web制作者のためのCSS設計の教科書」という書籍が発売されていたので購入。今の自分にぴったり。早速読んでみました。

冒頭で、破綻しやすいコーディング例の紹介がありました。その中の一つに、IDセレクタを起点にして、その子要素のhtmlにスタイルを当てるやり方が解説されていて、まさに自分が当てはまっていました。

この記法はhtmlは汚れずらいけど、htmlが変わるとスタイルの修正がかなり大変。また、使い回したいと思っても、IDセレクタ起点なので、他の箇所で使えなかったり。

うーむ、確かにその通り。

で、どうしたらいいかというと「classを活用」したり、「OOCSS(オブジェクト指向CSS)」を取り入れる、という解決方法が「CSS設計の教科書」で解説されていました。

OOCSSは知ってはいたものの、htmlにclassセレクタを記述するのが冗長に思えて避けていました。htmlが汚くなることに抵抗がありました。

でも、そのかわり今のままだとCSSが汚い！生産性低い！このままだと何も変わらない！ってことで、恐る恐るOOCSSに取り組むことに。

OOCSSにもいろいろ種類があるようで、「SMACSS」、「BEM」、「MCSS」、「FLOCSS」など命名規則や記法、構造にそれぞれ特性があります。

自分はとりあえず「BEM」のルールでやってみることにしました。

BEMに取り組む

BEMとはBlock、Element、Modifierの頭文字を取ったもので、構成する要素をそのどれかに当てはめて命名していく方法。どの場合でも必ずBlockもしくはそのModifierがルートにあり、その中に、所属するElementもしくはそのModifierが含まれる構成になる。

BEMという命名規則とSass 3.3の新しい記法 – アインシュタインの電話番号

とあります。Blockという要素の起点となるclassがあり、それに対してElementというclass、Elementのバリエーションとしてmodifierと呼ばれるclassが存在します。(詳しくは「CSS設計の教科書」をぜひ。)

このBEMの命名規則にのっとってclassを作り、html要素に付与していくわけです。

htmlに依存しないCSS

classの数がとても増えるので、IDセレクタを起点にスタイリングするより手間がかかります。でも、やってみてわかりました。この方法は、とても良かったです。

html要素を変更しても、cssを修正しなくてよいのはすごく楽でした。最初のclass付けに手間がかかったとしても、修正の労力がぐっと減ることの方がメリットがはるかに大きい。class名に意味を持たせて付けてやれば、思ったより煩雑にならない。

また、IDセレクタをやめてclassでスタイルを作るので、当然使いまわししやすくなりました。IDセレクタ直下のhtml要素にスタイルを当てる今までのやり方とは感覚が全く違います。

そしてこれこそSassの出番。@mixinや@extendが力を発揮します。むしろこれでSassを使う本当の意味が出てきたと感じました。(これも、もっと早くやればよかった！)

最後に

いろいろ書いてきましたが、まだまだBEMの記法を有効活用できていません。つい「IDセレクタ起点」風の記述をしてしまうことも多いです。

もっとスマートにCSSを記述できるよう、BEM修行はまだまだ続きます。