最近、CSS設計に思いを馳せることが多くなってきたので現時点での自分の所感をメモしておく。
結論
- 基本線CSSはBEM(block-name__element-name--modifire-name)に従って書くで良いと思う。
- 昨今はフレームワーク等の進化によりCSSのカプセル化ができるようになりCSS設計からコンポーネント設計に変化してきた感がある。
- BEMにおけるBlockを目安にComponentとして切り出して、その中はゆるーくBEMっぽく書いていく感じがいいのかなと思っている。
- ベースとなる部分やユーティリティに関してはCSS設計を行う必要があるが、この辺りはTailwindCSSを利用するとCSS設計を代替できる気がする。
ポエム
CSS設計の議論をすることは少なくなっているように感じる。
State Of CSSでも2020まではCSS設計手法のトピックがあったが、
State Of CSS 2021からは消えている・・・。
現代ではCSS単体で書くことは少なくReactやVue.jsを併用しCSSをコンポーネント内にカプセル化するようになり、 いわゆるCSS設計とはデザインカンプをどういう境界でわけ、どこを共通化するかというコンポーネント設計と見なすことが出来るようになったんじゃないかと思う。 (デザインカンプをどうコンポーネント設計するかが焦点となったことりよりFigmaみたいなコンポーネント設計意識したデザインツールが流行ってきたのかもしれない)
そのためBlock(≒コンポーネント)を上手く設計できれば、その下のElementやModifireはコンポーネント内にカプセル化されるため厳密なCSS設計の重要度は下がってきているように思う。 (とはいえ親コンポーネントやglobalに書かれたCSSの影響は受けるため防御的な意味合いでBEM的にセレクターを一意にしておくことは意味はあると思う。)
しかしながら、 UIに紐づかないベースのCSSをどうするか、ユーティリティをどこまで用意するかといった部分は、まだ厳密なCSS設計が必要になっている箇所だと思っているが、 Tailwind CSSを使うと、このへんのベースのCSSとユーティリティをいい感じにデザインシステムから設定に書き出して管理できるので、 徐々にこの辺りのCSS設計も不要になってくるのかもしれない。
おわり
