【CSS】プロパティの書く順番

CSS、プロパティの順番を気にして書いてますか？
私は制作会社で働くまで、恥ずかしながら知りませんでした。
なので、過去に作った制作物を見ると、読みにくい上に修正に時間がかかる…
デメリットしかありません。

この記事ではCSSの書く順番について紹介します。

大きいものから小さいものへ

「CSS書き順」でネット検索すると、「視覚順」「アルファベット順」と大きく二つ出てきますね。

私がおすすめするのは「視覚順」です。
プラスで、私が会社で口酸っぱく言われているのは、「大きいものから小さいものへ」「外から内へ」です。

簡単解説

では、「大きいものから小さいものへ」「外から内へ」の具体的なソースを書いてみます。


.selector {
  /*位置*/
　　z-index:10;
　  position:absolute;
    top:0;
  /* レイアウト */
    display: flex;
    justify-content: center;
    align-items: center;
　/*サイズ*/
    width:;
  /* マージンとボーダー */
    margin: 10px;
    padding: 15px;
　  border: 1px solid #ccc;
  /* テキスト*/
　  text-align:center;
    font-family: 'Arial', sans-serif;
    font-size: 16px;
    font-weight: bold;
  /* 色と背景 */
    color: #333;
    background-color: #f0f0f0;
}

上記のソースのように、「大きなものから小さなものへ」の原則に基づいてプロパティを並べると、各スタイルが分かりやすくなります。

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

【メリット】

可読性（読みやすさ）
保守性（維持のしやすさ）

【デメリット】

人によってとらえ方が若干違う
大規模になると、手動で順番を維持するのが大変

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