はじめに CSSの設計手法については、数年前からたくさんのブログや書籍で詳細に取り上げられています。 今回はバックエンドからフロントエンドに来られたエンジニアさんや、コーディングに知識のあるディレクター・企画職の方にナレッジを共有したいと思い、まとめてみました。 定番のOOCSS,SMACS,BEMに加え、2016年に普及し始めたECSSについても取り上げます。 なぜCSS設計が必要なのか CSSは単純で多くの人が簡単に操作することができるという素晴らしい特性を持っています。 しかしその特性のために、複数人の関わる大規模なサービスや、長期的なメンテナンスが必要なサービスではすぐに破綻してしまう(なんでCSSすぐ死んでしまうん?)という弱点も抱えています。 大規模なサービスの初期デザインをコーディングに起こす際は、自分以外の人でも容易に理解できてメンテナンスしやすい設計を行う能力が必須です。
![CSSを長生きさせるための設計手法まとめ(*ECSSあり) - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/474b780f17fbe6d25279007e8d4cdfb256b4e16e/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Fadvent-calendar-ogp-background-7940cd1c8db80a7ec40711d90f43539e.jpg%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9Q1NTJUUzJTgyJTkyJUU5JTk1JUI3JUU3JTk0JTlGJUUzJTgxJThEJUUzJTgxJTk1JUUzJTgxJTlCJUUzJTgyJThCJUUzJTgxJTlGJUUzJTgyJTgxJUUzJTgxJUFFJUU4JUE4JUFEJUU4JUE4JTg4JUU2JTg5JThCJUU2JUIzJTk1JUUzJTgxJUJFJUUzJTgxJUE4JUUzJTgyJTgxJUVGJUJDJTg4JTJBRUNTUyVFMyU4MSU4MiVFMyU4MiU4QSVFRiVCQyU4OSZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzM0EzQzNDJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9N2UyZGQ4ODgxMTE2M2M5ZjUwYWY0NTFlNTVlN2ZmM2Y%26mark-x%3D120%26mark-y%3D96%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9OTcyJnR4dD0lNDBtb20wdG9tbyZ0eHQtY29sb3I9JTIzM0EzQzNDJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9M2E1M2I4N2IwODU3YmVhNzdjNGM3Y2U0NDUwNjA3OTg%26blend-x%3D120%26blend-y%3D500%26blend-mode%3Dnormal%26s%3Df4a0ed741895f91b084d6c0f61373492)