ブラウザ間のアレなんだから、あんまり CSS 書くこと自体を面倒くさいことにしないほうがいいよね、って思うんだ。
ところで自分が CSS を書くときに気をつけていることを書くよ！
- 必ずルールをインデントする (TAB インデント)
- セレクタを複数書く場合は最後以外改行する
- 規則のあとには必ずセミコロンを入れる (最後も)
- 最後のルールのあとも改行する
- 宣言ブロック間はホワイトラインを入れる
- border, border-style, border-color, border-width 以外の border 系プロパティを極力使わない
- font プロパティを使わない。
- list-style 以外の list 系プロパティを極力使わない
- margin, padding 以外の margin, padding 系プロパティを極力使わない
- background 以外の background 系プロパティを極力使わない
- 宣言ブロックは基本的に HTML の構造順に書く
- 構造に関係ないやつ (ID 選択子を含まないもの) は上のほうに書く
- インライン要素 (span, a), ブロック要素 (p, ol), どっちでも要素 (ins, del), 置き換え要素 (img, input) の順に書く (しかしそんなに厳密に考えない)
- ID 指定の場合、下位の要素に ID が指定されていても、上位 ID をあまり省略しない (CSS 読むだけでも、HTML 構造が少しわかるように書く)
- 以下適当ですが、display, position, float は宣言ブロック中で上のほうに書くとか、background と color は近くに書くとか (しかしあまり気にしない)
- ルールと書いたり規則と書いたり安定しないけど気にしない
「極力使わない」というのは、どうしてもカスケーディングを維持したいときだけ使う。
* {
margin: 0;
padding: 0;
font-size: 100%;
font-weight: normal;
font-style: normal;
color: inherit;
background: transparent;
border: none;
}
a:link {
color: #00f;
text-decoration: underline;
}
a:visited {
color: #660;
text-decoration: underline;
}
a:hover ,
a:active {
color: #00f;
text-decoration: none;
}
p {
margin: 0.5em 1em;
}
ul {
padding: 0 0 0 1em;
}
ol {
padding: 0 0 0 1.5em;
}
del,
ins {
background: #efefef;
border: 1px solid #ccc;
}
input,
textarea {
background: #efefef;
border-style: solid;
border-color: #060;
border-width: 0.2em 0.5em;
}
/* ここから構造順 */
body {
line-height: 1.66;
background: #1f2f16 url("/img/left.png") repeat-y 7% 0;
color: #fff;
margin: 0 0 0 7%;
padding: 0 7% 0 50px;
}
#whole {
background: #fff url("/img/right.png") repeat-y right top;
color: #000;
padding: 20px 55px 0 0;
}
#top a {
display: block;
background: url("/img/logo.png") no-repeat left top;
width: 500px;
height: 100px;
margin: 0 0 0 20px;
text-indent: -10000px;
overflow: hidden;
}
#navigation {
}
#navigation ul li {
display: inline;
padding: 0 0.5em;
border-style: solid;
border-color: #ccc;
border-width: 0 0 0 1px;
}
#navigation #search-form {
position: absolute;
top: 0;
right: 7%;
margin: 1em;
}
#content {
padding: 1em;
}
#content h2 {
font-size: 120%;
padding: 1em;
background: #ccc;
}
#footer {
color: #ccc;
background: #000;
}
