NULL::something

CSS で面倒くさいのは

Reference URI

http://lowreal.net/logs/2006/07/13/2

Written Time

2006-07-13T01:14:51+09:00

Tags

1. css

ブラウザ間のアレなんだから、あんまり 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;
}