CSSのプロパティを書く順番(記述順)

CSS


こんにちは!フォトグラファー&Web制作のじゅんぺい(@junpei_sugiyama)です!

今回は、

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

 

 

といった方に対する記事となります。

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

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

 


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

 

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

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

1つ目は内容

2つ目はアルファベット順

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

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

 

内容順

 

まずは内容順です。

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

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

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

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

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

なので、

① 内容ごとにまとめる

② そのまとめた内容の中でさらに書く順番を決める

となります。

 

内容順の特長

  • メリット:内容ごとに分けられているのでイメージしやすい
  • デメリット:種類分けをする手間が発生する
  • デメリット:人によってバラつきが発生する

 

アルファベット順

 

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

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

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

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

 

アルファベット順の特長

  • メリット:人によってバラつきがなくなる
  • メリット:種類分けをする手間がなくなる
  • デメリット:内容がバラバラになるのでイメージしにくい

 

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

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

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

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

個人的には、

  • googleが推奨
  • 人によってバラつきがない
  • 内容を考える必要がない

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

あとは、

  • align-itemsであれば最初
  • leftであれば真ん中
  • z-indexであれば最後

といった感じで大体の位置が分かるので見つけやすいというメリットもあります。

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

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;

 

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

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