CSS 設計でいう保守性とは、新しいルールの追加・更新のしやすさ をあらわす。保守性を高めるためには、変更の局所化、他のルールへの副作用を最小にするアーキテクチャ を採用します。 設計思想は FLOCSS ベースの ECSS + rscss + Tailwind CSS のいいとこ取り 命名規則は MindBEMding (以降、BEM) 開発言語は Sass + PostCSS コンポーネント粒度 FLOCSS ではプロジェクトにおいて繰り返されるビジュアルパターンをすべて Object として定義します。Object には、Component と Project のレイヤーがあり、この 2 つの判別において Atomic Design のコンポーネント粒度の考えを拝借します。具体的には、 Component:Atoms Project:Molecules に分類します。 単語間の区切り
![堅牢で保守的な最低限度の CSS 設計 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/2386a1ef36be9c0dd6bc14f505637a3ff0e6a2a0/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-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JUU1JUEwJTg1JUU3JTg5JUEyJUUzJTgxJUE3JUU0JUJGJTlEJUU1JUFFJTg4JUU3JTlBJTg0JUUzJTgxJUFBJUU2JTlDJTgwJUU0JUJEJThFJUU5JTk5JTkwJUU1JUJBJUE2JUUzJTgxJUFFJTIwQ1NTJTIwJUU4JUE4JUFEJUU4JUE4JTg4JnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz00Mzg3YzZlOWQwMDNhMjkyOGNmYzJhN2NiMjQ0NGNiMw%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwdG9zaGlmdW1paW1hbmlzaGkmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWU2NjcwMTZmZjYxNzU3ZTlkYjJhYzhmYzY3ODM1Njhh%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3Da8037fcddb3686c2e074b24ed072aded)