レイアウトとコンポーネントベースのCSS設計手法「LCCSS」を考えた
rbv912氏の XCSS (https://github.com/rbv912/xcss) を読んでいて、こういうの良いな、とめちゃくちゃ影響を受けて自分でも書いてみた。
で、実際に出来上がったものを紹介してみる。
LCCSS(ルックス)
https://github.com/kokushin/lccss
Layout or Component base CSS coding rule
LCCSS(ルックス)は、各要素のカテゴライズを「レイアウト」と「コンポーネント」の2軸に絞ることでシンプルな構造にし、従来のCSS設計における思考時間を少しでも減らすことを目標としている。
それっぽく書いてみた。
「クラス名どうしよう」「ここの構造なんか違うな」「ここの構造変えたからここのクラス名も変えちゃったほうが良いかな」
なんて無駄な思考時間を減らしたいわけです。
SMACSSのカテゴライズは素晴らしい。BEMの書き方も素晴らしい。ECSSの考え方も素晴らしい。色々いいとこ取りをしてみよう、と、良いとこ取りのものが作りたかった。
詳しいことはReadmeに書いているのでチェック!
LCCSSで悩んだところや一押しポイント
LayoutとComponent
LCCSS v1では要素に対して l-
または c-
を必ず記述しなければならない。
Layoutは、枠組みなど親になる要素を含めればいいやーと思ったが、Componentの扱いが案外難しく、どの程度の範囲をComponentとして扱えば良いのか悩んだ。
ヘッダー・フッターは共通パーツだからコンポーネント、カードも共通で使いまわせるからコンポーネント、その他の見出しや本文は…共通じゃないし使いまわす予定もないけど、コンポーネントでいいや…と結構適当だったりする。(最初はコンポーネント以外の要素はレイアウトに含めるようにしていたが、レイアウトの意味合い的に違うなと思い変更)
ここに関してはもうちょっと考える必要がありそう…。
StateとJavaScript
これらは以前から使用しており分かりやすかったので採用。
ただ、疲れているとたまーにjs-
とis-
が一緒に見えてしまう。帰ろう。
Utility
すっごい微妙に違うスタイルをこの部分だけにあててほしい、という指示が稀によくあるので入れた。Modifier使うまでもないしなー、というときに使うと良い。ただし乱用はNG。
Theme
全体のテーマ(背景色とか)を変更したいときに使う。l-
でも良いかな?と思ったがレイアウトが変わるわけではないので採用した。
SMACSS、Enduring CSS(ECSS)、MindBEMding(BEM)
CSSカテゴライズ部分はSMACSSを参考にし、スタイルの繰り返しの許容などはECSSを参考にしている。命名規則にはBEMを簡略化したものを使っている。
- BlockとElementは
_
1個で繋ぐ(Block_Element) - Modifierは単体で使用せず BlockまたはElementの後に1個スペースを空け、
_Modifier
で繋ぐ(Block_Element _Modifier)
1つめは、BEMだとアンダースコアが2つ必要だが、長ったらしいので1つでよい。
2つめは、.Block_Element.Block_Element-Modifier
って書くくらいなら .Block_Element -Modifier
でええやん、と思ったのでそうした。
ただ、クラス名の先頭にハイフンは使えないので _Modifier
としている。
BEM特有の冗長な書き方からスッキリとした書き方になった。
また、_
で繋ぐ階層は制限していない。思った通りの名前を無限につけることができる。
これは、この文章の冒頭でも記述したとおり「クラス名どうしよう」で悩む時間を減らすためである。とはいえ、読んだときに意味は通じるようにある程度の可読性は確保しないといけないので、別の類義語を使う、キャメルケースで単語にしてしまうなど多少の工夫が必要ではある。
詳細度
セレクタの詳細度は一定にしよう!と言っておきながらLCCSSのModifierを使うと容易に詳細度が変動してしまうという(他のセレクタとの併用が必須のため)。でもまあ、Modifierだけ詳細度が1つ高いということでよしなに…
さいごに
ここまで書いてアレですが、結局のところ運用してみないと良し悪しが分からんです…。
まだ勢いで作ったばかりなので、しばらく自分で使ってみて改良したり、いろいろな人の意見を取り入れてより使いやすいものになっていったら良いなと思っています。