CSSプロパティを書く順番とは？アルファベット順と視覚順のメリットデメリットを解説

CSSプロパティを記述するとき、順番をどうすればいいのか悩みますよね。

見やすい順番にしたいけれど、何を基準にすればいいのかよくわからない、という方もいるでしょう。

今回は、CSSプロパティの順番にもう悩みたくない、という方のために、

以上の項目に沿って、解説していきますね。

この記事を読めば、CSSプロパティの順番をどのような基準で決めればいいのか判断できるようになりますよ。

ぜひ最後まで読んでくださいね！

CSSプロパティの記述の順番とは

CSSは、セレクタを指定し、セレクタごとにスタイルを記述していきますね。

同じセレクタを指定した際には、後に書いた内容でスタイルが上書きされます。

セレクタを詳細に書いたときにも、詳細に書いた方のスタイルで上書きされますよね。

このように順番や詳細度でスタイルの優先順位が変わるので、知らず知らずのうちに想定とは異なる指定になることがあります。

対して、セレクト内に書かれたプロパティの順番は、基本的に自由に記述できます。

同じ指定を2回行うというようなことをしない限り、上書きで削除されることはありません。

コンピュータがコードを読み取る際にも、順番で何か不都合が起きるようなことはないですね。

ではなぜ順番を気にするのかというと、今後のサイト管理の作業効率に関わってくるためです。

単独でも、チームの作業であっても、共通のルールがあるのとないのとでは、効率度が大きく異なるはずです。

ここでは、よく耳にする2つの方法を紹介します。

それぞれ見ていきましょう。

アルファベット順について

アルファベット順とは、その名の通り、頭文字をアルファベット順に並べる方法です。

Googleが「Google HTML/CSS Style Guide」の中で推奨している方法でもあります。

アルファベットは世界共通なので、人による違いが生まれない特徴がありますね。

例えば、a要素を例にして以下のように書きます。

a {
  background-color: #aaa;
  border: 3px solid #ccc;
  color: #333;
  display: block;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.6;
  margin: 0 auto;
  max-width: 200px;
  padding: 15px;
  text-align: center;
  text-decoration: none;
  transition: .5s color;
  width: 100%;
}

このようにプロパティの機能とは関係なく、機械的にアルファベット順に並べます。

アルファベット順のメリットデメリット

アルファベット順は、アルファベットという特徴から、誰が書いても同じ順番になり、目的のプロパティを探しやすくなる、というメリットがあります。

それに対して、関連性のあるプロパティが離れており、全体の可読性が低くなるデメリットがあります。

例えば、横幅と高さのwidthとheight、横幅と横幅の最大値であるwidthとmax-widthなどです。

現場でデザイナーやディレクターから指示を受ける場合には、プロパティではなく視覚的な説明で来ることが多いです。

そのため、要素のサイズと余白の指定がバラバラの場所にあることは、作業効率を下げる要因になりえます。

視覚順について

視覚順とは、人間が認識しやすいものを順番に書いていく方法です。

まず、ボックスの構造を記述し、その後に背景や色、フォント、アニメーション、その他など、という順番で指定していきます。

必ずこうするべきという定義があるわけではなく、扱う個人や企業、現場によって様々です。

名称も正式なものはなく、視覚順の他に役割順などと呼ばれていたりしますね。

具体例としては以下のような順番になります。

アルファベット順の解説で使用したa要素のプロパティの順番を変えると以下のようになります。

a {
  display: block;
  width: 100%;
  max-width: 200px;
  line-height: 1.6;
  margin: 0 auto;
  padding: 15px;
  border: 3px solid #ccc;
  color: #333;
  background-color: #aaa;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  transition: .5s color;
}

このように、関連したプロパティ同士が近くにあるような記述方法になります。

視覚順のメリットデメリット

関連するプロパティ同士が近い位置にあるので、デザイン変更の指示が来たときなど、修正する際に該当するものが見つけやすくなります。

複数人のチームで作業している場合、プロパティ名での指示が来ることはあまりありません。

「余白をこのくらい」「文字の位置はこの高さ」というデザイン上での指示が多くなります。

そういうときには、関連したプロパティが近くにある方が修正しやすく、ミスも少なくなります。

ただし、共通のルールがあるわけではないため、個人やチームでバラツキがあります。

チームでルールを決めた場合でも、プロパティの数が多く、完全に覚えるのは難しいでしょう。

個人の感覚で書いていると順番が前後することも多々あります。

このように、確実な共通ルールは作れない、というデメリットがありますね。

まとめ：誰が読むかを意識しよう

今回は、CSSプロパティを記述する順番について紹介してきました。

アルファベット順と視覚順がありますが、どちらもメリットデメリットがあるという話でしたね。

どちらを使うかというのは、何を優先させるかで決めると良いと思います。

人によるバラツキをなくして、一律のルールを用いるか、もしくは、コードの可読性を上げるかということですね。

既に現場内でルールが決まっている場合もあり、ケースバイケースです。

自分の他に誰がこのコードを読むのか、意識することが大切ですね。

ここまで読んでいただき、ありがとうございました。参考になれば幸いです。