CSS設計

命名規則関連

CSS Architecture: First steps

コードを小さなチャンクに分割し、スコープでそれらを分離

独立したカプセル化された方法でコンポーネントをコーディングする。

CSSセレクターの目的と相互関係に基づいて名前を付ける。

ITCSS

Settings

Settings is where your configuration files, such as variables (colors, sizing, typography definitions…) and helpers (functions, mixins…) will be stored.

Base

The Base layer will contain your reset and unclassed HTML rules – the way a default <a> or <input>

Layout.

Layout stores the structural classes that hold components on the page – grids and containers, for example. And lastly,

Components

Components: the core of CSS architectures and design systems.

OOCSS

影響範囲が分かりづらい

SMACSS

スマックス

カラーコード規約例

CSS設計にあたっての参考情報

冗長に書いても良い

意味のあるdivやspanは使う

div等がすくないとその構造の責任が大きくなる。

同じクラス名を連結してスタイルを上書き

極力idセレクタにスタイルを適用しない

idセレクタを

code:css

.large-text.large-text

デザイントークン

色などを仕様として定義？

色などを変数みたいに参照できるようにしておくということ？

参考