CSSスタイルシートを構成する最良の方法

Question

私は比較的新しいCSSですが、まだ初心者の方にはうってつけです。しかし、私が読んだチュートリアルの多くは、「あなたのスタイルシートを適切に編成して構造化すること」について警告することが多いのですが（なぜ私はかなり長いスタイルシートを自分で作成したのか分かります）スタイルシート用の標準化されたフォーマット、または後の人間の読書を容易にするレイアウト用の論理パターン。

たとえば、私のページの "地理的"セクション（ヘッダー、行1、行2、記事1など）ごとにコメント括弧で囲まれたセクションを作成し、そのセクションのすべてのスタイルをコメント境界内に保持しますか？問題は、私が他のセクションで再利用されるスタイルを持っているときに、ページ全体のスタイルのセクションの下にそれらを配置すると、セクションごとにグループ化する目的を否定するようです。同様に、テキストスタイル、レイアウトスタイルなどに基づいてグループ化することで自分のスタイルシートを構造化することは、もっと混乱しているようです。

"良い方法"はありますか？私はこれが馬鹿に聞こえることを知っていますが、あなたがHTMLやCSSで何をしていても、誰かがあなたに間違ったこと、悪い練習、または非凡なことを教える準備ができているように思えます。私は、雇用者が将来それを確認したい場合に備えて、自分のコードを自分の仕事の良い例にしたい。

Answer 1

私は実際に教えられたことはありませんが、私は自分のCSS文書を整理する方法を教えてくれます。あなたが言うように、私はそれを「地理的」領域、すなわちヘッダー、サイドバー、メインコンテンツ、フッタなどに適用されるルールに分割したいと思います。そして、これらの下では、たとえば、特定のページでフォームや表のスタイルを設定する必要があるとします。最後に、ボード全体に適用される一般的なルールを追加するときに、下部に「General Gubbins」セクションを追加します。

ああ、デザイナーのパレットを一番上に追加してクイックリファレンスを作成することもできます。例えば

...

/* 
PALETTE: 
dark grey : #555555; 
pink  : #d93575; 
*/ 

/* HEADER */ 
#header {...} 
#header ul {...} 

/* SIDE BAR */ 
#side {...} 
#side ul {....} 

/* CONTENT */ 
#content{...} 
#content p {....} 

/* FOOTER */ 
#footer{...} 
#footer div {....} 

/* FORMS */ 
form {...} 
input {...} 

/* GENERAL GUBBINS */ 
.center {...} 
strong {...} 
floatleft {...} 

Answer 2

これらの人は（http://net.tutsplus.com/tutorials/html-css-techniques/30-css-best-practices-for-beginners/）「トップダウン構造とスタイルシートを整理する」をアドバイス。私はしばしば複数のスタイルシートを使用します。 MVCでは、ビュー単位でスタイルを調整することができます。そのようにして、ビュー固有のスタイルを特定のスタイルシートに配置し、「共有」または「レイアウト」を混乱させることはありません。