CSS

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 等)

http://tsudoi.org/css_rule/こちらの記事から拝借しました。


理由

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


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

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


終わり

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