CSSの書く順番

• 文字サイズを縮小
• 文字サイズを拡大
• 元の文字サイズに戻す

1. スタッフブログ
2. 業界ブログ
3. 業界ポッド？

CSSを記述するとき、どんな順番で書いていますか？

例えばこんなCSSを書くときがあったとして
＝＝＝＝＝＝＝＝＝＝
.sample {
  color: #000000;
  float: left;
  backgroung-color: #FFFFFF;
  width: 300px;
  height:200px;
  display: block;
  font-weight: bold;
  margin: 0px;
  list-style: none;
  padding: 10px;
  clear: both;
  text-align: left;
}
＝＝＝＝＝＝＝＝＝＝

ひとつひとつ、何を指定しているかはわかるんですけど、今いちどんな状態なのかわかりにくいですよね？
というわけでは、私は大体こういう感じで記述するようにしています。

＝＝＝＝＝＝＝＝＝＝
.sample {
  /* 表示関連 */
  clear: both;
  display: block;
  float: left;
  list-style: none;
 
  /* ボックスモデル関連 */
  width: 300px;
  height:200px;
  margin: 0px;
  padding: 10px;
  backgroung-color: #FFFFFF;
 
  /* テキスト関連 */
  text-align: left;
  font-weight: bold;
  color: #000000;
}
＝＝＝＝＝＝＝＝＝＝

(コメントの部分は実際には書いていません。説明用に付け足しています。)

ブラウザがHTMLとCSSを描画するとき、先に書いておくといいだろうなと思われるものから書いているつもりです。(あまり厳密ではないので、あくまで目安です。)なので、「どんな風に表示するの？」という表示関連の記述が先で、続いて「どんな大きさなの？」というボックスモデルの記述がきて、最後に「中身はどんなテキストが書かれるの？」というテキスト関連で締めます。

CSSの記述には特に順番の指定はないそうなのですが、このように書き方を統一することで、自分がCSSを手直しするときはもちろん、ほかの開発者がCSSを見たとき、理解しやすいかと思います。
大規模サイトを複数人数で構築するときとか、こういうルール作りは必須ですよね。