こんにちは！ISAMU(@burlesca_isa)です！
CSSは少し勉強すれば誰でも簡単に実装出来ます。
CSSのデザインについての本はたくさんありますが、
CSS設計についての本を読んだことがある方は多くはないのではないでしょうか。
WEBサイトは構築したあとに運用、保守フェーズがあります。
そう、WEBサイトは構築で終わりではありません。
タイトルの文字サイズを変更したいだけなのに、
CSSの設計を怠ると、
該当するであろうCSSを修正したら、思わぬ箇所に影響がでてしまうことがあります。
CSSの例をみながら解説したいと思います。
１．要素セレクタは省略すること
BEMとはロシアのYandexという会社の開発チームが考えた開発手法です。
- B = Block → 全体
- E = Element → Blockを構成する要素
- M = Modifer → バリエーションの違い
という要素に分類して考えます。
サイドバーでのBEMを使った設計例をあげてみます。
「白、青、赤」のバリエーションがあるサイドバーのタイトルをCSSで書いてみましょう。
BEMに当てはめると下記となります。
- Block = sidebar
- Element = title
- Modifer = white , blue , red
CSSの書き方は
.sidebar__title{
font-size: 1em;
font-weight: bold;
}
.sidebar__title--white{
color: white;
}
.sidebar__title--blue{
color: blue;
}
.sidebar__title--red{
color: red
}
Elementにはアンダーバーを２つ[__] Modiferには[–]を付与します。
ElementとModiferは対等な関係であるということ(==)で[–]としているようです。
明確な命名規則はないので、自分で考えてもよいでしょう。
BEMとは
CSSは誰にでも簡単に書けるため、
一見勉強の必要はないように思えます。
Yahoo,Twitter,FaceBookなど大手企業はもちろん、
街の小さなWEBデザイン会社でも
CSS設計手法を使わないことはないと思います。
「CSS設計の教科書」という本は
BEMに限らず色々な設計手法を解説してくれています。
このサイトではl-sidebarという命名規則を使っていますが、
[l-]も「CSS設計の教科書」で紹介されている設計手法の一つを使用しています。
是非CSSの設計手法を勉強して、
初心者脱却を目指してみてはいかがでしょうか。
