CSSの構造化 アーキテクチャ

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- の後ろに状態を付けます。

クラス名を考える時間をなるべく短くして、かつ後からの修正をしやすく。
当たり前だけど、なかなか難しい。。