オトナのCSS設計入門 - リンク一覧
アンチパターン
Case 1. 要素セレクタ依存
https://codepen.io/junsan50/pen/YEvELe
Case 2. 上書き
https://codepen.io/junsan50/pen/jaKMaV
Case 3. 冗長なセレクタ
https://codepen.io/junsan50/pen/KyeXzZ
Case 4. 破綻しやすい命名
https://codepen.io/junsan50/pen/QOxqoB
ハンズオン
ハンズオン資料
+
オトナのCSS設計入門 - ハンズオン資料
回答例
回答はあくまで「例」になります。100%の正解はありません。
要素に対する認識の仕方は人それぞれなので、参考程度にしてください。
(チーム内で分類のルールを決めておくことが重要になります)
Trial: 01
https://codepen.io/junsan50/pen/eeKVxo
Trial: 02
https://codepen.io/junsan50/pen/KyegJv
Trial: 03
https://codepen.io/junsan50/pen/KyBajP
CSSコンポーネント設計
OOCSS
https://app.codegrid.net/entry/oocss-1
SMACSS
https://smacss.com/
https://qiita.com/k_mori/items/7d3da61c712ff9513163
BEM
http://getbem.com/
https://qiita.com/Sekky0905/items/c1fc597adab5a77b0ce6
※ SCSSの「&」記法と相性が良いと記載ありますがそうでもないです(デメリットもある)
Please turn on JavaScript to use Paper in all of its awesomeness. ^_^
アンチパターン
Case 1. 要素セレクタ依存
Case 2. 上書き
Case 3. 冗長なセレクタ
Case 4. 破綻しやすい命名
ハンズオン
ハンズオン資料
回答例
Trial: 01
Trial: 02
Trial: 03
CSSコンポーネント設計
OOCSS
SMACSS
BEM