一括指定プロパティ（ショートハンド）

CSSのショートハンドについてです。
何かと便利なものです。
しかし、どのような動きをするのか理解しておかないと予想外のトラブルに悩まされます。

これは何？

いくつかのCSSプロパティをまとめて設定できるプロパティです。
例：bakground border font etc

使い方

普通のプロパティと同じように値を設定します。
設定内容は、ショートハンドごとに異なります。

メリット

少ないコードで一括で設定できますので、コードの見通しが良くなります。
特にサービスのページの場合、保守する際にコードの見通しが良い事は大きなプラスです。
後は、工数削減ですね。（ちりも積もれば）

大事な事

ユーザーが設定しなかった値について、そのプロパティの初期値を上書きします。
継承値も上書きされます。
この事を念頭におかないと予期せぬstyle崩れが発生します。

例

.hoge{
  background-color: red;
  background: url(https://placehold.jp/150x150.png) no-repeat blue;
}
/* この場合、背景色はblueになります */

.huga{
  background-color: red;
  background: url(https://placehold.jp/150x150.png) no-repeat;
}
/* 背景色がredから上書きされます。（色無し） */

ちなみに、帰宅間際に表示崩れ対応で捕まった事がありました。原因はこれでした。
（ショートハンドでstyleを設定したらしいが、他ページで崩れていた）
どういう動きになるかを理解していれば、大変便利なものです。

参考