CSSでやりがちな無駄な表記についてまとめてみました

01．小数点ゼロを残す

× font-size: 1.0rem;
○ font-size: 1rem;

× line-height: 2.0;
○ line-height: 2;

02．0 に単位を付ける

×
margin: 0px;
padding: 0rem;
top: 0%;

○
margin: 0;
padding: 0;
top: 0;

03．同じ値を４方向書く

× padding: 1rem 1rem 1rem 1rem;
○ padding: 1rem;

× margin: 1rem 2rem 1rem 2rem;
○ margin: 1rem 2rem;

04．background を分解しすぎる

×
background-image: url(bg.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;

○ background: url(bg.jpg) center / cover no-repeat;

05．border を分解しすぎる

×
border-width: 1px;
border-style: solid;
border-color: #000;

○ border: 1px solid #000;

06．font を冗長に書く

×
font-family: sans-serif;
font-size: 1rem;
font-weight: 700;
line-height: 1.6;

○ font: 700 1rem / 1.6 sans-serif;

※可読性重視なら分割でもOK

07．不要な display 指定

×
div {
display: block;
}

○ 削除（デフォルト値）

08．position: relative の乱用

×
section {
position: relative;
}

○ absolute の基準が必要な時だけ付与

09．不要な width:100%

×
div {
width: 100%;
}

○ 削除（block は基本100%）

10．不要な height:auto

×
img {
height: auto;
}

○ 削除

例外：
img {
width: 100%;
height: auto;
}

11．overflow:hidden のクセ付け

×
section {
overflow: hidden;
}

○ 必要な箇所だけ

注意：
・sticky が効かない
・box-shadow 切れる
・absolute 切れる

12．セレクタを深くしすぎる

× #header > nav > ul > li > a

○ .header-link

13．不要な !important

× color: red !important;

○ 詳細度設計で解決

14．不要な calc()

× width: calc(100% - 0px);

○ width: 100%;

15．無意味な min / max / clamp

× font-size: min(1rem, 1rem);

○ font-size: 1rem;

16．色コードの冗長表記

× color: #ffffff;

○ color: #fff;

※ チーム規約次第

17．transform を分ける

×
transform: translateX(-50%);
transform: rotate(30deg);

○ transform: translateX(-50%) rotate(30deg);

18．CSS変数を使わない

×
color: #0077cc;
border: 1px solid #0077cc;

○
--primary: #0077cc;

color: var(--primary);
border-color: var(--primary);

優先度高（まず直す）

1. 0px → 0
2. 1.0rem → 1rem
3. padding: A A A A → padding: A
4. 不要な width:100%
5. セレクタ深くしすぎない

判断基準

• 短い → 正義ではない
• 意味が明確 → 正義
• 半年後に読める → 最優先

参考になれば幸いです。

ウェブプラスからの発信情報 Number：6064