CSS設計の自分的な正解
CSSでスタイリングするときってidentifierの付け方とか、ファイルの分け方とか、同じ結果を達成するにしてもやり方は一通りではなく自由度が高い
だけど、何の指針もなくidentifierをなんとなくな気持ちでつけ続けると、将来的にいろんな不都合が生じてしまう可能性がある
ファイルの分け方とか、identifierの付け方とか、スタイルのモジュールの分け方や粒度とか、細かいけどひとつひとつ戦略的に決定することで保守性の高い、再利用性の高い、いけてるCSS設計ができて開発体験も開発効率も上がることができると思う
CSSを適当に書くとよく見る問題:
- 特定のスタイルを変更しようとした時の影響範囲が予想できず変更するのが怖い&したくない
- スタイリングモジュールの再利用性が悪く同じようなスタイルを繰り返し書いてしまって非効率
- 特定の要素を変更したいけど、既存スタイルの詳細度が高すぎてimportantというジョーカーを使いたくなっちゃう
- HTMLの構造やタグの種類を変更した途端に見た目が崩壊する
これらの罠を回避するためのテク:
- スタイリングを単一責務の考え方に基づいてモジュール分けする。これを進めていくとTailwindのようなユーティリティモジュールという考え方にたどり着くと思う
- idを使ったりclassを無駄に組み合わせたり、不必要に詳細度を上げるようなidentifierの付け方をしない。クラスを組み合わせるのはベースクラスの拡張とか、状態を表現するときなどに限る
- identifierには基本的にタグ名は使わずCSSにHTMLのタグ構造の知識を持たせない
- ツールや命名規則を駆使して擬似的にネームスペースを作って影響範囲を限定的にする
などなど。
さらにTailwindみないなユーティリティクラスのライブラリを使えば下記のような嬉しさがある
- CSSを修正する行為がないので影響範囲とか気にする必要がない
- クラス名を考える労力を省くことができる
