CSSを書くときに守るルール（自分用）

概要

僕は自分一人でコーディングが多い（チーム開発多分しない）のですが、先日自分が書いたcssを見て何がなんだかよくわからんかったので、ここらで一回自分なりのルールを決めて振り返ったときにわかりやすくしようと思い、この記事を書き始めました。

てことでルール書いていきます。

id, class名

btnやboxなどは最後に

<input type="text" class="name_textbox">
<button type="button" class="save_btn">

理由

最後を見ればその要素がなんなのかわかりやすくするため

単語の間は「_」で

<input type="text" class="name_textbox">
<button type="button" class="save_btn">

理由

選択時楽だから(「-」だと一括で選択されないエディターがある)

できる限り短いプロパティで書く

margin: 10px 20px 10px 20px;

上、左、下、右の順序

理由

冗長じゃ無くなる

プロパティの指定順を統一する

1.位置情報系(position, top, bottom, left, right, z-index, display, float 等)
2.レイアウト系(overflow, width, height, min-width, min-height, padding, margin 等)
3.文字系(font, line-height, letter-spacing, color, text-align 等)
4.背景・ボーダー(background, border 等)
5.その他(animation, transition 等)

理由

振り返る際に分かりやすい

大まかなコメントを入れる

感覚的な文章ですが、大きなカテゴリごとにコメントを挿入し、振り返るときに分かりやすくする。

終わり

とりあえずこのくらいあげましたが、こここうした方がいいよとか、こういうルールおすすめとかあったらコメントいただきたいです。