これはCSSスタイルシートをどのように構成するのですか？

StackOverflow https://stackoverflow.com/questions/182528

  •  06-07-2019
  •  | 
  •  

質問

送信するスタイルシートが1つだけであると仮定して、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を整理しますが、リセットセクションから始めます。主なアイデアは、一般的なものから特定のものへと移行することです。だからここに行きます：

  • リセット
  • 構造
  • html_tags
  • ナビゲーション
  • 特定のセクション
  • エラーメッセージ-これが最後のセクションです

あなたが提示した構造は、まさに私が使用しているものです。ただし、新しいルールが相互に表示およびオーバーライドされるため、まだ複雑すぎるようです...おそらく、Adamがリンクしているトピックで提案されているソリューションに固執するようにしてください。

新しいcssファイルを作成するたびに、それを整理する新しい方法を見つけるようです。そして、それらはすべて以前のものよりも優れています。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top