以前から、CSS のコーディングに一定のルールを決めて、後々管理し易くしたいと考えている私だが、イマイチ「コレだ」っていうのが思いつかないまま、アルファベット順にプロパティを並べて、一部関係の深いものは前後する程度でかなりテキトウ。
で、今回は 7 種類＋ 1 種類のルールを考えてみた。（考えたのは 7 種類）
- アルファベット順
-
コレは特に何も書く必要は無いでしょう。
プロパティをアルファベット順に記述していくスタイル。
- 辞典系依存
-
コレはアルファベット順に対して、タグ辞典等に載っている順で記述するスタイル。
- プロパティ指向
-
コレは私は一切考えていなかった方法で、akiyan.com で紹介されていたものです。
各プロパティを基準に分割し、グループ化するスタイル。
- カテゴリ指向
-
辞典系依存と近いと思いますが、少し制約を設けます。
記述順序だけではなく、カテゴリ毎に分割、グループ化して記述するスタイル。
- 描画依存
-
レイアウト、色、等の描画上関係が深いもので分類するスタイル。
カテゴリ指向とはかなり近い。
- セレクタ指向
-
コレは各セレクタ毎に分割、グループ化するスタイル。
文脈セレクタで最後に現れるセレクタが同じモノに関するスタイルを一箇所にまとめる。
- 構造依存
-
HTML の構造とリンクした順序で記述していくスタイル。
- オブジェクト指向的
-
同じスタイルは必ず１度しか記述しないというスタイル。
細かく分類して、HTML 上で class を複数付けるなどで完成させる。
場合によってはプロパティ指向的になる。
実際に使うには、id, class の命名規則等、設計段階で工夫しないと相当管理し難いと思われる。複数の同様のスタイルを用意しておいて、HTML 側でどれを使うか選ぶ感じが吉かも。
オブジェクト指向という言葉を使うのは微妙なところですが…
ひとまずこんな感じで、例はまた後ほど追記していきます。
これらは全てが同格ではなく、複数組み合わせて使うと良いと思っていますが、なかなかパッとしないというかなんと言うか。
一般的なのは描画依存じゃないかと思うんですが、カテゴリ指向（＋辞典系依存（＋オブジェクト指向的））にしようかと考えている今日この頃。でもセレクタ指向も良いと思う。要は「戦いは常に無駄なく美しく」的な CSS を書きたいと…。
PS. CSS で装飾してください。 vol. 2.0 考え中。（2.0 て…（笑））
コメントする