CSSプロパティはどう並べると見やすい？視覚順で整理した備忘録
はじめに
CSSを書いていると、「このプロパティはどこに書くと見やすいのだろう」と迷うことはないでしょうか。
機能としては同じでも、書く順番がばらついていると、自分で見返したときにも少し読みづらく感じます。
そこで今回は、自分用の整理も兼ねて、CSSプロパティの書き順を視覚順でまとめてみました。
この記事では、次のような内容を整理しています。
- CSSプロパティを視覚順で並べる考え方
- 自分用にまとめた並び順の一覧
- 見返しやすくするために意識した区切り方
今回まとめたこと
今回のメモでは、CSSプロパティを次のような流れで並べています。
- レイアウトに関わるもの
- 位置やサイズに関わるもの
- 余白や枠線、背景に関わるもの
- 文字や見た目に関わるもの
- 最後に操作やアニメーションに関わるもの
厳密な正解があるというより、見たときに「どこに何があるか」を追いやすくするための並びだと考えています。
視覚順で並べる考え方
今回のメモでは、画面にどう影響するかをイメージしながら順番を決めています。
たとえば、まずは display や flex、grid などのレイアウト系を上に置き、そのあとに position、サイズ、余白、境界線、背景、文字といった順で並べています。
このように大きな影響のあるものから順に見えるようにしておくと、後から CSS を読み返したときにも追いやすくなりそうだと感じました。
自分用に整理したCSSプロパティの書き順
以下が今回まとめた並び順です。１行空けて区切りを入れている箇所は、意味のまとまりを意識した部分です。
.〇〇 {
display
flex
grid
justify-content
align-items
order
position
top
right
bottom
left
z-index
transform
overflow
overflow-x
overflow-y
visibility
table-layout
width
min-width
max-width
height
min-height
max-height
margin
margin-top
margin-right
margin-bottom
margin-left
padding
padding-top
padding-right
padding-bottom
padding-left
border-collapse
border
border-width
border-style
border-color
border-radius
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
box-shadow
background
background-color
background-image
background-repeat
background-position
background-size
object-fit
object-position
opacity
color
font
font-weight
font-size
font-family
text-align
text-decoration
white-space
vertical-align
line-height
letter-spacing
columns
list-style
content
pointer-events
cursor
transition
transition-delay
animation
}区切り方で見やすくしたかったこと
今回のメモでは、単に並べるだけでなく、まとまりごとに区切ることも意識しています。
たとえば、レイアウト系、位置系、サイズ系、余白系、背景系、文字系のように区切っておくと、修正したいプロパティを探しやすくなります。
特に margin や padding、border-radius のように関連するプロパティが複数あるものは、近くに置いておいたほうが見やすいと思いました。
このメモの使いどころ
今回の内容は、厳密なルールというより、自分が CSS を書くときの備忘録として使う想定です。
「毎回順番に迷う」「あとから読み返したときに見づらい」と感じるときに、こうした自分なりの並び順があると少し書きやすくなりそうです。
また、プロパティをどの観点でまとめるかを一度決めておくと、今後メモを追加するときも整理しやすくなると思います。
まとめ
今回は、CSSプロパティの書き順を視覚順で整理するための自分用メモを記事の形にまとめました。
今回のポイントをまとめると、次のようになります。
- レイアウトから文字装飾まで、画面への影響をイメージしながら並べると見返しやすい
- 関連するプロパティを近くに置くと、修正箇所を探しやすい
- 厳密な正解よりも、自分が読みやすく保てるルールを決めることが大切そうだと感じた
CSS の書き順に毎回少し迷うときは、自分用の基準を一度まとめておくだけでも、かなり見やすくなるのではないでしょうか。