ReactやVue.jsなどのコンポーネントベースの開発が広く普及する中、CSS設計を学ぶことに時間を使うのはどれだけのメリットがあるのか？と思いました。
そこで改めて「CSS設計」責務を考えながら考察してみたいと思います。
今からCSS設計を学ぼうとしている方の判断材料になれば幸いです！
結論：「CSS設計」を学ぶのは後回しにした方が良い
今からCSS設計を学ぶなら後回しにしたほうが良いと考えます！
誤解のないように補足しておきますが、学ぶ意味はあります。
ただ、自身の状況に合わせて優先度は落とした方が良い場合もあるということです。
では、なぜ後回しにした方が良いのかについて書いていきます。
「CSS設計」を学ぶのは後回しにした方が良い理由
理由は、ReactやVue.jsでの開発が主流になったためです。
ReactやVue.jsのコンポーネントベース開発がこれまでCSS設計で担っていた部分をより良い形で実現してくれるようになりました。
必ずしも必要な知識ではなくなってきたと考えています。
では「CSS設計」の責務にはなんだったのか？について考えてみます。
CSS設計の責務はなんだったのか？
CSS設計の大きな責務は2つだと考えています。
- メンテナンス性を向上させること
- チーム開発を円滑にできるようにすること
さらに細かくいうと…
- 冗長的なコードをなくすこと
- 可読性を担保すること
- スタイルの記述方法に一貫性を持たせること
- 変更による影響範囲を最小限にすること
のようなことをCSS設計によって実現することでチーム開発を円滑にしていくものだと考えています。
CSS設計は命名ルールや考え方によって変更のしやすさ・コードの見やすさを高める目的のために導入されてきたと思います!
なぜ「CSS設計」が必要だったのか？
WEBアプリケーションが大きく、複雑化してくに伴いそれまでのCSS管理方法では限界が来たからだと考えています。
それはCSSの特徴であるグローバルスコープ、カスケード、詳細度が影響していると言えます。
CSSの記述量が増えれば増えるほどCSSの特徴が開発の効率を下げ、時には表示崩れなどの不具合を引き起こす原因となりました…。
上記の特徴からWebアプリケーション開発が大規模かつ複雑なインターフェースをチームで構築する時非効率にならざるおえない状況がやってきたのだと考えています。
CSS設計の責務はコンポーネントベースの開発がその一端を担ってくれた
CSSの特徴である干渉し合う仕組み、グローバルスコープを回避してくれたのがコンポーネントベースの設計です。
CSSの影響範囲をコンポーネント内に閉じ込められることによって、グローバルスコープを回避してCSSを扱えるようになりました。
コンポーネントごとにclass名を検討できるため、class名のネームスペース確保に悩む時間がほぼなくなりました。
CSS設計は必要なくなったのか？
これは「No」だと考えています。
グローバルスコープや命名を考える労力が減ったのは確かですが、コードの一貫性はコンポーネントベースの設計では補えません。
一貫性というのは…
- 要素の名前をどのように命名するのか
- 要素と要素の間は、marginで確保するのかflexのgapを利用するのか
- marginは上方向につけるのか、下方向につけるのか
- プロパティの書き方
などをチームで認識を合わせて一貫したスタイリングを保つことを言います。
一貫性をどのように担保するのか？について考える時「CSS設計」に対しての知識や知見が一定量必要だと考えています。
なので「CSS設計」が必要なくなったのか？に対する答えは現時点では「No」です。
【コンポーネントベースの開発時代においてCSS設計は本当に必要なのか？考えてみた】まとめ
CSS設計を学ぶ意味はあります。
コンポーネントを設計する上でもある程度役には立っていると感じるためです。
TypeScriptやNext.jsなどでどのように表現したら良いか分からなくても…
こうであってほしい、このようにコンポーネントを切り分けたいなどはCSS設計の知識が活かされていると思うからです。
この記事がご自身の状況に合わせて、今CSS設計を学ぶメリットが大きいのか、小さいのか判断できる材料になれば幸いです。