CSS設計とは
CSSを記述する際のルールです。
CSS設計が必要な理由
CSS設計を意識せずに記述すると様々な問題が起こります。
その問題を回避し「メンテナンス性の高いCSS」を実現するためにCSS設計が必要です。
CSS設計を意識せずにスタイルを記述すると起こる問題
- 可読性が低く、何をしたいのかわからない
- 消して良いのか、残すべきものなのかわかりずらい
- 修正したら意図しない部分までスタイルが変更されてしまう
- スタイルの上書きが多用され、!importantを使わざるを得ない
メンテナンス性の高いCSS
メンテナンス性の高いCSS設計のゴールとして、
Googleのエンジニアであるフィリップ・ウォルトン氏のブログ記事から引用すると次の４つが挙げられます。
- 予測しやすい
- 再利用しやすい
- 保守しやすい
- 拡張しやすい
CSS設計の手法
CSS設計の手法は様々あり、各々のCSS設計の特性およびプロジェクトの規模・実装者の人数・スキルなどを考慮し適切に選定する必要があります。
以下ではCSS設計の手法を一部ですが紹介します。
各設計の詳細に関しては別記事で記載します。
- OOCSS
- BEM
- SMACSS
- MCSS
- ECSS
- AMCSS
- RSCSS
- ITCSS
- FLOU
- APB CSS