@extendのアンチパターン Sassを導入しはじめた2013年頃の自分は、Sassがもたらしてくれるコード再利用の為の機能に心酔していた。共通しているコードは全部@extendしないと気が済まない病気にかかっていたし、SMACSSやBEMといった構造化CSSのことも知らなかった。 当時の自分にとっての「ぼくがかんがえたさいきょうのSCSS」の出力結果は次のような内容だった。 .cf:before, .floatedList:before, .navGlobal ul:before, .book.horizontal .inner > ul:before, .book.horizontal .ulWrap > ul:before, .articleList > .head > .options > ul:before, .bodyPage .pageHeader .bodyHead .a
![Sass/SCSSの@extendは使いすぎるとカオスだった - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/950c5d580179de06bc80b4fbe3818a0dd5a17ff0/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9U2FzcyUyRlNDU1MlRTMlODElQUUlNDBleHRlbmQlRTMlODElQUYlRTQlQkQlQkYlRTMlODElODQlRTMlODElOTklRTMlODElOEUlRTMlODIlOEIlRTMlODElQTglRTMlODIlQUIlRTMlODIlQUElRTMlODIlQjklRTMlODElQTAlRTMlODElQTMlRTMlODElOUYmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPTAzM2JmODExYWY1NmE2YjYyM2Y0OWE0Y2ZhZTMxNjg2%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDB5X2hva2tleSZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9NzQ1Y2M3MDFiMzM3NzljNjU0ZDZmNzEwYzBlNWRkOTE%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D44eed32abb395d522c3c6938a3e35ae0)