はじめに

いままでcssなんて適当でいいと思っていた私ですが、そんなこと言ってたらjavascript使う時全部グローバルオブジェクトにぶち込むぞと言われたので改心して勉強することにしました。

スコープがないからこうなる

直接要素を指定する。

sample.html

   <h1>青色のタイトル</h1> 
   <h1>赤色のタイトル</h1>

sample.css

h1{
  color:blue;
}

h1{
  color:red; /*こっちが適用される*/
}

上のh1には青くいて欲しくても赤になってしまいます。

じゃあ名前をつけてみる。

sample2.html

   <h1 class='title'>青色のタイトル</h1> 
   <h1 class='title2'>赤色のタイトル</h1>

sample2.css

.title{
  color:blue;
}
.title2{
  color:red;
}

これで解決！
してるように見えてもしてません。
もしも違うアイテムのタイトルが他に１０個あった場合、名前をさらに１０個考える問題に直面します。
.title3 なんてつけた日にはお前どこのタイトルだよ！！！！とつっこまないといけないかもしれません。

設計

上記の問題を偉い人が名前の付け方や設計で解決しようとしました。
例えば

ページごとに親セレクタを決める

top.html

  <div class='pageTop'>
    <!-- トップページの内容 -->
  </div>

about.html

  <div class='pageAbout'>
    <!-- アバウトページの内容 -->
  </div>

sample3.scss

  .pageTop{
    @import('_top.scss')
  }
  .pageAbout{
    @import('_about.scss')
  }

トップページの一番親の要素に .pageTop をつける
アバウトページの一番親の要素に .pageAbout をつける

のように決まりを設けることで擬似的にスコープをつくってしまう。

BEM

Block Element Modifier の３つに分ける
Blockという一つの独立した部品の中にElementを配置していく。
可変部分はModifierとして名前をつける
class名を一目見ただけで

どのBlockに所属しているのか
そのBlockやElementは何を表しているのか

を判断できるような名前の付け方

sample4.html

  <nav class='nav'>　<!-- Block -->
    <ul>
      <li class='nav__toTop'> <!-- Element -->
         <a href='/top'>top</a>
      </li>
      <li class='nav__toAbout　nav--active'> <!-- Element and Modifier -->
        <a href='/about'>about</a>
      </li>
    </ul>
  </nav>

sample4.css

 /* Block */
 .nav{

 }
 /* Element */
 .nav__toTop{

 }
 /* Element */
 .nav__toAbout{

 }
 /* Modifier */
 .nav--active{

 }

Scssの場合Blockを&で置き換えられる

sample4.scss

.nav{
  &__toTop{

  }
  &__toAbout{

  }
  &--active{

  }
}

class名を一目見ただけで何のスタイルか判断できる名前ということは、同じ見た目のところは使いまわせるはずだし、似たような見た目でも役割が違えばそれなりの名前になるはずなので、名前衝突も回避できる(多分)

根本的な解決ではない

プロジェクトの特性を考えて上記のような設計を駆使すれば、きっといいページができます。
ですがそれはあくまで理想なので、

設計手法をそもそもそんなにしらない私新人がしんどい
あるところでは使われている共通化コードが、あるところでは使われていない

などの問題がでてきます。

それらを解決するために、設計を共有するstyle guideの作成など、何らかの形で管理コストを前払いする必要がでてきます。
そんなの私はめんどくさい。

もう何も怖くない

でもやっぱり偉い人はすごいです。解決してくれます。
javascriptをつかってcssにスコープがつくれるようになりました。
スコープがないから困るんだから作っちゃえばいいよねというやつです。

web component

webコンポーネント単位でcssを管理できるようになったために、もう名前の問題は考えなくてよくなりました。
できるだけ他人に伝わりやすい名前を考えるだけで良いのです。

未来に向けて

web コンポーネントがhtml5のように普及するにはまだ時間がかかるらしいので今は他のもので代用する流れになっています。

Vue.js
Polymer

これらのフレームワークを使うとcssで悩むことが減り、コンポーネント思考(?)も学べるはずです。
もしかするとWebコンポーネントが普及してもこっちの方が便利かもしれないですね。

あとがき

にわかなので間違ってるところもあるかと思いますが、あれば優しく教えてください。

cssスコープ