CSSプロパティの書き順【視覚順だと、管理が簡単な件】

CSSプロパティの書き順について、「こう書きなさい！」というルールはありませんし、
ホームページ制作のコーディングを自分一人が担当する場合は、正直どの順番でも関係ありません。

ですが、『ホームページの修正を依頼されたときに、適当に書いたCSSだった場合』や『複数人でコーディングを行う場合』は、今からご紹介する『CSSプロパティの書き順』は、管理がしやすい為、参考になると思います。

代表的なCSSプロパティの書き順2選

Googleが提唱している『abc順』

単純に、プロパティをa~zの順番に書くため、書き方は統一できるかと思いますが、
例えば、『position: absolute;』『top: 10px;』『left: 10px;』を書いたときに、関連性のあるプロパティが離れる為、パッと見たときに理解しづらいため、次の方法を取り入れています。

参考コード

.header {
  align-items: center;
  background: #f6f3f3;
  display: flex;
  justify-content: space-between;
  left: 0;
  padding: 40px 25px;
  position: fixed;
  top: 0;
  width: 100%;
}

FireFoxでおなじみMozilaさんが提唱している『視覚順』

『要素を表示させるかどうか？→要素をどこに配置させるか？→背景色は？→文字のサイズは？』
と、イメージ的には、大きなくくりから、小さなくくりに向かっていくイメージです。

参考コード

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 40px 25px;
  background: #f6f3f3;
}

チートシート

.〇〇 {
  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 → max /* 区切り線 */
  height min → max
  margin
  margin → top → right → bottom → left /* 区切り線 */
  padding
  padding → top → right → bottom → left
  border-collapse /* 区切り線 */
  border
  border-width
  border-style
  border-color
  border-radius → top-left-radius → top-right-radius → bottom-right-radius → 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
}

まとめ

「細かいところを気にしすぎても、仕方ない！」

正直、cssをどんな順番で書いたとしても、デザイン通りに再現できれば、問題なしです。
それに、ホームページを制作して欲しいお客様が求めているのは、『きれいに書かれたCSSのコード』ではなく、『ホームページから得られる売上』ですよね。

これが、本質だと思います。

ガチガチに、CSSプロパティの書き順に関してのルールを決めずに、ある程度決められたルールの中で揃える。

CSSプロパティの書き順に細かくこだわらずに、本当にお客様が求めている部分に目を向ける。

とはいえ、A型の僕は、整理された書き方ではないと、気が済まないタイプの人間です。