こんにちは朱夏です。
今回は、CSSの設計手法について書きたいと思います。
先日、Lancersで案件を探していると、こんな条件を見かけました。
BEM設計というものが何なのか解らず、残念ながら今回の提案は中断しました。
というわけで、BEMについて調べてみました。
BEMとは、CSSを使用する際の設計手法の一つで、以下の様な特徴がある様です。
- classに命名規則がある
- scssを使用する
- 各class名はなるべくユニーク
こんな感じです。
scssが何かというと、CSSの派生言語と言ったらいいのでしょうか。
スタイルをもっと簡単に、見やすく書く事が出来るものの様です。
私もまだ勉強していない内容なので、ここでは詳しく話しません（話せません）。
class名がユニークになることについて、これは以下の様なメリット、デメリットがありそうです。
そもそもの話、BEM（CSS設計）はWebサイト作成の時にスタイルの管理を効率的に行うために使われるものなので、個人でCSSを学習したりのレベルではそこまで気にしなくていいものかもしれません。
CSS設計手法とは、CSSを書くときのルールの事をいいます。
これは、複数人で大規模なWeb作成を行う場合や、Webサイト作成後の管理を目的としています。
CSS設計手法にはBEMの他にもいくつかある様です。
主なものを以下に紹介しておきます。
- BEM
- OOCSS
- SMACSS
それぞれでルールが決まっていますが、そこにプロジェクトごとのローカルルールを加えて独自の設計手法を使うのが普通の様です。
というわけでまとめです。
- BEMとはCSS設計手法の１つ
- CSS設計手法とは、CSSを管理しやすくするためのルール
- BEMではCSSを書くのにscssを使用する
こんなところでしょうか。
SCSSについては、情報を調べてみるとかなり便利なもので、CSSの拡張言語と言った位置づけの様です。
使えるようになれば、CSSのコーディング速度が上がりそうなので、そのうち勉強してみたいと思います。
今はBootstrapが便利過ぎるのでそのうち・・・
今回は以上です。
次回もよろしくお願いします。
