CSS設計について

53d6cfae0180c5d91ce80257a393369d_s
CSS設計・・・の前に、何故CSS設計が必要なのかとか書きます。
CSS設計自体は多くのサイトでよりわかりやすく書いてあるので書かないかも。

CSS、webデザイナーが最もいじる言語ではないでしょうか。会社にもよりますけど、私は1位CSS、2位HTML、3位Javascript、4位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の書き方をある程度決めてしまえばいいわけです。
簡単な話ですね。・・・と思ったか。実は意外と難しい。
中途半端にチーム内で決めてしまっても、サイトの構造などによっては適切な指定方法がわからないというふうになります。

じゃあどないすればいいんやねん

どうすればいいのかというと、有名な2つのCSS設計があるわけです。
それがBEMOOCSSです。
(リンク先は公式ではなく、それぞれをわかりやすく説明しているサイトです)
この2つをプロジェクトによって使い分けていければ、だいたいのことはなんとかなります。いやマジで。
とくに、BEMに関してはSass(SCSS)との相性もいいので、是非覚えてみてください。

最後に・CSS設計を使う時の注意事項

BEMとOOCSSは有名なCSS設計方法ですが、それでもかゆいところは出てくる場合があると思います。
その時に意識したいのが、「CSS設計は絶対的なものではない。」ということです。
つまり、クラス名に悩んでて時間がかかるとなると本末転倒なので、どうしても書き方がわからない時には普通に個人的にわかりやすいと思うクラス名にしてしまってもいいと思います。
また、CSS設計に沿って記述するとかえってわかりにくくなると思う場合も、無理に設計に沿う必要はないと考えます。
CSS設計に使われるのではなく、CSS設計を使う意識をもって適切に使おう。

コメントを残す

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。名前及びコメントは必須項目、メールアドレス及びサイトURLは任意です。