ざっくりつかむCSS設計

2022年8月31日

私はCSS設計がどちらかと言うと苦手な人間で、普段からJavaScriptばかり書いている。

ちなみに今の自分の基本的な設計はBEM + Every Layoutがしっくりきている。ブロック単位のスタイリングはBEMで、ブロックをどう並べるかを決めるのはEvery Layoutという感じだ。
しかしEvery Layoutがうまくハマるのは、デザインがガチガチのルールで作成されている場合なように感じている。例外に弱い。

が、最近はCSSも進化しまくっていて、いろいろな方法論が充実し始めており、CSSそれ自体にロジックを持たせることができるようになってきた。
そこでこれまでのCSS設計についてふりかえりつつ、今後の設計方針をちゃんと固めようと思っている。

とりあえず振り返りとしては、ざっくりつかむ CSS設計を読んだ。

デザイナーと認識合わせをすること

レイアウトの単位

ブロックの単位

余白

余白設計の章で

余白の方向

• 余白を上下どちらにつけるのか、はたまた両方につけるのかということ

余白のバリエーション

• どんなルールがあるか
• ブロックとブロック間の余白は統一できるか、例外はあるか

今後の方針

• テーマでカスタムプロパティを制御する

最初に決めること

• カスケードレイヤーの優先順位
  1. ユーティリティ
  2. テーマ
  3. BEM
  4. Every Layout
  5. Base
• 何を変数化するか
  • 余白の数値は変数化すべきか
• フォルダ構造

好み

あまり好き嫌いでプロジェクトを進めるべきではないかもしれないが、正解が一つではない以上、少なからず設計者の好みというのは現れてくるような気がしている。がどこが好みでどこがルールなのかははっきりさせておきたい。

ちなみに私は主張が強い方ではない（と思っている）ので、絶対に好みを優先するという気持ちはない。好みよりも柔軟性が大事だと思っているからこれまであまり設計指針を明確に定めていなかったのかもしれない。

できるだけシンプルにしたい

BEMで設計している以上、クラス名はどんどん長くなるが、長いのと複雑なのは切り離して考える。

• 全体がシンプルになる方を選択する
  • マークアップを増やすのか、クラスを増やすのか、を悩んだ時はJavaScriptやバックエンドから操作することを考えたらどちらが処理がシンプルになるかを基準に考える
• ファイル構造
• marginの相殺を前提に設計しない