CSSのショートハンドは常に使用すべきか

更新

結論から

私の意見は以下の通りです。

可読性や保守性を重視するならばショートハンドはなるべく使用しない

ショートハンドとは

CSSのショートハンドとはCSSプロパティの一括指定のことです。

ショートハンドを使用すると関連する複数のプロパティをひとつにまとめることができます。以下はmarginの例です。

まずこちらはロングハンド指定です。ロングハンド指定ではmargin-xプロパティを個別に指定します。

/* ロングハンド指定 */
margin-top: 20px;
margin-right: 20px;
margin-bottom: 20px;
margin-left: 20px;

対して、こちらがショートハンド指定です。margin-xプロパティはmarginプロパティに集約して指定可能です。その場合、コロンのあとに半角スペース区切りでmargin-top、margin-right、margin-bottom、margin-leftの各値を入力します。

/* ショートハンド指定 */
margin: 20px 20px 20px 20px;

今回の例では各プロパティの値が同じです。この場合、以下のようにさらに短縮して表記できます。

/* 各プロパティの値が同じ場合、以下のようにさらに短縮できる */
margin: 20px;

ショートハンドを使用することで、CSSをより短く記述できます。そのため、「ショートハンドを積極的に使っていきましょう！」という意見を巷でよく聞きます。

確かにショートハンドはCSSの記述を簡略化できるため便利です。しかし、私は記述の簡略化以外の面から見ると常にショートハンドを使用することが必ずしも正しいとは言えないのではと考えています。以下でその理由を説明します。

ショートハンドをあまり推奨できない理由

以下の3つです。

  1. ショートハンドは以前に設定した値を上書きする
  2. 可読性の悪さ
  3. 保守性の低下

ショートハンドは以前に設定した値を上書きする

1つ目の理由はショートハンドが以前個別に設定した値を上書きしてしまうからです。MDNから例を引用します。

background-color: red;
background: url(images/bg.gif) no-repeat left top;

この例では、background-color: red;のあとにbackgroundのショートハンドが続いています。backgroundにはbackground-colorの値は指定されていません。この場合、このショートハンドに含まれるbackground-colorの値は初期値であるtransparentになります。そのため、この例ではbackground-color: red;の値がbackground-color: transparent;に上書きされることとなります。

このように、ショートハンドの指定は初期値による予期せぬ値の上書きを引き起こしてしまうことがあります。もっとも、stylelintでショートハンドによる値の上書きを禁止すればこういった「事故」は防げます。

可読性の悪さ

2つ目の理由はショートハンドの可読性の悪さです。marginはまだわかりやすい方でしょう。

ではfontを一括指定した場合はどうでしょうか？こちらもMDNからの引用です。まずは個別指定した場合。

font-style: italic;
font-weight: bold;
font-size: 0.8em;
line-height: 1.2;
font-family: Arial, sans-serif;

続いてショートハンドを使用した場合。

font:
  italic bold 0.8em/1.2 Arial,
  sans-serif;

個別指定した場合と比べてショートハンドは明らかに読みづらいです。少なくとも私はそう思います。特にfont-sizeとline-heightのところはline-heightを単位付きで指定した場合かなりややこしいのではないでしょうか。

このように、ショートハンドはコードの可読性の低下を招きます。微々たるものかもしれませんが、「これってどのプロパティの値だっけ？」と少しでも悩むならショートハンドをやめて個別指定した方がよいと思います。

保守性の低下

3つ目の理由はショートハンドの使用による保守性の低下です。以下のようにショートハンドでmarginを指定したとします。

margin: 20px;

その後、margin-topの値を10pxに変更する必要が生じたとします。この場合、上記を以下のように書き換えます。

margin: 10xp 20px 20px;

その後、さらにmargin-rightの値を30pxに変更する必要が生じたとします。この場合、上記をさらに以下のように書き換えます。

margin: 10xp 30px 20px 20px;

結局、4つの値に分解することとなってしまいました。このように、ショートハンドで指定されたプロパティの保守性はあまりよいとは言えません。これなら最初から個別指定しておいた方がマシだと思います。

/*最初からこうしておいた方が見やすいし、修正しやすい*/
margin-top: 20px;
margin-right: 20px;
margin-bottom: 20px;
margin-left: 20px;

修正するのが自分自身ならまだよいかもしれません。一方で、修正するのがあまりCSSに詳しくない自分以外の人である可能性もあるわけです。あまりスキルの高くない人がコードを読む、または修正することを考えると、ショートハンドをバンバン使ってコードを書くのは得策ではないでしょう。

結局どうすればよいのか

以上の理由から、私はショートハンドで記述するのが必ずしも正しいとは考えていません。今のところ私がショートハンドを使用するのはborderのような常にセットで扱われるプロパティを記述するときだけです。

つまり、ショートハンドをほとんど使用していません。ショートハンドを使用しないことでCSSの記述量は増え多少冗長になってしまいますが、それによって保守性や可読性を確保できるのなら安いものかなと考えています。

もちろん、これは保守性や可読性を重視した場合の考え方であって、例えばチームの全員がショートハンドを熟知しているとかいう場合だったら積極的にショートハンドを使用してもよいと思います。

可読性や保守性を重視するならばショートハンドはなるべく使用しない

ということで、記事のタイトル「CSSのショートハンドは常に使用すべきか」に対する私の回答は以下の通りです。

可読性や保守性を重視するならばショートハンドはなるべく使用しない