Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
1
Help us understand the problem. What is going on with this article?
@kwsks22

CSS設計について考える

More than 1 year has passed since last update.

CSS設計とは

CSSを記述する際のルールです。

CSS設計が必要な理由

CSS設計を意識せずに記述すると様々な問題が起こります。
その問題を回避し「メンテナンス性の高いCSS」を実現するためにCSS設計が必要です。

CSS設計を意識せずにスタイルを記述すると起こる問題

  • 可読性が低く、何をしたいのかわからない
  • 消して良いのか、残すべきものなのかわかりずらい
  • 修正したら意図しない部分までスタイルが変更されてしまう
  • スタイルの上書きが多用され、!importantを使わざるを得ない

メンテナンス性の高いCSS

メンテナンス性の高いCSS設計のゴールとして、
Googleのエンジニアであるフィリップ・ウォルトン氏のブログ記事から引用すると次の4つが挙げられます。

  • 予測しやすい
  • 再利用しやすい
  • 保守しやすい
  • 拡張しやすい

CSS設計の手法

CSS設計の手法は様々あり、各々のCSS設計の特性およびプロジェクトの規模・実装者の人数・スキルなどを考慮し適切に選定する必要があります。
以下ではCSS設計の手法を一部ですが紹介します。
各設計の詳細に関しては別記事で記載します。

1
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
kwsks22

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
1
Help us understand the problem. What is going on with this article?