R流 CSS Coding Styles

アルファベット順

単純にプロパティをアルファベット順に記述していくスタイル。

• body {
• background-color: #fff;
• border: none;
• color: #333;
• font: 100%/1.3 normal sans-serif;
• margin-bottom: 0;
• margin-top: 0;
• padding: 0;
• text-align: left;
• }

辞典系依存（仕様書依存）

アルファベット順に対して、仕様書や特定のタグ辞典，リファレンス等に載っている順で記述するスタイル。（サンプルは「詳解HTML & XHTML & CSS辞典」依存）

• body {
• color: #333;
• background-color: #fff;
• font: 100%/1.3 normal sans-serif;
• margin-bottom: 0;
• margin-top: 0;
• border: none;
• }

プロパティ指向（仮称）

プロパティを基準に分割し、グループ化するスタイル。

色に関するプロパティだけをまとめて[color(color or theme name)].cssのような形でよく使われていると思われます。

• /* Background
• /* ------------------------------------------------------------ */
• body {background-color: #f9f9f9;}
• .Contents {background-color: #fff;}
• /* Color
• /* ------------------------------------------------------------ */
• body {color: #333;}
• a {color: #369;}

カテゴリ指向（仮称）

辞典系依存＋プロパティ指向（仮称）のようなスタイル。

プロパティの記述順序だけではなく、カテゴリ毎に分割、グループ化する。

サンプルは仕様書のカテゴリに合わせてあります。

• /* Box model
• /* ------------------------------------------------------------ */
• body {margin: 0;}
• .Contents {margin: 0 auto;}
• body {padding: 0;}
• body {border: none;}
• /* Colors and Backgrounds
• /* ------------------------------------------------------------ */
• .Contents {color: #333;}
• body {background-color: #f9f9f9;}
• .Contents {background-color: #fff;
• /* Fonts
• /* ------------------------------------------------------------ */
• body {font: 100%/1.3 normal sans-serif;}

描画依存

色やレイアウト等の描画上関係が深いもので分類するスタイル。

サンプルは仕様書のカテゴリに合わせています。

• /* Box model
• /* ------------------------------------------------------------ */
• body {
• margin: 0;
• padding: 0;
• border: none;
• }
• .Contents {margin: 0 auto;}
• /* Colors and Backgrounds
• /* ------------------------------------------------------------ */
• body {background-color: #f9f9f9;}
• .Contents {
• color: #333;
• background-color: #fff;
• }
• /* Fonts
• /* ------------------------------------------------------------ */
• body {font: 100%/1.3 normal sans-serif;}

セレクタ指向（仮称）

セレクタ毎に分割、グループ化するスタイル。

文脈セレクタで最後に現れるセレクタが同じものに関するものを一箇所にまとめる。

• /* Anchors
• /* ------------------------------------------------------------ */
• a {color: #36c;}
• .Contents a {padding: auto .5em;}
• .Navigations a {color: #fff; font-weight: bold;}
• /* Paragraphs
• /* ------------------------------------------------------------ */
• p {margin: 0; padding: 0;}
• .Contents p {margin: .5em 0; text-indent: 1em;}

構造依存

HTMLの構造とリンクした順序で記述していくスタイル。

• body {...}
• #shortcutNavigation {...}
• .Contents {...}
• #pageHeader {...}
• #pageHeader .Logo {...}
• #pageHeader .Logo a {...}
• #pageContents {...}
• #pageFooter {...}

オブジェクト指向的

細かく分類して、HTML上でclassを複数付けるなどで完成させるスタイル。

場合によってはプロパティ指向（仮称）的になると思われる。

実際に使うには、id, classの命名規則等、設計段階で工夫しないと管理し難いと思われる。ある程度細かく分割して、HTML側でどれを使うか選ぶ感じがベターかも。

オブジェクト指向という言葉を使うのは微妙ですが。

HTML

• <div class="Contents">
• <div id="pageHeader" class="Header">
• <div class="Logo HeaderContent"></div>
• <div class="Navigations HeaderContent">
• <ul id="commonNavigation" class="Navigation">...</ul>
• <div class="Description Navigation">
• </div>
• </div>
• <div id="pageContents">
• <div id="recents" class="MainContents Content">
• <div class="Content">...</div>
• <div class="Content">...</div>
• </div>
• <div id="browseNavigation" class="Navigations Content">
• <div class="Sections Navigation Content">...</div>
• <div class="Tags Navigation Content">...</div>
• </div>
• </div>
• <div id="pageFooter" class="Footer">
• <div class="FooterContent">
• <div id="searchNavigation" class="Navigations Content">
• <div class="Search Navigation Content">...</div>
• <div class="Archives Navigation Content">...</div>
• </div>
• <div class="Author Content">...</div>
• <div class="Elsewhere Content">...</div>
• </div>
• <div class="Description FooterContent">
• <p id="copyright">...</p>
• <p id="poweredby">...</p>
• </div>
• </div>
• </div>

CSS

• .Navigations {
• float: right;
• padding: 0 2em 2em 0;
• width: 26em;
• }
• #pageHeader .Navigations {
• background: #000;
• float: none;
• padding: 0;
• min-width: 74em;
• width: 100%;
• }
• .Description {clear: both;}
• #pageHeader .Description {background: #fff;}
• .SearchResults .MainContents .Description {
• background: #eee;
• border: 1px solid #ccc;
• margin: 1em 0 2em;
• padding: .5em;
• }
• .Description p {margin: 0 auto;}
• #pageHeader .Description p {
• padding: .6em 0;
• text-indent: 2em;
• }

とりあえず、こんな感じです。

これらは各セレクタ毎のプロパティの記述順序だったりセレクタ毎の分割手法だったりと、全てが同格というわけではなく、複数組み合わせて使うとことになると思いますが、なかなか良い組み合わせが見つからないというかなんと言うか...。

一般的なのは描画依存じゃないかと思うんですが、カテゴリ指向（＋オブジェクト指向的）にしようかと考えている今日この頃。でもセレクタ指向も良いと思う。

目標は「戦いは常に無駄なく美しく」的なCSSを書きたい。