RIAトピックス
リッチクライアント/RIAを主テーマに取り扱います。Flex、Ajax、AIR、Silverlight、JavaFX、etc。
スポンサーサイト
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

CSS記述規則「プロパティ別整理法」の提案
cssは開発をしていくうちに巨大になり、管理しきれなくなっていくものです。
そんなcssに手を入れている今日この頃でしたが、こんな記事を見つけました。

CSS記述規則「プロパティ別整理法」の提案 【akiyan.comより】
http://www.akiyan.com/css_every_propaty_order_system

読んでみるとわかりやすくて拡張しやすく、管理しやすいと感じました。
しかし、記事の執筆は2005年。既に4年も前です。
何故流行らなかったんでしょうか。

やはり、特に障害となるわけでもなく管理しにくい、という一点だけで慣れない形に修正するのは躊躇われたんでしょう。
新しいシステムに使用するにも、最初のうちは利点はほとんどありませんしね。
(実際に記事内にも触れられています)

しかし、革新的な記述の仕方である事は確かなのでこれから整理を行ったりする場合には参考にして行きたいものです。

一般的な書き方の場合↓
/* 全般 */
body {
background-color:#fff;
color:#000;
}

/* ナビゲーション */
div.navigation {
background-color:#fff;
color:#555;
font-size:80%;
}
div.navigation p {
margin:1em 10%;
padding:1ex;
}

/* コンテンツ */
div.contents {
background-color:#e0e0e0;
color:#333;
font-size:100%;
}


プロパティ別整理法に基づいた書き方の場合↓
/* background-color */
body { background-color:#fff }
div.contents { background-color:#e0e0e0 }
div.navigation { background-color:#fff }

/* color */
body { color:#000 }
div.contents { color:#333 }
div.navigation { color:#000 }

/* font-size */
div.contents { font-size:100% }
div.navigation { font-size:80% }

/* margin */
div.navigation p { margin:1em 10% }

/* padding */
div.navigation p { padding:1ex }


CSS記述規則「プロパティ別整理法」の提案 【akiyan.comより】
http://www.akiyan.com/css_every_propaty_order_system

CSS「分散定義」のススメ 【音極道茶室より】
http://www.virtual-pop.com/tearoom/archives/000109.html

K.Y
スポンサーサイト

テーマ:Webサービス - ジャンル:コンピュータ

コメント
この記事へのコメント
コメントを投稿する
URL:
Comment:
Pass:
秘密: 管理者にだけ表示を許可する
 
トラックバック
この記事のトラックバックURL
この記事へのトラックバック
copyright © 2005 RIAトピックス all rights reserved.
Powered by FC2ブログ.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。