pixivで運用して上手く行っている感触のあるルールを紹介。

1. CSS的にルートになるセレクターのクラス名は_で始める
2. _始まりのクラスはサイト内でユニーク

CSSの何が問題か。それはどこで指定が衝突するのか分からないことである。そこさえ把握できれば気を付けながら書けるので、それでもう問題ないと思っている。CSSには機能がなく、それが美しい（ということにしておく）。最低限抑えるべき要素以外は考えない方がいい。

コード例。

HTML:

<section class="_foo-container">
    <h1 class="title">foo</h1>
    <ul class="_bar-items">
        <li class="item"><span class="title">item 1</span></li>
        <li class="item"><span class="title">item 2</span></li>
    </ul>
</section>

モジュールの単位である_foo-containerと_bar-itemsに_を振った。塊が分かりやすくなる。

CSS / Stylus:

._foo-container
  .title
    font-size 2em
    ...

  ._bar-items
    margin-top 1em

._bar-items
  .title
    font-size 1em
    ...
  ...

ルートのセレクターは必ず_で始まる。StylusやSassのネスト記法を利用した場合特にきれいに書ける。

このルールによるメリット。

• _foo-containerクラス以下の指定は他の指定と衝突しないことが次項目を除き保証される
• _始まりのクラスの親に_始まりのクラスが存在する場合、ネストした要素（._bar-items）とその子要素で指定が衝突する可能性があることが把握できる

これだけでだいぶ見通しがいい。titleといったすぐに被りそうなクラス名も使いやすい。_のないHTMLはこちら。

<section class="foo-container">
    <h1 class="title">foo</h1>
    <ul class="bar-items">
        <li class="item"><span class="title">item 1</span></li>
        <li class="item"><span class="title">item 2</span></li>
    </ul>
</section>