CSSの構造化 アーキテクチャ
このサイトが結構面白かったので、まとめてみる。
css が肥大化する理由TOP5
- float が多くなるのは、グリッドが存在しないか、効果的に機能していない。
- margin が多くなる場合は、reset.css (または normalize.css) が必要。
- padding が多くなるのは、設計パラメーターが明確でないため、複数の開発者が何度も細部を微調整している。
- font-size が多くなるのは、カスケードを利用しておらず、font-size と一緒に見出しもルールセット内に隠れている可能性がある。
- !important が多くなるのは、このプロパティを使用して具体性をオーバーライドしており、カスケードを利用していない。
引用
グループでは、.rounded-corners のように、外観や設計上の役割を基に説明的な名前を付け、特定のプロパティを共有するすべてのセレクターをそのスタイルにグループ化
(SMACSS)レイアウト、モジュール、および状態の各スタイルの違いを示すために、クラス名にプレフィックスを付けることを提案しています。レイアウトの場合、たとえば l- や layout- を付けて、.l-aside や .layout-aside のようなクラス名を作成します。状態変化を生み出すクラスを示すには、.is-active や .is-collapsed のように .is- の後ろに状態を付けます。
クラス名を考える時間をなるべく短くして、かつ後からの修正をしやすく。
当たり前だけど、なかなか難しい。。