1つだけを送信すると仮定して、単一または複数のスタイルシートを提供する必要があるかどうかという質問は別として、これを基本構造としてどのように考えますか？
/* 構造 */
テンプレートレイアウトのものはすべてここに配置する必要があるため、ヘッダー、フッター、本文など。
/*構造の終わり*/
/*共通コンポーネント*/
サインアップフォーム、リストなどの繰り返し要素。
/*共通コンポーネントの終了*/
/*特定のページ1*/
一部のページには特定のスタイルがある場合があり、それはここにあります。
/*特定のページ1終了*/
/*特定のページ2*/
上記のように
/*特定のページ2終了*/
/*特定のページなど*/
等々。
/*特定のページなど終了*/
これは私の構造と似ていますが、小見出しを使用するのが最善の方法であることがわかったので、次の構造を使用します。
/************************* * グローバル * ********************* ****/
/* 一般的な内容はすべて、適切なサブ見出しの下に記載されています */
/* 見出しのフォーマット */
/* テキストのフォーマット */
/* フォームのフォーマット */
/* 表のフォーマット */
/* など */
/************************* * レイアウト * ********************* ****/
/* レイアウトに関するすべての項目は、ここの小見出しの下に表示されます */
/* ヘッダー */
/* 左サイドバー */
/* 右サイドバー */
/* フッター */
/************************* * ナビゲーション * ********************* ****/
/* 小見出しの下に多数のナビゲーション ポイントがある可能性があるため、レイアウトとは別にナビゲーションを配置します */
/* メイン (水平) ナビゲーション */
/* 左ナビゲーション */
/* 右ナビゲーション */
/* ブレッドクラム ナビゲーション */
/************************* * フォーム * ********************* ****/
/* 一般的なフォーマットとは異なるフォームのフォーマット。異なるフォーマットのフォームが複数ある場合は、サブヘッダーを使用します */
/************************* * テーブル * ********************* ****/
/* フォームと同じ取引 */
/************************* * リスト * ********************* ****/
/* フォームやテーブルと同じ扱い */
/************************* * コンテンツ * ********************* ****/
/* フォーム、表、リストと同じ方法でページの小見出しによってグループ化された、特定のページの特定の書式設定 */
/************************* * CSS サポート * ******************** *****/
/* これは、任意のページの任意の要素に適用でき、そのアイテムの通常の書式設定を上書きできる特別な書式設定用です。たとえば、これには次のようなものがあります: */
.float-right { float: right; }
.float-left { float: left; }
.float-center { margin-left: auto; margin-right: auto; }
.clear { clear: both }
.clear-block { display: block }
.text-left { text-align: left }
.text-right { text-align: right }
.text-center { text-align: center }
.text-justify { text-align: justify }
.bold { font-weight: bold }
.italic { font-style: italic }
.underline { border-bottom: 1px solid }
.nopadding { padding: 0 }
.nobullet { list-style: none; list-style-image: none }
/* など */
それが役立つことを願っています。
私は通常、そのような 1 行で書くことはお勧めしませんが、Adam が投稿したリンクで提案されているように、長くなると読み飛ばすのが非常に難しくなります。上記の例では、そのように入力した方が簡単だったので、すべての行をインデントする必要はありませんでした。
フォーマットについては、次の構造をお勧めします。
.class {
width: 200px;
height: 200px;
border: 1px solid #000000;
}
など、クラスまたは ID の構造を一番上に配置し、その下にフォントなどの他のフォーマットを配置します。すくい取ることが非常に迅速かつ明確になります。
あなたにとって意味のあるものは何でも十分です。率直に言って、他の誰かがあなたのスタイルシートで何かを探しに来たとき、またはあなたが何かを探しに来たとき、彼らはあなたの組織構造が何であったかを理解しようとはしません。必要なクラスや要素を検索するだけです。したがって、一般的に関連するものをまとめて保持し、@Matt が提案するようなコメントでセクションを分けている限り、問題ありません。
実際のところ、非常によく考え抜かれた組織構造であっても、よく考え抜かれたファイリング システムと同様に、何がどこにあるのかが常に明らかであるとは限りません。したがって、物事を整理することに多くの時間を割くのではなく、必要なものを見つけるために検索ツールに頼るのではなく、ある程度分別のある方がよいでしょう。
CSS をあなたのものと同じように整理しますが、リセット セクションから始めます。主なアイデアは、一般的なものから具体的なものへと移行することです。だからここに行く：
あなたが提示した構造はまさに私が使用しているものです。ただし、新しいルールが表示されて相互にオーバーライドされるため、まだ複雑すぎるように思われます...おそらく、代わりにAdamによってリンクされたトピックで提案された解決策に固執する必要があります。
新しい css ファイルを作成するたびに、それを整理する新しい方法を見つけているようです。そして、それらはすべて以前よりも優れています。