CSSで見出しを書かない
セクションをファイルに分割するだけです。CSSのコメントは、それだけのコメントでなければなりません。
reset.css
base.css
somepage.css
someotherpage.css
some_abstract_component.css
スクリプトを使用してそれらを1つに結合します。必要であれば。素敵なディレクトリ構造にすることもでき、スクリプトで.cssファイルを再帰的にスキャンするだけです。
見出しを書く必要がある場合は、ファイルの先頭に目次を記述します
TOCの見出しは、後で作成する見出しと完全に一致している必要があります。見出しを探すのは大変です。問題に追加するには、最初のヘッダーの後に別のヘッダーがあることを誰かが正確にどのように想定しているのでしょうか？ps。目次を書き込むときに各行の先頭にdocのような*（スター）を追加しないでください。テキストを選択するのが面倒になります。
/* Table of Contents
- - - - - - - - -
Header stuff
Body Stuff
Some other junk
- - - - - - - - -
*/
...
/* Header Stuff
*/
...
/* Body Stuff
*/
ブロックの外ではなく、ルール内またはルール内でコメントを書く
まず、スクリプトを編集するとき、50/50の確率で、ルールブロックの外側にあるものに注意を払います（特に、テキストの大きな塊である場合は;））。次に、外部に「コメント」が必要になるケースは（ほとんど）ありません。それが外にある場合、それはタイトルの時間の99％なので、そのように保ちます。
ページをコンポーネントに分割します
コンポーネントが持っている必要がありposition:relative、ノーpadding、ノーmargin、ほとんどの時間を。この簡素化％は単純はるかを可能にするだけでなく、多くの規則absolute:position絶対配置されたコンテナがあるかどう計算するときに、絶対位置指定要素は、容器を使用するので、素子のINGの」top、right、bottom、leftプロパティ。
HTML5ドキュメントのほとんどのDIVは通常、コンポーネントです。
コンポーネントは、ページ上の独立したユニットと見なすこともできるものです。素人の言葉では、ブラックボックスのようなものを扱うことが理にかなっている場合、コンポーネントのようなものを扱います。
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 /クラスを使用できる場合は、セレクターとしてタグを使用しないでください
まず、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からa divに変更すると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テンプレート言語の1つを検討してください。
カラーパレットを作成するにはどうすればよいですか。
これは最後まで残しておきます。カラーパレット全体のファイルを用意します。このファイルがなくても、スタイルにはルールに使用可能なカラーパレットが含まれているはずです。カラーパレットが上書きされます。非常に高レベルの親コンポーネント（例：）を使用してセレクターをチェーンし、#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セレクター（ヒント：sitemap.xmlをポイントする）などのツールを使用して、CSSの核と肉食動物に隠れているジャンクを見つけることができます。
unsorted.cssファイルを保持する
QAサイトのスタイルを設定していて、「回答ページ」のスタイルシートがすでにあるとしますanswers.css。新しいcssをたくさん追加する必要がある場合は、それをunsorted.cssスタイルシートに追加してから、スタイルシートにリファクタリングしますanswers.css。
これにはいくつかの理由があります：
- 完了後にリファクタリングする方が高速です。次に、ルール（おそらく存在しないもの）を検索してコードを挿入します。
- 削除するものを書いて、コードを注入すると、そのコードを削除するのが難しくなります
- 元のファイルに追加すると、ルール/セレクターの複製が簡単に発生します
simplicity、complexity、maintenance、structureとrefactoring。