マークアップをしているときに、
- 誰がみてもわかるルールで
- あとから融通のきくように
と、誰だって考える。
でもこれは、考えてるだけじゃできない。なんでもそうだけど、しっかり理解していないとできない。
かく言う自分もちゃんと出来ていなくて。あらためて整理してみたい。
特に今回は、cssの命名規則について
BEM
Block / Element / Modifier
もう有名すぎて解説すべきことはなにもない。
block__erement--modifier
アンダーバーとハイフン2つずつで区切る。
LPとか、1ページ1ページがユニークなデザインのサイトに向いているんじゃないかと思ってる。
<section class="intro">
<h1 class="intro__title">イントロダクション</h1>
<dl class="intro__description">
<dt class="intro__description--term">BEMが好き</dt>
<dd class="intro__description--text">
BEMが好き。<br>
だってとってもわかりやすから。
</dd>
</dl>
</section><!-- /intro -->
<section class="about">
<h2 class="about__title">わたしについて</h2>
<dl class="about__description">
<dt class="about__description--name">名前は●●です。</dt>
<dd class="about__description--favorite">
cssが好き。htmlも好き。<br>
javascriptはあまり好きじゃない。
</dd>
</dl>
</section><!-- /about -->
といった感じで、class名見ればだいたい何についてやってるかわかる。
FLOCSS
Foundation / Layout / Object(component,project,utility)
cssをレイヤとオブジェクトにわけて、パーツ化する。
class名の、命名ルールについても、上で引用した5つの頭文字を取って接頭語とするので、どのレイヤ、パーツに属しているのかすぐわかる。
同じレイアウトや色違いのパーツなどを使い回す大規模なコーポレートサイト等で威力を発揮すると思ってる。
.f-base
.f-header
.c-button
.p-pagename
.u-mt
etc......
あとからパーツが増えたときも、該当のcssファイルに追加するだけなので管理しやすい。
scssとの親和性
BEMもFLOCSSもscssとの親和性がすごく高い。
ただのcssであれば長ったらしくなって逆に手間だったけれど、scssの登場で変わった。
/* BEM */
.intro{
&__title{
...
}
&__description{
&--term{
...
}
&--text{
...
}
}
}
/* FLOCSS */
.f-{
&header{
...
}
&footer{
...
}
}
名前、なににする？
ちゃんと理解してないとここでハマる。
BEMはそのページ内でちゃんとルール守っていれば、まぁいいかってなるときもあるかもしれない。
でもFLOCSSだと、このパーツはどのレイヤに所属するべきか。他にどんなパタンが想定されるか、エトセトラ。
初期設計しっかりしておかないと、あとからわけのわからないものどんどん追加されて、
「なんかFLOCSSっぽいけど、担当変わって壊れたな」
なんて思われかねない。
そしてどちらにも共通して言えるのが、なんという名前にするか。
「ええと、金融機関の説明？ 英語にすると……」
「ここは●●ページのタイトルで、ここはイントロダクションで、これはA要素の見出しと説明文でこっちは……」
自分は英単語の基礎知識少ないし文節をぱっと英語にもできないから結構調べならが決める。
この時間がもったいない（英語を勉強すれば解決するのか？ とたまに思う）。
ユーティリティ名で攻める
最近、なんかこれもありかなぁという気がしてきた。
でもユーティリティの設定だけでどうにかなるとは思えない。
各ページでどうしてもユニークにcssを記述する箇所が出てきそう。
そうなったときは結局なにか名前をつけなくちゃいけない。
BEMかFLOCSSか
これらもご多分に漏れず一長一短だと思ってる。
なんでもそうだけど、そのケースにあわせて最適なものを選択したい。