CSSで見出しを書かない
セクションをファイルに分割するだけです。すべての CSS コメントは、まさにそのコメントである必要があります。
reset.css
base.css
somepage.css
someotherpage.css
some_abstract_component.css
スクリプトを使用してそれらを 1 つに結合します。必要であれば。適切なディレクトリ構造を作成して、スクリプトでファイルを再帰的にスキャンすることも.cssできます。
見出しを書く必要がある場合は、ファイルの先頭に TOC を配置します
TOC の見出しは、後で書く見出しと完全に一致する必要があります。見出しを探すのが面倒。問題をさらに悪化させるために、最初のヘッダーの後に別のヘッダーがあることを正確に知るにはどうすればよいでしょうか? ps。TOC を書くとき、各行の先頭に doc のような * (スター) を追加しないでください。テキストを選択するのが面倒になるだけです。
/* Table of Contents
- - - - - - - - -
Header stuff
Body Stuff
Some other junk
- - - - - - - - -
*/
...
/* Header Stuff
*/
...
/* Body Stuff
*/
ブロック外ではなく、ルール内またはルール内でコメントを書く
まず、スクリプトを編集するとき、50/50 の確率で、ルール ブロックの外側にあるものに注意を払うことになります (特に、それが大きなテキストの塊である場合は ;))。第二に、外部で「コメント」が必要になるケースは (ほとんど) ありません。外だと99%タイトルなのでそのままで。
ページをコンポーネントに分割する
ほとんどの場合、コンポーネントにはposition:relative、 no padding、および noが必要marginです。これにより、 % ルールが大幅に簡素化されabsolute:position、要素の単純化が可能になります。これは、絶対位置のコンテナーがある場合、絶対位置の要素がtop, right, bottom,leftプロパティを計算するときにコンテナーを使用するためです。
通常、HTML5 ドキュメント内のほとんどの DIV はコンポーネントです。
コンポーネントは、ページ上の独立した単位と見なすこともできます。素人の言葉で言えば、何かをblackboxのように扱うことが理にかなっている場合は、何かをコンポーネントのように扱います。
再び QA ページの例を使用します。
#navigation
#question
#answers
#answers .answer
etc.
ページをコンポーネントに分割することで、作業を管理しやすい単位に分割できます。
累積効果のあるルールを同じ行に配置します。
たとえばborder、marginとpadding(ただし ではないoutline) はすべて、スタイリングする要素の寸法とサイズに追加されます。
position: absolute; top: 10px; right: 10px;
それらが 1 行で読みにくい場合は、少なくともそれらを近接して配置します。
padding: 10px; margin: 20px;
border: 1px solid black;
可能な場合は省略形を使用します。
/* the following... */
padding-left: 10px;
padding-right: 10px;
/* can simply be written as */
padding: 0 10px;
セレクターを繰り返さない
同じセレクターのインスタンスが複数ある場合、必然的に同じルールの複数のインスタンスになる可能性が高くなります。例えば：
#some .selector {
margin: 0;
font-size: 11px;
}
...
#some .selector {
border: 1px solid #000;
margin: 0;
}
id/classes を使用できる場合は、TAG をセレクターとして使用しないでください。
まず、DIV タグと SPAN タグは例外です。絶対に使用しないでください。;) クラス/ID をアタッチするためにのみ使用してください。
これ...
div#answers div.answer table.statistics {
border-collapse: collapsed;
color: pink;
border: 1px solid #000;
}
div#answers div.answer table.statistics thead {
outline: 3px solid #000;
}
次のように記述します。
#answers .answer .statistics {
border-collapse: collapsed;
color: pink;
border: 1px solid #000;
}
#answers .answer .statistics thead {
outline: 3px solid #000;
}
そこに余分な DIV がぶら下がっているため、セレクターには何も追加されません。また、不要なタグルールを強制します。たとえば、.answera から adivに変更するとarticle、スタイルが崩れます。
または、より明確にしたい場合：
#answers .answer .statistics {
color: pink;
border: 1px solid #000;
}
#answers .answer table.statistics {
border-collapse: collapsed;
}
#answers .answer .statistics thead {
outline: 3px solid #000;
}
プロパティである理由は、border-collapseに適用された場合にのみ意味をなす特別なプロパティですtable。でない場合.statisticsは、table適用しないでください。
一般的なルールは悪です！
- 可能であれば、一般的/魔法のルールを書くことは避けてください
- CSS リセット/リセット解除の場合を除き、すべての一般的な魔法は少なくとも 1 つのルート コンポーネントに適用する必要があります。
彼らはあなたの時間を節約しません、あなたの頭を爆発させます。メンテナンスを悪夢にします。ルールを書いているときに、それらがどこに適用されるかを知っているかもしれませんが、後でルールが混乱しないという保証はありません。
この一般的なルールに追加することは、スタイルを設定しているドキュメントについてある程度の知識があったとしても、混乱を招き、読みにくいものです。これは、ジェネリック ルールを書くべきではないと言っているのではありません。本当にジェネリックにするつもりがない限り、それらを使用しないでください。また、可能な限り多くのスコープ情報をセレクターに追加します。
このようなもの...
.badges {
width: 100%;
white-space: nowrap;
}
address {
padding: 5px 10px;
border: 1px solid #ccc;
}
...プログラミング言語でグローバル変数を使用するのと同じ問題があります。あなたは彼らにスコープを与える必要があります！
#question .userinfo .badges {
width: 100%;
white-space: nowrap;
}
#answers .answer .userinfo address {
padding: 5px 10px;
border: 1px solid #ccc;
}
基本的には次のようになります。
components target
---------------------------- --------
#answers .answer .userinfo address
-------- --------- --------- --------
domain component component selector
コンポーネントがページ上のシングルトンであることがわかっている場合は常に ID を使用するのが好きです。あなたのニーズは異なるかもしれません。
注: 理想的には、必要十分なだけ記述してください。ただし、セレクターでより多くのコンポーネントに言及することは、より少ないコンポーネントに言及することに比べて、より寛容な間違いです。
コンポーネントがあると仮定しましょうpagination。サイト全体の多くの場所で使用します。これは、一般的なルールを作成する場合の良い例です。display:block個々のページ番号のリンクに濃い灰色の背景を付けるとしましょう。それらを表示するには、次のようなルールが必要です。
.pagination .pagelist a {
color: #fff;
}
ここで、回答のリストにページネーションを使用するとしましょう。次のようなものに遭遇する可能性があります
#answers .header a {
color: #000;
}
...
.pagination .pagelist a {
color: #fff;
}
これにより、白いリンクが黒くなりますが、これは望ましくありません。
それを修正する間違った方法は次のとおりです。
.pagination .pagelist a {
color: #fff !important;
}
それを修正する正しい方法は次のとおりです。
#answers .header .pagination .pagelist a {
color: #fff;
}
複雑な「論理」コメントは機能しません:)
「この値は、何とか高さを組み合わせた何とかに依存しています」のようなものを書いた場合、間違いを犯すことは避けられず、すべてがトランプの家のように倒れます。
コメントは簡潔にしてください。「論理演算」が必要な場合は、SASSやLESSなどの CSS テンプレート言語のいずれかを検討してください。
カラーパレットの書き方は？
これを最後に残します。カラー パレット全体のファイルを用意します。このファイルがなくても、スタイルには使用可能なカラー パレットがルールに含まれているはずです。カラー パレットが上書きされます。非常に高レベルの親コンポーネント (例: #page) を使用してセレクターをチェーンし、スタイルを自己完結型のルール ブロックとして記述します。それはただの色でも、それ以上でもかまいません。
例えば。
#page #header .description,
#page #categories .description,
#page #answers .answer .body
{
color: #222; background: #fff;
border-radius: 10px;
padding: 1em;
}
アイデアは単純です。カラー パレットは、カスケードする基本スタイルから独立したスタイルシートです。
名前が少なく、必要なメモリが少なくて済み、コードが読みやすくなります
使用する名前は少ないほど良いです。テキスト、本文、ヘッダーなど、非常に単純な (そして短い!) 単語を使用するのが理想的です。
また、postbody、posthead、userinfo などの長い「適切な」単語を組み合わせるよりも、単純な単語を組み合わせた方が理解しやすいと思います。
スタイル スープを読みに来た見知らぬ人 (数週間後のあなたのように ;)) が、すべてのセレクターがどこで使用されているかではなく、単語がどこで使用されているかだけを理解する必要がある場合でも、この方法で語彙を少なくしてください。たとえば.this、要素が「選択されたアイテム」または「現在のアイテム」などであると思われる場合はいつでも使用します。
自分の後片付けをする
CSS を書くことは食べるようなものです。その混乱を確実に片付けてください。そうしないと、ガベージ コードが積み重なってしまいます。使用しないクラス/ID を削除します。使用しない CSS ルールを削除します。すべてが適切で、競合するルールや重複するルールがないことを確認してください。
私が提案したように、いくつかのコンテナーをスタイルのブラックボックス (コンポーネント) として扱い、それらのコンポーネントをセレクターで使用し、すべてを 1 つの専用ファイルに保持した場合 (または TOC とヘッダーを含むファイルを適切に分割した場合)、作業が大幅に楽に...
Firefox 拡張機能の Dust-Me Selectors (ヒント: sitemap.xml を指す) などのツールを使用して、CSS の核とカーニーに隠されたジャンクを見つけることができます。
unsorted.cssファイルを保管する
QA サイトのスタイルを設定していて、「回答ページ」用のスタイルシートが既にあるとします。これを と呼びますanswers.css。多くの新しい css を追加する必要がある場合は、それをスタイルシートに追加してから、unsorted.cssスタイルシートにリファクタリングしますanswers.css。
これにはいくつかの理由があります。
- 完了後にリファクタリングする方が高速です。次に、ルール (おそらく存在しない) を検索してコードを挿入します。
- 削除するものを作成します。コードを挿入すると、そのコードを削除するのが難しくなります
- 元のファイルに追加すると、ルール/セレクターの複製が簡単に発生します