​​オトナの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の「&」記法と相性が良いと記載ありますがそうでもないです（デメリットもある）