オトナのCSS設計入門 - リンク一覧

アンチパターン

 

Case 1. 要素セレクタ依存


Case 2. 上書き


Case 3. 冗長なセレクタ


Case 4. 破綻しやすい命名




ハンズオン

 

ハンズオン資料


回答例

回答はあくまで「例」になります。100%の正解はありません。
要素に対する認識の仕方は人それぞれなので、参考程度にしてください。
(チーム内で分類のルールを決めておくことが重要になります)

Trial: 01


Trial: 02


Trial: 03




CSSコンポーネント設計

 

OOCSS


SMACSS


BEM

※ SCSSの「&」記法と相性が良いと記載ありますがそうでもないです(デメリットもある)