1. TOP
  2. HTML / CSS Web
  3. プロなら抑えておきたいCSSプロパティの順序

プロなら抑えておきたいCSSプロパティの順序

カテゴリ:
HTML / CSS
Web
| トラックバック(0)
投稿者:yo yo

プロパティの並び順

/* Suggested order:
 * 
 * display
 * list-style
 * position
 * float
 * clear
 * width
 * height
 * margin
 * padding
 * border
 * background
 * color
 * font
 * text-decoration
 * text-align
 * vertical-align
 * white-space
 * other text
 * content
 * CSS 3
 */

基本的にmozilla.org Base Stylesに準拠して書いています。

classes defined in the Markup Guide - http://mozilla.org/contribute/writing/markup

※ ただし、list-styleとclearの位置はいつも適当

何故この順番なのか

  1. 何のdisplay要素であるのか。
  2. 専属のスタイル(リストの場合)があるのか。
  3. 配置に関して(position、float)
  4. 対象の幅など、見た目。
  5. フォントに関する設定
  6. CSS3

何故この順番がいいのかですが、上から順に指定すると、

  • 前のプロパティを設定しなおさなくて良い順であること
  • プロパティの役割ごとに並んでいること
  • 継承を利用せず頻繁に設定するものほど上(独自に追加するときは追記するだけ)ということ

という順番にしています。経験をつんだフロントエンドエンジニアほど、この順番になっていくと思います。メンテもしやすいですし、効率がいいですしね。皆さんも一度プロパティの順序を見直してみてはいかがでしょうか。

« Step01~03:Unityをインストールする、プロジェクトを立ち上げる | ホーム | 検索エンジン対策にハマった俺が見事にハマってしまうま »

トラックバック

http://pulltab.info/mt/mt-tb.cgi/109
ページの先頭に戻る