こんちは！basara669です。
先日、勉強会で話した資料がかなり反響があって、様々な人に閲覧していただきました。
ただ、これだけだとコードしか無かったりよくわからない部分も多いと思うのでその時の勉強会で話したところも含め、解説していこうと思います。
ただ、書いたら量がかなり多かったので、3つに分割しました。。
なぜCSS設計が必要なのか？
CSSは壊れやすい
CSSはとてもシンプルな言語で誰でも簡単に使えます。
[css] p{color:red;
}
[/css]
しかし、サイトやWebアプリケーションが大規模化しているため、様々な人が手をいれることになり、いつの間にか下記の様なコードになっていたりします。
[css] #wrpper.content.header.saideBar.alert p{color:red;
}
[/css]
こうなるとパフォーマンスが下がってしまいますし、可読性も下がってしまいます。
うまくデザインを変えられず、結局禁じ手であるである、!importantに手を出してしまったりすることもあると思います。
しかし、こうすると八方塞がりになります。
color:red !important;
}
[/css]
そして、階層が深くなってしまったり!importantを使ってしまったものは再利用がしづらくなってしまいます。
次に同じようなデザインが必要となった場合には、同じようなことを追記することになります。
似たようなコードの増殖
例えばh2で下記のようなデザインを作ったとします。
[css] .main h2{border-left:3px solid #FF5A1E;
font-size:24px;
color:666;
}
[/css]
その後、サイドバーや他の部分が追加された際に、h2の様なコードがあるにも関わらず、同じような追加をしてしまったりします。
[css] .main h2{border-left:3px solid #FF5A1E;
font-size:24px;
color:666;
}
.sub h2{
border-left:3px solid #FF5A1E;
font-size:24px;
color:666;
}
[/css]
こう並べるとこんなことやらないと思いますが、コードが機能ごと（例えばヘッダーやメイン部分など）わかれてしまっているため、気付かず追記してしまうことがあると思います。
知らず知らずのうちに我々はCSSを破壊しています。
CSSプリプロセッサの登場
sassやlessにより、cssは物凄い拡張されました。ネストなど非常に便利です。
[css] .content {font-size:16em;
.menu{
color:blue;
}
}
[/css]
しかし、油断するとネストが深くなっていってしまっています。
[css] .content {font-size:16em;
.menu{
.search{
h2{
color:blue;
}
}
}
}
[/css]
昔よりも書くのがラクになっていった分、こういうことが起こってしまっています。
しかも、sassによって生成されたCSSは圧縮してしまってそもそも読めないものになっていたり、それほど確認をされていなかったりします。
※私もちゃんと確認出来てません。。
そのため、CSSプリプロセッサの登場によって、無駄なCSSが増えているのではないでしょうか。
これらのことが起こらないためにも、今CSS設計が強く話されるようになってきているんだと思います。
補足：階層が深くなるとなぜ良くないか
CSSはセレクタを上の階層から下がるのではなく、下から上にあがります。
なので、階層が深くなると、それだけブラウザに負担をかけることになり、パフォーマンスが下がる原因となります。
階層はなるべく3~4階層くらいまでに留めておくのが良いでしょう。
とりあえず長くなりそうなので、ここらへんで区切ります。
次回はBEMについては次回書きます。
フロントエンドのパフォーマンスについて知りたければ、下記の2冊が詳しく書かれています。
