ProfessionalCSS逆引きCSS序章

[tag:ProCSS逆引きCSS]

ProfessionalCSSとは2006年10月30日にベータ版がリリースされ、
2006年10月31日に正式リリースされたGeeklog Japaneses推奨テーマです。
Phize氏が制作し多くのテーマが開発されました。

ProfessionalCSSの詳細についてはGeeklog Wiki　ThemeProfessionalCSS
もしくはテーマファイルProfessionalCSSに同梱されているＲＥＡＤＭＥを参照。

ProfessionalCSS逆引きCSS（以後ProCSS逆引きCSS）とはテーマを作成する際に
「こうしたい時はどこを見ればいい」の疑問を簡単に解決するものです。

ここでは私がProfessionalCSSを使ってテーマを制作する際の注意点を書いております。

１）CSSの組み込む順番
ProfessionalCSSは複数のCSSファイルをstyle.cssに集約し表示する。

 基本スタイルシート
css/default.css---------　デフォルトスタイル
css/common.css------　共通スタイル
css/layout.css----------　基本レイアウトスタイル
css/block.css-----------　ブロックスタイル
css/option.css----------　オプションメニュースタイル
css/form.css------------　フォームスタイル
css/story.css------------　記事スタイル

css/article/article.css--------------------　個別記事ページスタイル
css/comment/comment.css-----------　コメントスタイル
css/navbar/navbar.css------------------　ナビゲーションスタイル
css/preferences/preferences.css----　設定ページスタイル
css/search/search.css------------------　検索ページスタイル
css/stats/stats.css------------------------　アクセス情報ページスタイル
css/submit/submit.css------------------　投稿ページスタイル
css/trackback/trackback.css-----------　トラックバックスタイル
css/users/users.css---------------------　アカウント情報ページスタイル

管理者ページスタイルシート
css/admin.css------------------　インポート用スタイルシート(管理者ページ)

プラグインスタイルシート
css/plugin.css------------------　インポート用スタイルシート(プラグイン) */

 Professional互換スタイルシート
css/compatible.css

custom.css-----------------------　カスタムテーマスタイルシート

このうちテーマを制作する際、主に使用しcustom.cssに書き込むCSSファイルの順番は
１．css/default.css ------------------ サイト全体の基本スタイルを設定。
２．css/layout.css ------------------- サイトレイアウトデザインを設定。
３．css/block.css -------------------- レイアウトデザインに則り各ブロックデザインを設定。
４．css/form.css --------------------- （検索ブロックが含まれてるのでblock.cssと同時設定）
５．css/story.css --------------------- 記事まわりの設定をする。

上記の順番の理由の一つとして
layout.cssで指定するmarginとpaddingを先に設定しとかないと
block.cssで指定するmarginとpaddingとのバランスが取り難くなる。
同様にblock.cssで指定するmarginとpaddingを先に指定しとかないと
story.cssで指定するmarginとpaddingとのバランスが取り難くなる。

基本的にcustom.cssに書き込むCSSの順番は大枠外側からと考えればよい。

２）プロパティ記述順序
賛否両論がありますがCSSコーディングで行き詰った際に解決する事が多かったので
記述順番はできるだけこの序列を推奨します。

 *display
 *visibility
 *overflow
 *list-style
 *position
 *float
 *clear
 *top right bottom left
 *width
 *height
 *margin
 *padding
 *border
 *background
   color
   image
   repeat
   position
   attachement
 *color
 *font
   style
   variant
   weight
   size
   line-height
   family
 *text-decoration
 *text-align
 *vertical-align
 *white-space
 *other text
 *quotes
 *content

備考：ProfessionalCSS　Ver.1.01(2008-09-15)を元に記述しております。