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