CSS設計・・・の前に、何故CSS設計が必要なのかとか書きます。
CSS設計自体は多くのサイトでよりわかりやすく書いてあるので書かないかも。
CSS、webデザイナーが最もいじる言語ではないでしょうか。会社にもよりますけど、私は１位CSS、２位HTML、３位Javascript、４位PHPです。
CSSのクラス名について
CSSのクラス名、皆さんはどのようにして決めているのでしょうか。
クラス名は極端な話、一部記号を含む半角英数ならなんでも大丈夫です。例えば・・・
<div class="OiDuelSiroyo">わー</div>
.OiDuelSiroyo {
margin-top: 5px;
}
とか
<div class="kono-oresama-ga-sekai-de-itiban-tuyoitte-koto-nandayo">ぬー</div>
.kono-oresama-ga-sekai-de-itiban-tuyoitte-koto-nandayo {
background-color: green;
}
とか
<div class="-----------------------------bankai">おー</div>
.-----------------------------bankai {
color: #000;
}
とかでもいいわけです。なんてこった。
でもちょっと待ってください。例えば、クラス名.OiDuelSiroyoとかを他の人が見たときに、それがどんなプロパティなのかわかりますか？わかりませんよね。
.kono-oresama-ga-sekai-de-itiban-tuyoitte-koto-nandayoとか見ても、それがどんなプロパティを含んでいるのかわかりませんし、そもそも長すぎます。
書いている本人はわかっていても、チーム内のメンバーがわからなければ、適切なクラス名ではないということです。サイトを作る時は基本的に数人のチームになりますし。
そこでCSS設計の出番
じゃあどうするかというと、チーム内でCSSの書き方をある程度決めてしまえばいいわけです。
簡単な話ですね。・・・と思ったか。実は意外と難しい。
中途半端にチーム内で決めてしまっても、サイトの構造などによっては適切な指定方法がわからないというふうになります。
じゃあどないすればいいんやねん
どうすればいいのかというと、有名な２つのCSS設計があるわけです。
それがBEMとOOCSSです。
（リンク先は公式ではなく、それぞれをわかりやすく説明しているサイトです）
この２つをプロジェクトによって使い分けていければ、だいたいのことはなんとかなります。いやマジで。
とくに、BEMに関してはSass(SCSS)との相性もいいので、是非覚えてみてください。
最後に・CSS設計を使う時の注意事項
BEMとOOCSSは有名なCSS設計方法ですが、それでもかゆいところは出てくる場合があると思います。
その時に意識したいのが、「CSS設計は絶対的なものではない。」ということです。
つまり、クラス名に悩んでて時間がかかるとなると本末転倒なので、どうしても書き方がわからない時には普通に個人的にわかりやすいと思うクラス名にしてしまってもいいと思います。
また、CSS設計に沿って記述するとかえってわかりにくくなると思う場合も、無理に設計に沿う必要はないと考えます。
CSS設計に使われるのではなく、CSS設計を使う意識をもって適切に使おう。