1. 不要な!importantの使用
問題点
CSSの特定のルールに!importantを使うことは、後でのメンテナンスを難しく、予期しない副作用を引き起こす可能性があるので基本的には使わないように。
.button {
color: red !important;
}
修正方法
より特定性の高いセレクタを使うか、他のCSSルールを再検討しましょう。
.button.primary {
color: red;
}
2. タグに全般的なスタイル
問題点
タグに対してスタイルを指定してしまうと、パフォーマンスに悪影響を及ぼす可能性があります。
p {
margin: 20px;
}
修正方法
必要最小限の要素にのみスタイルを適用するようにします。
.content p.lasttext {
margin: 20px;
}
3. セレクタの過剰なネスト
問題点
過剰なネストはCSSの読みやすさを損ない、思わぬところで悪影響を与える可能性があります。
html body main header.header nav.nav ul li a {
color: #333;
}
修正方法
より単純で特定性の高いセレクタを使用します。
.nav-link {
color: #333;
}
4. ショートハンドにより不必要な値の設定
問題点
CSSで値を指定する際に、ショートハンドを使い不用意に値を設定したために、無駄な打ち消しが発生する場合があります。
.container {
width: 100%;
margin: 20px;
}
.container {
margin-left: 0px;
margin-right: 0px;
}
修正方法
必要な箇所にのみ値をいれる。
.container {
width: 100%;
margin: 20px auto;
}
5. ベンダープレフィックスの入れ忘れ
問題点
ブラウザによっては一部のCSSプロパティでベンダープレフィックスが必要な場合があります。
.div {
display: flex;
align-items: center;
justify-content: center;
}
修正方法
オートプレフィックスツールを使用して、必要なプレフィックスを自動的に追加できるようにしましょう。
.div {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
6. 適切でないセレクタの使用
問題点
より特定的なセレクタを使用せず、汎用的なセレクタを使うことで、意図しないスタイルの影響を与えることがあります。
#content > div {
margin-bottom: 20px;
}
修正方法
より具体的で特定性の高いセレクタを使用して、意図した要素にのみスタイルを適用します。
.article-content > .paragraph {
margin-bottom: 20px;
}
7. ハードコーディングされた数値
問題点
固定数値を直接CSSに記述することで、レスポンシブデザインやスケーラビリティに対応できない場合があります。
.header {
color: #333;
}
修正方法
変数や計算式を使用して、柔軟性のあるスタイルを実現します。
CSS変数やSASS,SCSSの変数を使う
css
:root {
--color-base: 80px;
}
.header {
color: var(--color-base);
}
8. フォントの管理不足
問題点
フォントの指定が不足していると、ブラウザがデフォルトのフォントを適用する可能性があり、デザインの一貫性が失われることがあります。
body {
font-family: Arial, sans-serif;
}
修正方法
フォントスタイルを詳細に指定し、フォールバックオプションも考慮します。
body {
font-family: 'Helvetica Neue', Arial, sans-serif;
font-weight: 400;
font-size: 16px;
}
h1 {
font-size: 24px;
font-weight: 600;
}
9. インラインスタイルの乱用
問題点
HTML内で直接スタイルを定義することで、メンテナンス性が低下し、制御するのが難しくなります。
<div style="width: 50%; float: left;">
<!-- content -->
</div>
修正方法
CSSファイルにスタイルを移動し、クラスやIDを使って適切にスタイルを管理します。
<div class="half-width">
<!-- content -->
</div>
<style>
.half-width {
width: 50%;
float: left;
}
</style>
10. 不必要なコメントの残留
問題点
開発中に挿入したコメントが、残ってることがあり、不要なコメントがあると、何か重大な意味があるのではと考えてしまいます。
/* 例のサイトからの引っ張ってきたもの */
.header {
background-color: #fff;
}
修正方法
不要なコメントを削除し、必要な場合には適切にコメントを管理します。
.header {
background-color: #fff;
}
最後に
これらのポイントを考慮することで、メンテナンスのし易いCSSを実装することができるはずです。