Single Article

CSSの記述順とグループ化

CSSを作成して長くなってくると、調整しようとするスタイルがどこにあるのか分からなくなってくるのは私だけでしょうか。プロのサイトのCSSを見ると、良くグループ化されて整理されていますが、マネしてもうまくグループにならないのです。ふつうはレイアウトに関わる部分から始める人が多いと思います。そして装飾関連のスタイルを当てていくのだと思います。大体は、DIV#IDによってレイアウト関連の指定をしているケースが多く、

CSS

div#header {…
div#container {…
div#sidebar {…
div#footer {…

みたいな感じでwidthなどのスタイルを入れ、レイアウトを決めてます。問題はその後で、例えば#container内と#sidebar内に”title”というclassがあった場合、これはどこに書くべきなのだろうか。div#container .titleとdiv#sidebar .titleとかに分けて、(同じ記述だったとしても)#containerのグループと#sidebarのグループに分けて記述するのでしょうか。以下は、ある海外サイト(ブログ)のCSSのグループ化の例をCSSのコメントから抜き出したものです。

TEXT

I.  Universal Reset : aタグなどのリセット
II. html and body    : html要素とbody要素
IV. typography   : いわゆる文字スタイルに関する事項
  1. headings
  2. header
  3. sidebar
  4. footer
  5. listings
V. layout       :いわゆるレイアウトに関する事項
VI. navigation    :いわゆるナビゲーション(矢印など)に関する事項
VII.images and gravatars :画像に関する事項
VIII.comments    :コメント(ブログの)に関する事項
IX. forms         :フォームに関する事項

これは「目的別?」にグループ化されている例ですが、これだと、実際には何処に書けば良いのか分からない場合も多いです。次の例です。

TEXT

1. MARGINS, PADDING, ETC., FOR ALL LAYOUT DIVS   :レイアウト関連
2. GENERAL TAGS FOR CONTENT, MOSTLY    :一般タグ指定
3. HEADINGS            :ヘディング・ヘッダー部分
4. COMMENTS STUFF      :コメント部分
5. SIDEBAR STUFF        :サイドバー部分
6. FOOTER STUFF         :フッター部分
7. COMMON MULTI-PURPOSE ELEMENTS :一般的な多目的要素

この例だと、7の一般的な多目的要素に大量に書くことになります(実際そうなっていた)。最後に私がこれかな?と現在思っている分類です。かなり細かいですが。

TEXT

1.Universal Reset
2.Layout blocks  :ブロックのレイアウト
3.Blocks inside  :ブロック毎の指定
  3-1. Header    :ヘッダー部分
  3-2. Menu     :メニューバー
  3-3. Sidebar    :サイドバー
  3-4. Footer    :フッター
  3-5. Comments  :コメント(フォーム含む)
  3-6. Contents  :記事関係
    3-6-1. Title    :記事タイトル関係
    3-6-2. Meta    :記事の日付などの表示
    3-6-3. Article   :記事本文関係
    3-6-4. Nav     :ナビゲーション関係
4. Page specific : 表示ページで特有
5. Browser specific :ブラウザー毎に特有

2で各ブロック(3の分類による)のレイアウトを決定しているが、レイアウトに関係のないものは全て排除し、3の各ブロック毎の記述に入れる。

3では徹底的にID(#sidebarなど)によるグループ化、その中の細かい設定はそのID(ブロック)内に。

4ではブログで例えればアーカイブページのみの設定など、デフォルトの設定を上書きする形で指定。

5のブラウザー毎の設定は実際には別ファイルを読み込ませるようになっている。hackなども使用。

実際にはこれでも例えば3-6-3Article(記事本文に関する記述)の部分に大量のスタイルが集中してますが、目的のスタイルが何処に記述されているか、大体の検討が付きます。

書き始めるときにルールを作成し、目次を作ってそのグループ内に記述することを心がければ、後の微調整の時に大分やりやすくなるはず。

Related Posts

Trackback URL

2 Trackbacks/Pingbacks

  1. と、良くグループ化されて整理されていますが、マネしてもうまくグループにならないのです。ふつうはレイアウトに関わる部分から始める人が多いと思いま す。 CSSの記述順とグループ化 | Tech de Go

  2. [...] Bookmark.push(’entry-4193157′) CSSの記述順とグループ化 | Tech de Go http://www.techdego.com 一般   Class CSS HTML sidebar vi 15 users 2007年03月12日 [...]

Post a Comment

Your email is never published nor shared.