初心者の本ではなく、より基本的なプリンシパルの書籍であるCSSブック/リソースの推奨が必要です

Question

私は自分自身を考えていて、非常にページの読み込み数と訪問者数が多い自分のサイトやサイトのいずれかに賭けています。私は試行錯誤を通して、そして達成したいことを達成するためにGoogleで特定のケースを調べることですべてを学びました。結果として、すべてのウェブサイトまたは再設計は前のものより優れています。

私はいつも私が望む最終結果を得ていますが、私は根本的なプリンシパルに欠けていると感じ、解決に数時間かかることがあります。たとえば、div内のdiv内にpがあります。各要素は1つ以上のcssクラスを使用しますが、特定のインスタンスでは、期待していない最低レベルpで影響を受けます。

これは、チェーンの上に使用されるクラスと下に使用されるクラスの関係を理解し​​ていないことを意味します（つまり、私が意味するものを得た場合） - ap内のパディングまたはマージンが、 1つの部門に3つのレベルアップ。または、同じ要素（p、divなど）に複数のクラスがどのように相互作用したり、競合したりするか

だから私は、どのように個々のフォントや余白の要素がどのように動作するのではなく、すべてがぶら下がっているかを説明するCSSブックまたはオンラインリソースを探しています。

ご協力いただければ幸いです。

Answer 1

CSSのゴッドファーザーからこの本は、私のお気に入りの一つです：

Cascading Style Sheets: Designing for the Web (via Amazon.com)

ニコール・サリバンはまた、モジュール式のCSSを作成しようと、「オブジェクト指向CSS」のエリアにいくつかの素晴らしい仕事をしていますそれは再利用可能で、あなたが記述しているものに似た問題につながるコードのCSSが肥大化します。あなたは彼女を見つけることができます：Stubbornella.org

Answer 2

私は楽しんで学んだCSS Anthology：101本質的なヒント、トリック&ハック。それは、Webデザインとコーディングを教える上で良い仕事をするSitepointの人々からの です。そして、最初の150ページをスキップしたり、うんざりしたりしなければならない標準的な出版物やトップダウンの説明ではなく、現実のデザイン上の問題の例から学びます。

これまでのSOの投稿を確認したところ、extended older discussionです。 coupleのmoreには、少しオーバーラップしている部分がリストされています。特に、エリックマイヤーのものが特にあります。

Answer 3

あなたが参照している概念は、特異性との継承です。 Smashing Magazineには、両方の用語を詳しく説明する良いarticleがあります。

ここで簡単に要約すると、特異性は、特定のCSSセレクタの「重み」を指します。より具体的なセレクタは、より大きな重みを持ち、競合が発生したときに優先します。例えば、このHTMLを与えられた：

<p class="text">Test</p> 

そして、このCSS：.textセレクタがpセレクタよりも高い特異性を持っているので、

 
.text {color: green;} 
p {color: red;} 

テキストが緑色でレンダリングされます。

継承は、要素が含まれる要素の特定のプロパティを継承する方法を指します。例えば、このHTML与えられた：

<div><span>Test</span></div> 

そして、このCSS：span親divに設定されたテキストの色を継承するため

 
div {color: red;} 
span {font-size: 18px;} 

テキストTestは、18pxで赤でレンダリングされます。

Answer 4

CSS: The Missing Manual O'Reilly。よく説明され、IEの一般的な問題を回避する方法を含む、非常に有用な情報があります。