プロパティの指定順序を固定する

|

CSSを記述する際、プロパティの順序を自分なりに決めておくと、二重に指定したりするミスも減り、メンテナンスも楽になります。

私のプロパティの指定順序を紹介します。ワイヤーフレームはidを使い、それ以外にはclassを使うようにしています。ご自分のメンテナンスのしやすい並び順を模索してみてください。

1.ワイヤーフレームに関するプロパティ

CSSコード

div#name {
/* 表示・配置に関する設定 */
   position: ;
   top: ;
   right: ;
   bottom: ;
   left: ;
   z-index: ;
   float: ;
   clear: ;
   text-align: ;
   background: ;

/* 大きさ(ボックス)に関する設定 */
   min-width: ;
   width: ;
   min-height: ;
   height: ;
   max-height: ;
   margin: ;
   padding: ;
   border: ;
}

2.一般的なclass属性

CSSコード

.name {
/* 表示・配置に関する設定 */
   display: ;
   position: ;
   top: ;
   right: ;
   bottom: ;
   left: ;
   z-index: ;
   float: ;
   clear: ;
   overflow: ;
   visibility: ;

/* 大きさ(ボックス)に関する設定 */
   min-width: ;
   width: ;
   max-width: ;
   min-height: ;
   height: ;
   max-height: ;
   vertical-align: ;
   margin: ;
   padding: ;
   border: ;

/* テキスト・背景に関する設定 */
   color: ;
   font-family: ;
   font-style: ;
   font-weight: ;
   font-size: ;
   text-indent: ;
   text-align: ;
   text-decoration: ;
   letter-spacing: ;
   line-height: ;
   background: ;
}

その他の要素特有のプロパティ、例えばul要素の「list-style-type」などは、スタイルの最後に記述するようにしています。

参考サイト

最近のブログ記事