Web制作 CSS

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

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

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

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

今だけ!5大無料特典あり🎁

コーディングの時給アップにはこちら!


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

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

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

  1. 内容順
  2. アルファベット順

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

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

 

内容順

まずは内容順です。

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

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

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

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

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

なので、

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

となります。

内容順の特長

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

 

アルファベット順

そしてもう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;

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

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

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

それについては以下の記事を参照して下さい。

参考記事
【VSCode】CSScombの使い方とCSSプロパティをアルファベット順に並べる方法も解説
【VSCode】CSScombの使い方とCSSプロパティをアルファベット順に並べる方法も解説

続きを見る

 

コーディングの時給と作業効率を上げる!
2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。
  • コピペで使えるWordPressの各テンプレート
  • 実務でよく使う見出し一覧
  • 実務でよく使うテキストのhoverアニメーション
  • 実務でよく使うボタン内の矢印9種類
  • Contact Form 7の色々・・・
などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短=時給アップに繋がります。
さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。
レビューは390件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

今だけ!5大無料特典あり🎁

販売ページとレビューを見てみる


ブログランキング・にほんブログ村へ
  • この記事を書いた人

じゅんぺい

タイ・バンコク在住のWeb制作フリーランス兼ブロガー▶︎37歳からWeb制作を開始▶︎コーディングとWordPressのオリジナルテーマ制作でこれまで80件以上納品▶︎Web制作中心の当ブログは月間最高8.4万PV▶︎Twitterのフォロワーは6100人▶︎コーディングとWordPressのコンテンツを販売し、3日で500部突破&250万円&人気1位獲得 → 累計700部&420万円突破

-Web制作, CSS