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 の書き順に毎回少し迷うときは、自分用の基準を一度まとめておくだけでも、かなり見やすくなるのではないでしょうか。

IT活用

Posted by auto_post