ぐちゃぐちゃに書くと後々悲惨なことになるので。
最初に
管理人
@LeoTiger_7はWebデザイナーではありません。Webデザイナーになりたいなーと思っているだけの普通の人です。
なので、今から説明することには間違いがあるかもしれませんが、そこは暖かい目で見守ってください。
書き方の統一
CSSの書き方は人それぞれですが、Webデザイナーさんの書いたCSSをチラ見すると大体こんな感じで統一されています。
例
.sample1 {
color: red;
font-size: 14px;
}
.sample2 {
color: blue;
font-size: 12px;
}
- セレクタの後に半角スペース
- プロパティの前にタブスペース（インデント）
- :の後に半角スペース
- スタイルとスタイルの間に改行
個人的にも、この記述方法が一番読みやすくて好き。さらに煮詰めるとしたら、hoverなどの擬似クラス、入れ子になってるスタイルなどを更に字下げするのもありだと思います。
例
a {
color: red;
}
a:hover {
color: blue;
}
a:active {
color: green;
}
なんかSCSSっぽくなりますね。
編集用のCSSはこんな感じの書き方で統一して、最終的には
CompressなどのCSS圧縮ツールを使うのが一番無難でしょうか。
プロパティの順序
スタイルの書き方以上に個人差があるのが、プロパティの順番です。
どんな順番で記述しても動作に支障はないんですが、これもある程度は自分ルールを作ったほうがいいんじゃないかな。
color
font-***
text-***
background
width
height
border
margin
padding
float
overflow
display
z-index
かなり端折りましたが、
@LeoTiger_7はこんな感じで書こうと意識しています。
これは管理人自身が読みやすい順序なので、別にz-indexを先頭に書いてもOK。何度も言いますが大切なのは
「統一すること」です。
※一応、Mozillaの勧める順序を記したPDFへのリンクを貼っておきます
Class名、ID名の統一
これも先程の考え方と同じで、自分ルールを作ればいいと思います。
例えば3カラム構成のページで…
左のサイドバーが「#sideLeft」なら、右は「#sideRight」
「#side1」なら「#side2」
「#sideL」なら「#sideR」
こうなりますよね？まぁ慣れると無意識に出来ることだとは思いますが、管理人は気を抜くと「#sideLeft」と「#sideR」とか
滅茶苦茶な命名をしてしまうことがあります。
class名、ID名の付け方に関しては、こっちの記事がオススメです。
適切なコメント
コメントは大切です。もう一度言いますが、
コメントは大切です。
CSSのコメントアウトは「/* こんな感じ */」ですが、ヘッダーやフッター部分の区切り方は色々あります。
例：header部分の記述を区切る
/* header */
/********** header **********/
/*************************
header
*************************/
/*************************
* header *
*************************/
もう個性全開です。
色々な方法はありますが、出来るだけ目立たせたほうが編集する際に分かりやすいかも？ちなみにうちのブログでは2番目の方法で各項目を区切っています。
最後に
色々書きましたが、この記事を書いた
@LeoTiger_7は、眠い時とか疲れてる時はプロパティの順番とか記述ルールがかなり適当になります。
酷い時だとwidthが2つあったりする上に、
なんでちゃんと表示されねえんだよ○ねとか言っちゃう始末。
この記事はあまり参考にしないほうがいいかもしれません。
関連するかもしれない記事
