CSSのプロパティを書く順番（記述順）は大きく分けて2種類

CSSのプロパティってどういう順番で書くのがいいんだろう？

結論から言えば人によって様々ですが、少なくともみんな自分の中でルールは設けていると思います。

なのでどういったルールがあるのか書いていきたいと思います。

完全無料のプログラミングスクール『ZeroPlus Gate』

30日間でWeb制作を学べる無料のプログラミングスクールがこちら

• 30日間でWeb制作を学べる
• 完全無料
• 現役エンジニアへの質問無制限
• オンラインの動画学習なので時間場所を問わず勉強可能
• 最大4回の学習サポート面談
• 受付は1日25名までの先着制

無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。

いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。

現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇

＼ 完全無料 ／

ZeroPlus Gate公式サイト

先着1日25名まで！

CSSのプロパティを書く順番は大きく分けて2種類

Progateを始めたばかりの頃やサイトの模写を始めたばかりの頃はあまり考えてなかったかも知れませんが『CSSのプロパティは書く順番を意識した方がいいのではないか？』感じるようになってくると思います。

そして記述順には大きく分けて2種類あります。

どちらが正しいという事はないのでどちらを採用するかは個人の判断か、もしくはチームでやる場合はチームで決められたルールに則ってやる形になります。

それではそれぞれの特長について解説したいと思います。

内容順

まずは内容順です。

コードを書き始めた時、まず幅であるwidthを書いて次に高さであるheightを書いたことがあるかと思います。

またpositionであれば『top』『right』『bottom』『left』と書くと思います。

このように『幅と高さ』だったり、1つのプロパティで複数の項目がある場合などはそれをひとまとめにして書くと分かりやすいですね。

あとはフォント系、背景であるbackground系、アニメーション系など種類ごとに分けます。

そしてその種類をどの順番で書いていくか決める感じです。

なので、

となります。

アルファベット順

そしてもう1つがアルファベット順です。

これは説明するまでもないのですが、私はこっちを採用しています。

理由の1つとしては、googleが推奨しているからです。

その他の特長としては以下になります。

チームでやるときに内容順だと人によってバラつきが発生する可能性があるので、アルファベット順の方がいいと思います。

デメリットとしてはposition: absolute;など使ったとき『top』『right』『bottom』『left』がそれぞれバラバラの配置になるので、ちょっと分かりにくくなります。

最初はwidthとheightが離れている事など気になると思いますが、そのうち慣れます。

最大のメリットは内容や種類など考える必要がない事だと思います。

個人的には、

という理由から、多少イメージがしにくくてもアルファベット順で書く方がメリットが大きいと思っています。

あとは、

といった感じで大体の位置が分かるので、探してるプロパティが見つけやすいというメリットもあります。

例えばアルファベット順だとこのような感じになります（あえて色々入れてみました）

align-items: center;
bottom: 0;
color: #fff;
display: flex;
font-family: "メイリオ";
font-size: 4rem;
font-weight: bold;
height: auto;
left: 0;
margin: 0;
position: absolute;
right: 0;
top: 144px;
width: 100px;
z-index: 10;

まとめ

今回はCSSのプロパティを書く順番について解説しました。

最初の頃はアルファベットの歌が常に頭に流れていましたが、もう慣れたのでそんなこともなくなりました。

今までルールを決めていなかった人も、自分に合ったやり方でいいのでルールを決めて書くと綺麗なコードになると思います。

また自動でアルファベット順にソートする事も出来ます。

CSSプロパティをアルファベット順に並べる方法については以下の記事を参照下さい。

以上になります。

この記事が役に立ったと思ったら、シェアボタンからX（旧Twitter）などにシェアすると、いいねされてフォロワーが増えたりすることがあるよ！