こんにちは。今回は省略してより簡潔に書けるかもしれないCSS記法4例とおまけ1つを紹介します。
サンプルコードでは冗長な記法のクラスを.verbose　{...}、簡潔な記法のクラスを.concise{...}として書いていきます。

省略できる初期値

transition: all;

時間遷移効果を与えるtransition-propertyプロパティの初期値はallなので、transition: allと記述する必要はありません¹。
さらに遷移変化の進行割合を表すtransition-timing-functionプロパティは初期値がeaseなので²、もしeaseに設定する場合はこれも不要になります。

css

.verbose{
  transition: all .3s ease;
}
.concise{
  transition: .3s;
}

margin: 0 auto;

左右中央寄せ目的で書かれることが多いmargin: 0 auto;ですが、そもそもmargin: autoの初期値は0です³ ⁴。そのため以下のように省略可能なことが多い。

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スタイルガイドではこの書き方が推奨されています⁵ ⁶。

css

.verbose{
  border: none;
  outline: none;
}
.concise{
  border: 0;
  outline: 0;
}

所感

省略できるところは省略して、簡潔で理解しやすいCSSを書いていきたいですね。精進。

そのCSS、もっと簡潔に書けるかも