なぜこの記事を書こうと思ったか 配属されてからは、業務でCSSを書くといったら、Bootstrapのclass名を付与したり、機能追加の際にちょっと書くといったことだったのですが、大幅にサービス全体のCSSを見直さなきゃいけない機会があったので、どんなことを考えたのか書いておきます。 CSSのリファクタリングや再設計は工数がかかる上に、そこまで対価がない結構辛いことだと思います。また運用していて数年が経てば大体の場合がCSS設計は崩壊していきます...。 特に途中で気づいた、最初に決めておけばよかったということも多々あったので参考になればと思います。 前提条件 下記のような時に、この記事は役に立つのではと思って書いてます。 すでにあるWebサービスの大幅なデザイン改修がある 新しくCSSを書かなきゃいけないページが5ページ以上ある 既存のCSS設計を見なさなきゃいけない(CSSファイルが6
![WebサービスにおけるCSS再設計で考えたこと](https://cdn-ak-scissors.b.st-hatena.com/image/square/940be7a3a88e015cb5a5472587124f01d4b503f4/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-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9V2ViJUUzJTgyJUI1JUUzJTgzJUJDJUUzJTgzJTkzJUUzJTgyJUI5JUUzJTgxJUFCJUUzJTgxJThBJUUzJTgxJTkxJUUzJTgyJThCQ1NTJUU1JTg2JThEJUU4JUE4JUFEJUU4JUE4JTg4JUUzJTgxJUE3JUU4JTgwJTgzJUUzJTgxJTg4JUUzJTgxJTlGJUUzJTgxJTkzJUUzJTgxJUE4JnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz0xM2M5YzAxNzU0MTg5MjllZGQ5NzY0MjMxMTIzYTY1Zg%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQweXV6b29obyZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9NjY1MGFmZDM2MzJhYmI4ZmYxODJmNDhiOTQwM2Y5MGU%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D0d0855871aa1073c77759486f2a440bd)