CSS 設計の基礎概念をおさらい
最近新しい CSS の機能に目がいきがち。ここらで根本的なところをおさらいしておこうと思う。
CSS 設計の基礎概念
- 予測しやすい
- 再利用しやすい
- 保守しやすい
- 拡張しやすい
予測しやすい
書いたコードが意図したとおりに動くこと。
たとえば、セレクタの関係を複雑にしない。
再利用しやすい
同じコンポーネント内で、同じプロパティと値の宣言を繰り返さないこと。
たとえば、ボタンなどコンポーネントのベーススタイルは Mixin として定義する。
保守しやすい
新しいコンポーネントを加えるときに、既存のコンポーネントに影響を与えないこと。
たとえば、新しく購入ボタンのスタイルを追加するときに、キャンセルボタンやボタンのベーススタイルに影響を与えてはいけない。
拡張しやすい
その CSS を見ると、設計概念を理解した上で触れること。
たとえば、サイズをしめす値の単位が明確に使い分けられていて、新しく CSS を触る開発者が迷わないこと。
