CSSの書き方諸々
ここでは、CSSの基本が分かった上で、どのような書き方のスタイルがあるのか、それぞれのメリット、デメリットを挙げて説明していきます。
一つの規則集合は、1行に？それとも複数行？
1行で書くやり方は、以下のようになります。
h2{ padding-left: 5%;}
div.loud{ margin: 2% 1%; border-width: 0 1px 1px; border-style: solid; border-color: #999;}
複数行で書く場合は、例えば以下のようになります。
div#main {
color: #000;
background-color: transparent;
border-style: ridge;
border-width: 0 0 0 10px;
border-color: #666;
}
前者ではウィンドウに多くの声明が収まりますが、一つのセレクタに対して大きな宣言ブロックを当てるようになると、探しているプロパティが見つけづらくなり、収拾が着かなくなります。
対して後者では、セレクタ文字列、各プロパティがそれぞれ1行に一つずつ収まっていますので、セレクタとプロパティの関係を簡単に追いかけることが出来ます。しかし、より多くのスクロールが必要になってきます。
短いスタイルシートなら前者でも良いでしょうが、凝り始めると何かと面倒が多いですので、後者をお薦めします。自分で面倒が見切れるというのであれば、前者の書き方を否定するものではありません。
しかし、混在は避けるべきです。
{}(中カッコ)はどこに置く？
いろいろな人がいます。
セレクタの直後に置く人、
span.sub {
：
}
h2, h3{
：
}
次の行の行頭に置く人、
#topbar
{
：
}
次の行のインデント後に置いて、プロパティと揃える人。
body
{
：
}
少しでもプログラミングをしたことがある人なら、最後の方法は絶対に避けるでしょう。実際に、避けたほうが無難です。将来、複雑な入れ子をするような仕様になってきた時に、対処しきれなくなります。
前者2つは、どちらを選んでも良いでしょう。セレクタ文字列の後の空白も、任意です。プログラマなら、空白は必ず付けるでしょう。長所・短所を言うなら、1つ目の例ではスクロールを抑えますが、一方、探している声明が2つ目よりほんの少し見つけにくいです。
しかしながら、各声明が分かりにくくなることは、インデントによって容易に避けられますので、1つ目の書き方をお薦めします。
インデントはどうする？
声明の視覚的な差別化を図る為には、インデントはしたほうがよいでしょう。
テキストエディタの中には、タブ文字でインデントする文字数を変更できるタイプのものがあります。そういったテキストエディタをお持ちの方には、迷わずタブでのインデントをお薦めします。
変更できないタイプのテキストエディタは、一般に8文字分のインデントになると思います。これではさすがに大きいですので、半角スペースによるインデントになると思います。
半角スペースを1文字、2文字、4文字置いてインデントします。個数については、それぞれの相性があると思いますので、いろいろ試してみると良いでしょう。
個人的には、2文字のインデントを薦めます。見づらくなる可能性が少なく、ファイルが無駄に大きくなることもありませんので。
閉じ括弧はどこに置く？
3種類あります。
次のセレクタ文字列の前の行に置く方法、
：
}
h2, h3 {
：
次のセレクタ文字列の直前に置く方法、
：
} code, kbd, samp {
：
次のセレクタ文字列の前にインデントして置く方法。
：
}
div.wheel
{
声明と声明の間を一行開ける人がいますが、これはせずとも良いでしょう。大きな区切りでは更に大きな改行が必要になり、無駄なスクロールの増加を招きます。
少しでもプログラミングをしたことがある人なら、最後の方法は絶対に避けるでしょう。実際に、避けたほうが無難です。将来、複雑な入れ子をするような仕様になってきた時に、対処しきれなくなります。
1つ目の例は、2つ目の例と比べて、行単位で宣言を動かすのがかなり容易で、同時に移動による括弧のズレを防げます。
対して、2つ目の例は、1つ目の例と比べて、スクロールの増加をかなり防げます。
プログラミングをしたことがある人は、自分のプログラミング・スタイルと合わせておくと良いでしょう。
初めての人や、まだ慣れていない人には、1つ目の書き方をお薦めします。
大きな区切りには
大きな区切りには、分かり易いコメントを入れておくと、後で見やすくなります。
/* ========= ここから本文 ========= */
/* --------- Windows IE Extentions --------- */
プロパティと値の間は？
5通りくらいあります。
:(コロン)の前後に余白を入れるケース、
前か後ろだけに余白を入れるケース、
全く開けないケース、
インデントで値をそろえるケース
があります。
color : #000 ;
background-image: url("regax.gif") ;
text-align :center;
font-stretch:narrow;
font-size: 120%; /* インデントで */
list-style-type: lower-roman;/* そろえる */
インデントする方法は、将来的に見てもあまり有用ではないと思います。空白を入れる場合、どちらか一方に入れておけばよいと思います。それでプロパティと値の差別化は図れると思いますし。これでもまだ足りないと思う場合は、前後両方に余白を入れてください。
行の最後の;（セミコロン）の手前の余白も、同様の理由から不要だと思います。:（コロン）をプロパティにくっつけ、;（セミコロン）を値にくっつけると、見た目が多少良いかも知れませんね。
セレクタの間の余白は？
もっともよく使うのが、グループ化した時のコロン(,)の前後。どこかのUAのせいであまり使えませんが、>（大なり）や+（プラス記号）の前後の余白も任意です。
,（コロン）の場合は後ろに、>（大なり）や+（プラス記号）の場合は前後にそれぞれ一つずつ余白を入れるのが一般的ではないかと思います。
声明を書く順序は？
管理面で、シートが大きくなるに従って問題になってくるのが、どのような順序で声明を書くかです。ここのようにスタイルが大して良くもないのに大きいサイトは別として、複雑なスタイルが組めるようになるにつれて、この問題は深刻化する、かも知れません。
つまりこのセクションは、大きいスタイルシートを扱う人向けです。
大体のサイトでは、一般、クラス、IDといった分け方をしているようです。
しかしこの分け方は、少しスタイルシートが大きくなると、管理が困難になってきます。
そこで、2つの書き方を提案します。
- 要素の種類による分類
- 出現順序による書き方
1つ目はそのまま、要素の種類によって書く順序を決定します。大きく、4つに分けることが出来ます。
- サイト全体に共通で、要素全体に対しても共通の部分
- ブロック要素
- インライン要素
- 表関連要素
最初の一つを除いて、説明は不用でしょう。1つ目には、例えばbodyやhtmlといった要素が該当します。それと、全要素共通のクラスです。
クラスの使い方を覚えてくると、全要素共通のクラスを作ることは少なくなってくると思いますので、このパートはきわめて小さなものになると思います。
残りの部分には、それぞれ要素別に声明をまとめておきます。似た意味の扱いをしている要素でない限り、共通の宣言でも敢えて分けて書きます。
そこで問題になってくるのは、例えばdlに入れ子になっているolは、dlに書けばよいのか、それともolに書けばよいのか、ということです。不明確な表現ですが、どちらかと言えば、このような場合、olのエリアに記述すると良いと思います。インライン要素の場合は、祖先を辿って、初めに出現するブロック要素のエリアに記述しておくと良いかも知れません。自分の直感と経験に従ってください。
そして2つ目、出現順序による書き方。
特殊なサイトを除いて、大体のサイトでは、共通の部分が幾つか存在すると思います。
その共通の部品を、出現する順序通りに記述します。とても直感的です。
以上の2通りの書き方を、両方使用します。
順序は、どちらが先でも構いません。二つのファイルに分けて管理しても良いでしょう。これで、それなりの効率化が図れると思います。