CSS Methodology

This content is not available in your language yet.

LismがどのようなCSS設計になっているかを説明します。

CSSの階層構造

詳細度が複雑になりがちな問題への対策として、LismではCSSの階層構造を明確に定義しています。

Layer	役割	`@layer`
Settings	SASSの設定変数, mixinなど直接スタイルに吐き出されないもの。	-
Reset	reset CSS	`@lism.reset`
Base	`:root`でのトークン定義, HTML要素に対するスタイルの初期セット	`@lism.base`
Layout State `.is--{state}` `.has--{state}`	レイアウトを組む上で特定の役割を持ち、複数のモジュールに対してつけ外しできるような汎用的な機能。	`@lism.state`
Layout Module `.l--{name}`	基礎的なレイアウトを組むためのモジュール群。レイアウトの構成単位となるようなモジュール。	`@lism.layout`
Dynamic Module `.d--{name}`	動的な機能を持つ特殊なモジュール群。JavaScriptと組み合わせたものなど。	`@lism.dynamic`
Components `.c--{name}`	具体的な役割を持つコンポーネント群。他のクラスだけでは補えないコンポーネント特有のスタイルをまとめる。	`@lism.component`
Utility Class `.u--{name}`	その他、機能やスタイルが明確なユーティリティクラス。	-
Props Class `.-{prop}:{val}`	単一のCSSプロパティティに紐づいたクラス。	-

デザイントークン

タイポグラフィ、余白、カラー、シャドウなど、主要なプロパティに対して段階的なプリセット値やセマンティックなキーワードでCSSカスタムプロパティを定義しています。

トークンを流用することで、サイトを通してデザインに一貫性が生まれ、使用しているプロパティの意図も第三者が読み取れるようになります。

あとからサイト全体を微調整する必要が出てきてもトークンの値を変更するだけでよくなり、メンテナンス性も高まります。

詳しくはトークン解説ページを参照してください。

CSSのクラス設計

Lismでは、レイアウト・デザインの構成要素を細分化していくつかの種類に分類しています。

State Class

分類	形式	例
Layout State 状態として付け外しできるようなデザイン機能を持つもの	`.is\|has--{stateName}`	`.is--container`, `has--gutter`
Temporary State js操作等によって付け外しされるようなクラス	`._{state}`	`._active`, `._opened`

Layout State はそれ単体でスタイルを持ち、Temporary State はそれ単体ではスタイルを持ちません。

Module Class

分類	形式	例
Layoutレイアウトの構成単位となるようなモジュール	`.l--{name}`	`.l--grid`
DynamicJSと組み合わせた動きのあるモジュール	`.d--{name}`	`.d--tabs`
Componentその他のコンポーネント	`.c--{name}`	`.c--card`

Blocks はAtom,Layoutクラスで構成されるような粒度（（他のBlock,Componentが内部に入らない規模）で、Componentは Layout,Atom,Block 等で構成されるような粒度でイメージしてください。

子要素を持つ場合

子要素も含めて一つのモジュールとして機能するものは、BEMでいうところの Element にあたる文字列をクラスに付け加えます。

形式: .{pre}--{componentName}_{elementName}
例: .c--hoge_item

バリエーションスタイルを用意する場合

モジュールのバリエーションスタイルを定義する場合、BEMでいうところの Modifier を付け加えたクラスを作成します。
この時、元となるモジュールクラスも併記し、CSSコードの重複を避けるようにして運用します。

形式:.{pre}--{name}-{variant}
例: .c--button.c--button-outline

Prop Class

特定のCSSプロパティに対応するユーティリティクラスを定義しています。
基本的にはそれぞれのクラスが単一のCSSプロパティをコントロールするためのになっています。（一部、例外もあります。）

Prop クラスには以下の3種類の形式があります。

形式	説明	例
`.-{prop}:{value}`	各プロパティごとの主要な値やトークンの値を利用するためのユーティリティクラス(*1)	`.-fz:l`, `.-ta:c`
`.-{prop}`	変数 `--{prop}` を受け取るためのクラス(*2)	`.-p`, `.-fz`
`.-{prop}_{bp}`	変数 `--{prop}_{bp}` を受け取るためのクラス(*3)	`.-p_sm`, `.-p_md`

