こんにちは。今回は省略してより簡潔に書けるかもしれないCSS記法4例とおまけ1つを紹介します。
サンプルコードでは冗長な記法のクラスを.verbose {...}、簡潔な記法のクラスを.concise{...}として書いていきます。
省略できる初期値
transition: all;
時間遷移効果を与えるtransition-propertyプロパティの初期値はallなので、transition: allと記述する必要はありません1。
さらに遷移変化の進行割合を表すtransition-timing-functionプロパティは初期値がeaseなので2、もしeaseに設定する場合はこれも不要になります。
css
.verbose{
transition: all .3s ease;
}
.concise{
transition: .3s;
}
margin: 0 auto;
左右中央寄せ目的で書かれることが多いmargin: 0 auto;ですが、そもそもmargin: autoの初期値は0です3 4。そのため以下のように省略可能なことが多い。
css
.verbose{
margin: 0 auto;
}
.concise{
margin: auto;
}
position:absolute;を使った上下左右中央寄せなどのケースではmargin: 0 auto;とmargin: auto;は振る舞いが変わるので注意です。
css
/*このようなケースでは位置が変わることがあります*/
/*上下左右中央寄せ*/
.some-box{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
.other-box{
/*左右は中央寄せのまま親相対要素の上にくっつく*/
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: 0 auto;
}
省略できる単位と0
0に単位は不要
0という数値にpxやremなどの単位は不要です。sassのmixin機能を使って単位suffixの自動付与をしているきなど意外と見落としてしまうことも。
css
.verbose{
font-size: 0px;
width: 0%;
height: 0rem;
}
.concise{
font-size: 0;
width: 0;
height: 0;
}
小数点前の0は不要
0.5などの小数は.5のように0を省略できます。
ただし0.5と0を付ける記法には可読性が向上するというメリットもあります。とくに複数でコーディングするときには0.5記法を許容しつつbuild時にはminifyして取り除く…など運用の取り決めを作っておくと良い。
css
.verbose{
box-shadow: 2px 2px 0px rgba(0,0,0,0.5);
}
.concise{
box-shadow: 2px 2px 0 rgba(0,0,0,.5);
}
おまけ: その他のハック
border: none;
線を消すとき、ショートハンド記法で border: none;（border-style: none;)とするよりborder: 0;（border-width: 0;)とする方が簡潔です。これはoutlineプロパティでも同じです。Airbnbスタイルガイドではこの書き方が推奨されています5 6。
css
.verbose{
border: none;
outline: none;
}
.concise{
border: 0;
outline: 0;
}
所感
省略できるところは省略して、簡潔で理解しやすいCSSを書いていきたいですね。精進。
1.Don’t Forget About “transition: all”↩
2. CSSプロパティ初期値まとめ↩
3. 10.6.2 Inline replaced elements, block-level replaced elements in normal flow, ‘inline-block’ replaced elements in normal flow and floating replaced elements
↩
4. 10.6.2 置換インライン要素、通常フローにおいて置換ブロックレベルおよび置換インラインブロック要素、置換浮動要素の場合↩
5. Airbnb CSS / Sass Styleguide↩
6. Airbnb CSS / Sass スタイルガイド(日本語訳)↩
