「CSSプロパティ」書く順番

従来の問題点

適当に設定していたため、確認に手間取る

きっかけ

「box-sizing: border-box;」指定しても「margin」は対象外

従来
「margin」「padding」をセットで考えていた

昨日、気が付いたこと
・「margin」は、「width」「height」よりも上位レイヤー
・少なくともレイアウトにとっては

「レイアウトベース」で記述していく

レイアウトに影響を及ぼす内容から順番に記載していく

完璧さを求めない
・どうせ覚えられないので、主要なもののみ順番ルールを設定
・具体的には、下記7種類のみ

特徴
・「margin」を「padding」から分離
・「margin」を「width」「height」より先に記述

ルール


※Googleコーディング規約では、アルファベット順

設定例

2017/1/15

#brother{

  position:relative;

  top:0;

  left:0;

  margin: 20px;

  width:800px;

  height:600px;

  background-color:#4CAF50;

  color:white;

  font-size:2em;

  font-weight:bold:

}