これは何
- CSSでは同じUIを表現するにしてもたくさんの書き方があります
- 最終的な見た目は同じになるとしても、プロパティや値の意味が不自然なものを選ぶと後から困りがち……
- 自然な書き方の例をいくつかまとめた記事です
中央揃え
何かの要素を左右中央に揃えたいとき、text-align: center;でもdisplay: flex; justify-content: center;でも、どちらでも同じ見た目になる場合が多いです。
しかしtext-alignはあくまで文章の行揃えに関するプロパティ。
そもそもがレイアウトをするために存在するプロパティではありません。
なんとなくでtext-alignを使っていると、子要素にブロック要素を配置したときに上手く中央揃えにならなくて困っている……なんて人もときどき見かけます。
横並び
2021年現在、恐らく横並びを実現するのにfloatを使っている人は多くないと思いますが、display: inline-block;を手癖で書いているであろう人はたまに見かけます。
floatはあくまで後続を回り込ませるためのプロパティ。
display: inline-block;は、あくまで要素の幅ピッタリになるだけで横並びにさせる意図はない。
などなどからdisplay: flex;を使うのが良いでしょう。
横1列ではなく、縦にもレイアウトしたいならdisplay: grid;も便利です。
marginとpadding
どちらも和訳すると「余白」になってしまいがちで、混同している人も多い気がします。
marginは「外側の余白」でpaddingは「内側の余白」と考えてください。
2つのボタンが横並びで存在するとして、ボタン同士の余白は外側の余白なのでmarginでとる。
対してボタンの背景色とテキストの距離は内側の余白なのでpaddingでとる。
もちろんマークアップの内容によって変わってくるのですが、自分が関心を寄せている対象の外側に距離をとりたいのか、内側に距離をとりたいのかを考えてください。
全てをmarginでとると相殺が大量に発生して計算が難しくなり、逆に全てをpaddingでとるとマークアップのネストが深くなりすぎます。
マジックナンバーを使わない
CSSに限った話ではありませんね。
文章とアイコンの位置を揃えたいとか、ドロップダウンメニューの表示位置を調整したいとかでmargin-top: -14.4px;のような記載になっているのをときどき目にします。
どこから出てきたのか分からない値が入っていると、レビュワーも困りますし、後から変更したいときも大変ですよね。
例えば1文字分ずらしたいならmargin-top: -1em;と書いた方が意図を伝えやすいはず。
また、目視で指定するのではなくちゃんと計算して、式もコメントか何かで書いておきましょう。
/* font-size: 16px * line-height: 1.8 / 2 = 14.4 */とでも書いてあれば後から見ても一目瞭然です。
更に言えばSass VariablesやCSS Custom Propertiesがちゃんと設定されていればmargin-top: calc($font-size * $line-height / 2)のようにコメントを書かずとも内容が分かります。
z-indexの数値
@tokumituさんから質問をいただいたので記載します。
コメントありがとうございます 
z-indexはいくつか流派があるような気がしますが、私の場合は「数値の大小で重なり順を制御せず、0と1をboolとして扱う」ようにしています。
どういうことかというと、仮にz-index: 9999;が指定された要素があったとしても、親要素の指定やtransform指定などによっては1番上に配置されないのです。
逆にz-indexを指定せずともコードとして後の行に書かれた要素であれば上に配置されます。
そのため、モーダルウィンドウなどをJavaScriptから追加/削除する場合などでも、マークアップの最後に追加すれば割と勝手に1番手前に要素が描画されます。
できるだけマークアップ側で要素の重なりを制御することで、z-indexは0か1だけのboolのようなつもりで扱える……という寸法。
CSSをトレースして重なり順をシミュレートするのは大変なので、私はよくこのような手法をとります。
こういう場面で迷った、があったら
コメント頂けたらこの記事に追記するかもしれません。
全てにお答えできる保証はありませんが、もし疑問があればお気軽にどうぞ。