どうも7noteです。ショートハンドの書き方と使い分け方について書いていきます。

cssにはショートハンドで書けるプロパティがいくつかありますが、どのタイミングでいつショートハンドで書くべきなのか迷うことがあると思います。特にmarginやpaddingなんかはショートハンドで書くことが多いですがきちんと使い分けができていないと、何かあった時に無駄な時間を過ごしてしまう可能性があります。
今回はショートハンドの書き方とロングハンド?と言っていいのか怪しいですが、margin-rightなどの個別の指定方法の使い分け方について書いていきます。

ショートハンドの書き方

ショートハンドで書けるプロパティは以下の12種類です。

padding / margin / border-radius / box-shadow / border / background / font / list-style / animation / transition / flex-flow（親要素） / flex（子要素）

実際にショートハンドと個別指定の書き方の違いを見てみましょう。

* { 
    /* margin ショートハンドの書き方 */
    margin: 10px; /* 上下左右 */
    margin: 10px 5px; /* 上下 左右 */
    margin: 10px 5px 20px; /* 上 左右 下 */
    margin: 10px 5px 20px 30px; /* 上 右 下 左 */

    /* margin 個別の書き方 */
    margin-top: 10px; /* 上だけ */
    margin-right: 10px; /* 右だけ */
    margin-bottom: 10px; /* 下だけ */
    margin-left: 10px; /* 左だけ */
}

* {

    /* padding ショートハンドの書き方 */
    padding: 10px; /* 上下左右 */
    padding: 10px 5px; /* 上下 左右 */
    padding: 10px 5px 20px; /* 上 左右 下 */
    padding: 10px 5px 20px 30px; /* 上 右 下 左 */

    /* padding 個別の書き方 */
    padding-top: 10px; /* 上だけ */
    padding-right: 10px; /* 右だけ */
    padding-bottom: 10px; /* 下だけ */
    padding-left: 10px; /* 左だけ */

}

他のcssプロパティのショートハンドの書き方については詳しいく書かれた記事があったので紹介します。↓
https://webliker.info/css-short-hand/

ショートハンドで書くメリットとしてはソースが短くかけるので、綺麗で軽いソースになります。

ショートハンドかロングハンドのどちらを使うべきか

ここからは私の考察として書きますが、marginやpaddingなどは基本ショートハンドで書くのがいいと思います。もしくは各種ブラウザのデフォルトスタイルの書き方に合わせて使い分けるのがベストかなと考えます。

理由としてはソースは短い方がいいですし、ブラウザのCSSを上書きするように書くのが基本と考えるからですかね。

その考えに基づいて、私は以下のように書き分けています。

基本的にショートハンドで書くもの

padding / margin / border-radius / box-shadow / border / background / transition

基本的に個別指定で書くもの

font / list-style / animation / flex-flow（親要素） / flex（子要素）

各ブラウザのデフォルトスタイルの書き方を見ると、paddingやmarginはショートハンドで書かれています。また逆にfontはfont-weightやsont-sizeなど個別で指定されています。

marginやpaddingの例

項目がいくつか並んでいる時、「最後の一個の下向きのmarginは無くす」みたいなcssを書く場面が出てきます。そんな時は下のように書くといいでしょう。

ul li {
    margin: 0 0 20px;
}

/* 最後の一個だけ下のmarginを無くす */
ul li:last-child {
    margin-bottom: 0;
}

「あれ、上と下でショートハンドかそうじゃないか書き分けるの？」と思った方もいるかもしれません。この書き方がいい理由ですが、今後もしレイアウト調整が必要になり、「ul li」に対して左右にもmarginの値、たとえば20pxを入れなければならないとなったと考えましょう。
もし「ul li:last-child」にmargin: 0;と書いていたらどうなるでしょうか？
「ul li」には左右のmargin20pxがはいるはずなのに、最後の1個だけは左右に対しても「ul li:last-child」のmargin: 0;の値が効いてしまうので、最後の一個だけは左右のmarginがとれずレイアウトが崩れてしまいます。

これを防ぐために、予め指定するときに、「ul li:last-child」にはmargin-bottom: 0;という書き方をして、下方向のみ打ち消すことができるように書きました。

考え方についての補足ですが、どっちで書くか迷った時にはこう考えるようにしています。
marginなどをショートハンドで書く時は、「この要素には下向きに?pxの余白を取ろう」と考えています。
逆に個別指定する時は「この要素の下にだけ?pxの余白を取ろう」と考えています。
上で書いていた例でも、「最後の一個の下のmarginだけ無効化したい」という考え方をもとに、基本は下に20pxのmarginをとりつつ、最後の一個だけmargin-bottom: 0;と書くことで最後の一個の下のmarginだけを無効にできる書き方を行いました。