意外と知られていないCSSのmargin:0 autoなどの無駄な指定

意外と知られていないCSSのmargin:0 autoなどの無駄な指定

CSSに無駄なプロパティ指定が多い

CSSを記述する際は適用要素のセレクタ、スタイル(書式)を指定するプロパティ、そしてプロパティの値に分かれているがプロパティと値の部分に無駄な指定がされているのをよく見かける。

特に多いのがプロパティには初期値があらかじめ設定されているのに値に初期値を指定していることだ。

もちろん意図的な上書きによる指定はこの限りではない。

margin: 0 autoは無駄

CSSでmargin: 0 autoの指定をよく見かける。これは上下のmarginは0だが左右のmarginはautoで中央揃えするときの指定だが、marginの初期値は上下左右が0なのでmargin: 0 autoではなくmargin: autoで良い。

/* bad */
.foo {
  margin: 0 auto;
}

/* good */
.foo {
  margin: auto;
}

margin - CSS | MDN

これだと上下のmarginもautoになるがmarginの上下のmarginのautoは0になるため問題ない。

If 'margin-top', or 'margin-bottom' are 'auto', their used value is 0.

W3C Visual formatting model details

backgroundにleft topを指定する

backgroundを指定する際にleft topを指定しているサイトをよく見かけるがbackground-positionの初期値は0% 0%つまりleft topになっており、ショートハンドプロパティで使用する際も同じなのでleft top(0% 0%)を指定するのは無駄である。

/* bad */
.foo {
  background: url(s.png) no-repeat left top;
}

/* good */
.foo {
  background: url(s.png) no-repeat;
}

無駄なベンダープレフィックスがある

ベンダープレフィックスとはCSS3で採用される予定の機能が各ブラウザで先行実装されており、それらの機能を動作させるために付けるものだ。

最近のブラウザはベンダープレフィックスなしでも動作するプロパティが多いが、いまだにベンダープレフィックスが付いているサイトを見かける。

このようなサイトはベンダープレフィックスを手動で直書きしている場合が多い。

現在ではベンダープレフィックスはAutoprefixerを使用して対象ブラウザを設定してgulpなどで自動で追加するのが主流となっているので直書きしている場合は作業効率が悪く、付け忘れによる動作不良などのリスクが高いため、Autoprefixerの利用に切り替えたほうが良い。

Autoprefixer

余談だがcompassの@includeを使用したベンダープレフィックスの追加もコードの可読性が悪く、再利用しにくいため使わないほうが良い。

/* bad */
/* 使われていないベンダープレフィックスは付けない */
.foo {
  -webkit-border-radius: 50%;
  border-radius: 50%;
}

/* bad */
/* compassの@includeのベンダープレフィックスは使わない */
.foo {
  @include border-radius(50%);
}

無駄なプロパティの継承を削除する

CSSで親要素と子要素で同じプロパティと値が指定されていることがある。プロパティと値が同じであれば一方の指定だけで良いのでどちらかを削除する。

Chromeのデベロッパーツールで要素をクリックしてStylesタブを開いてInherited from div.fooとなっていて打ち消し線で消されているものはプロパティが重複していて無駄なのでどちらかを削除しておくと良い。

無駄なプロパティの継承を削除する

サイズが書かれたダミー画像を用意する

本番環境ではなくステージングなどのリリース前の環境で作成する際はダミー画像を使用することがあるが以下のような単純にサイズの寸法の書かれたダミー画像を用意してCSSで表示するのは無駄だ。

このような画像はPlacehold.jpなどのダミー画像を生成するサービスを代用すると無駄な画像の書き出しをしなくて済む。

/* bad */
.d1 {
  width: 160px;
  height: 160px;
  background: url(https://iwb.jp/s/img/d160.png);
}

/* good */
.d2 {
  width: 160px;
  height: 160px;
  background: url(https://placehold.jp/160x160.png);
}

Placehold.jp

セレクタにタグ+CSSクラスを指定する

div.foo h2.barのような指定をするとHTML側で<h3 class="bar">のようにタグが変更になった際にCSS側も変更しなくてはならなくなってしまう。

.foo .barのようにタグを省いて記述すればHTML側でタグが変更されてもCSS側を変更する無駄がなくなるためセレクタにタグ+CSSクラスを指定するのは控えたほうが良い。

/* bad */
div.foo h2.bar {
}

/* good */
.foo .bar {
}

非表示・表示にnoneとblockを指定

特定の領域にCSSクラスを追加・削除して表示・非表示を切り替えることがあるが、この際にdisplay:noneとdisplay:blockの両方を指定していることが多い。

:notを使用すればdisplay:noneの指定だけで済むため前述の指定方法は無駄だ。

/* bad */
.content {
  display: none;
}
.content.open {
  display: block;
}
/* good */
.content:not(.open) {
  display: none;
}
カテゴリーcss