Chapter 08

CSS アーキテクチャ

ほげさん
ほげさん
2021.12.19に更新

CSS アーキテクチャ

CSS は JavaScript 以上に無知

BEM

🤔 7 年くらい前にかじって試し書きをしたことがある... ほとんど覚えてないけど...

  • CSS 設計手法の 1 つで Block, Element, Modifier を用いた厳格な class の命名ルールが特徴
    • block__element--modifier という繋げ方をする
  • 適用される要素や領域を明確に定義し、差分は --Modifier で重ねてスタイリングする
<div class="block">
    <h1 class="block__title">タイトル</h1>
    <div class="content">
        <p class="content__text">ほげ ほげ ほげ ほげ ほげ</p>
        <button class="content__button">決定</button>
        <button class="content__button--gray">キャンセル</button>
    </div>
</div>

😗 こんな感じだった気がする、要素に対する定義と差分適用の思想がポイント...??

CSS In JS

🤔 聞いたことないけどなんとなくイメージできる気がする

  • JavaScript に CSS を書くアーキテクチャ
  • JavaScript で行った定義は style タグに展開される
    • 変数を style 属性に展開するだけでは、実現できないことがあるから
      • e.g. 擬似クラス
      • e.g. メディアクエリ

e.g. ただの展開

const styles = {
  color: white,
  backgroundColor: black
}

<p style={styles}>hoge hoge hoge</p>
生成結果
<p style="color: white; backgrond-color: black;">hoge hoge hoge</p>

e.g. CSS in JS

import styled from 'styled-components';

const Text = styled.div`
  color: white,
  backgroundColor: black
`

<Text>hoge hoge hoge</Text>
生成結果
<style>
.ow9s02gin3 {
  background-color: black;
  color: white;
}
</style>

<p class="ow9s02gin3">hoge hoge hoge</p>
  • モダンなコンポーネント化に即して CSS も書けるようになる

😗 ただインライン展開するだけだと思ったけど、style タグになるのは知らなかった

CSS Modules

🤔 再利用に関する何かな気がする

  • CSS の影響範囲をコンポーネント単位で閉じようという CSS の設計概念・指針
  • クラス名が ファイル名 + Base64 エンコード に変換されるので、グローバル領域で衝突しない
  • BEM とは対照的に、各クラスには親子関係はなく全ての属性が含まれる

e.g. BEM などは text.css との衝突を避けるために button- prefix を付け、装飾は差分で行う

button.css
.button { ... }
.button-disabled { ... }
.button-error { ... }
生成結果
<button class="button button-disabled">submit</button>

e.g. CSS Modules は .error でも衝突しないし、クラスには全ての属性が含まれる

button.css
.normal { ... }
.disabled { ... }
.error { ... }
JavaScript
import styles from 'button.css';

button.outerHTML = `<button class=${styles.disabled}>submit</button>`
生成結果
<button class="components_button__normal__nbow03827">submit</button>

😗 .cssimport するところがポイントっぽい

まとめ

CSS って .css / .scss を書くだけだと思ってたけど、全然知ってることと違ってた...

コンポーネントとか親子関係とか、何を何に依存させた ( くな ) いかに注目するといいのかな
e.g. CSS を HTML に依存させる / させない
e.g. class に親子関係を設ける / 設けない