CSSを綺麗に書くためのプリプロセッサとかCSS設計記法とか
CSSを綺麗に、保守性高く書くのって難しいですよね。
前にこんな記事書いてみましたけど、今回はさらなる保守性向上のために できる事はないか調べてみました。
CSSプリプロセッサSass(サス)でライティングの効率を上げる
プリプロセッサって言葉に馴染みがない方も多いかもしれませんけど、実際に使う.cssファイルではなく、.scssファイルに記述した独自の構文を、コンパイラを通して.cssファイルを作ります。
これだけ見ると何がうれしいのかピンと来ないかもしれませんが、プログラム書ける人がcss書くときに使えるとうれしいなーと思いがちな変数定義、四則演算、制御構文(条件、繰り返し)なんかが使えるようになります。
Mixinsという考え方でコードの再利用性を高めることもできるので、プログラマが当たり前に使いたかった機能が網羅されている感じですね。
ただし、必ずコンパイルする必要があるので、TryアンドError的なスタイルを取る人にはまどろっこしいかもですね。
MindBEMdingで規約を共有する
MindBEMdingを説明するためにはBEMを説明する必要があります。
BEMは「Block：塊」「Element：要素」「Modifier：状態」の頭文字をとった言葉です。HTMLでいろんな部品を作るときの命名規約(名前付けルール)を定義したものです。
ドキュメント導入部分が日本語訳されていますので、詳細はそちらに譲ります。
で、このBEMをCSSに適用する際に使用する記法がMindBEMdingです。
命名規約って何がうれしいの？という方の方が多いかもしれませんが、チームで同じものを作るときはベースとなる何かを共有していないと話の進み方が全然違ったりするので、意外と重要な要素です。
ただし、BEMの命名規則、びっくりするくらいクソダサいので、それが我慢できるかが分かれ道かもしれません。
SMACSSとOOCSSで設計ルールを定める
BEMはHTMLの要素を3つのレベルに分割した命名規約でしかなかったのに対し、もう少し設計ルールを定めたものがSMCSSとOOCSSです。
例えばJavaで開発してる人なんかはデザインパターンでコードの再利用性なんかを学ぶと思うんですが、それのHTML・CSS版といった感じでしょうか。
まだ全然真髄が理解できていないので、これらを取り入れることによって生まれる「うれしいこと」についは、追って突き詰めていきたいと思います。
先人の知恵とノウハウを享受するためには
SMACCSもOOCSSもそうですし、Javaのデザインパターンもそうだと思うんですが、設計ルールって、先人の知恵とノウハウが凝縮されています。
ただし、デザインパターンを勉強した時にも感じたことですが、ただルールに沿えば良いものができるかというとそれはおおむねNoです。
なぜ、このパターンを採用しなければならないのか、今このパターンを採用することが正しいのか、等々、いろいろ吟味したうえで取り入れていかないと効果は半減しちゃうと思うのです。
やはり、地道にいろんなコードを見て良い、悪い、綺麗、汚いの判断ができるようになることが一番の近道かもしれないですね。