*1: 全てのトークンにユーティリティクラスがデフォルトで用意されているわけではありません。
*2: 全てのCSSプロパティに対応するクラスがデフォルトで用意されているわけではありません。
*3: ブレークポイントに対応したクラスがデフォルトで用意されているものは一部のプロパティのみです。

↓

上の表で示したクラスは、例えば以下のようなものがあります。

.-ta\:c { text-align: center; }
.-ta\:l { text-align: left; }
.-fz\:l { font-size: var(--fz-l); }
.-fz\:3xl { font-size: var(--fz-3xl); }

.-p{ padding: var(--p); }
@container (min-width: 480px) {
  .-p_sm{ padding: var(--p_sm); }
}
@container (min-width: 720px) {
  .-p_md{ padding: var(--p_md); }
}

（厳密には少し異なるものもありますが、イメージとしてはこんな感じです。）

レスポンシブ対応

直前に紹介した.-{prop}_{bp}形式のクラスと--{prop}_{bp}形式の変数によって、レスポンシブ対応を行います。

↓

実際の活用例は次の通りです。

BOX

リサイズ可能

<div class="-p:20 -p_sm -p_md -bd" style="--p_sm:var(--s30);--p_md:var(--s50);">
  BOX
</div>

詳しくはレスポンシブ対応解説ページを参照してください。

その他の推奨規則

Lismパッケージに内蔵されているクラスではありませんが、次のような感じで命名すると統一感でると思います。

分類	形式	例
ゾーニング	`.z--{zoneName}`	`.z--header`, `.z--sidebar`, `.z--article`
ページの分類	`.p--{type}-{id\|slug}`	`.p--front`, `.p--archive`, `.p--post-{id}`, `.p--page-{slug}`

命名規則

CSS変数の命名規則

変数名の各ブロックはキャメルケースで、--{varName}のように表現します。

トークン値など、一つのプロパティに対するバリエーションを示すものは、--{prop}-{token}のようにハイフンを1つ使って表現します。
- 例: --fz-s, --fz-l
- ただし、spaceトークンのみ特殊になっており、。sはプロパティ名ではなくspaceの省略であること、特に頻出なトークンであることから、--s{Num}とします。
  - 例: --s10, --s40
何かの要素に対するプロパティで、グローバルに上書き可能な値は--{target}--{prop}のようにハイフンを2つで表現します。
- 例: --link--td, --list--pis, --h--ff
モジュールの子要素に対するプロパティは--{target}_{prop}のように_を1つつけて表現します。
- 例: --icon_size
特定のクラスモジュールの機能を担うプロパティは、--{varName}のように単一ブロックで表現します。
- 例: --gutter, --colSize
特定のCSSプロパティの値を表すものは--{prop}で表現します。
- 例： --p, --mbs
ブレイクポイント値は-{prop}_{bp}で表現します。
変数を構成するための値や、特殊な計算式に使うような変数は、--_{varName}のように_から開始します。
- 例: --_sh_hsl, --_fzmol, _isHov

クラスの命名規則

…

-{prop}:{value}の{value}部分について

小数点が付いた値 → .のままで。(CSS側で\使う必要あり)
- 例: .-prop:1.5
ネガティブ(マイナス)値の表記もそのままで。
- 例: .-prop:-1

単語の省略について

基本的にはEmmetの省略形で統一するようにしています。

font-size → fz
background-color → bgc
text-align:centerに対応するクラス → .-ta:c

次のように、例外 (Emmetと違うもの、Emmetっぽくないもの)もあります。

px,py,mx,my
gx(column-gap),gy(row-gap)
aslf, jslf
- Emmet ではas, jsになるが as は Lism Prop と被り、jsは javascript が思い浮かぶため、変形しています。

Emmet で明確に定義されていないものもあります。
その場合は、それっぽく省略しています。母音を抜く、または先頭の数文字を取る、のどちらかでできるだけ省略するようにしています。

ただし、省略すると極端にわかりづらくなる、または他と被りそうなものは、一部そのままです。

例:

object-fit → obf
filter → fltr
translate → trnslt
scale → scale