8

一般的な要素スタイル、ネストされた要素スタイル、およびクラス化された要素スタイルの CSS 'スキーマ' または階層を確立するにはどうすればよいでしょうか。私のようなランクの初心者にとって、私が表示するスタイルシートの情報量は完全に圧倒されます. インライン スタイル属性と比較して、適切にファクタリングされたスタイルシートまたはシートを作成するには、どのようなプロセスに従いますか?

4

8 に答える 8

6

私はCSSクラスにコンテンツまたはコンテンツタイプで名前を付けるのが大好きです。たとえば、ナビゲーション「タブ」を含む<ul>にはclass="tabs"があります。日付を含むヘッダーはclass="date"であるか、上位10個のリストを含む順序付きリストはclass="chart"である可能性があります。同様に、IDの場合、ページフッターid="footer"またはウェブサイトid="mainLogo"のロゴを指定できます。クラスを覚えやすくするだけでなく、CSSの適切なカスケードを促進することもわかりました。ol.chart {font-weight：bold;のようなもの color：blue;} #footer ol.chart {color：green;}は非常に読みやすく、CSSセレクターがより具体的になることでどのように重みを増すかを考慮に入れています。

適切なインデントも大きな助けになります。サイトに新しいセクションを追加したり、新しいタイプのコンテンツを公開したりするたびにHTMLテンプレートをリファクタリングしたい場合を除いて、CSSはかなり大きくなる可能性があります。どんなに頑張っても、必然的に、元のスキーマでは予期していなかったいくつかの新しいルール（または例外）を追加する必要があります。Indetingを使用すると、大きなCSSファイルをはるかに高速にスキャンできます。私の個人的な好みは、セレクターがどの程度具体的であるか、ネストされているかをインデントすることです。

    ul.tabs {
    list-style-type: none;
    }
        ul.tabs li {
        float: left;
        }
            ul.tabs li img {
            border: none;
            }

そうすれば、「親」は常に左端にあるため、テキストは親コンテナによってブロックに分割されます。また、スタイルシートをいくつかのセクションに分割するのも好きです。まず、HTML要素のすべてのセレクターがあります。私はこれらを非常に一般的であると考えているので、実際に最初に来る必要があります。ここに「body{font-size：77％;}」や「a {color：＃FFCC00;}」などを配置します。その後、ページのメインフレームワーク部分のセレクターを配置します（例： "ul＃mainMenu { float：left;} "および"div＃footer {height：4em;}"。次に、一般的なオブジェクトクラス「td.price {text-align：right;}」に進み、最後に「.clear {clear：both;}」のような余分なビットが続きます。今ではそれが私の好きな方法です-もっと良い方法があると確信していますが、それは私にとってはうまくいきます。

最後に、いくつかのヒント：

  1. カスケードを最大限に活用し、ものを「オーバークラス」しないでください。<ul> class = "textNav"を指定すると、クラスの割り当てを追加しなくても、その<li>とその子にアクセスできます。ul.textNav li a：hover {}

  2. 1つのオブジェクトで複数のクラスを使用することを恐れないでください。これは完全に有効で非常に便利です。次に、複数の軸からオブジェクトのグループのCSSを制御できます。また、オブジェクトにIDを与えると、さらに3番目の軸が追加されます。例えば：

    <style>
div.box {
float: left;
border: 1px solid blue;
padding: 1em;
}

div.wide {
width: 15em; 
}

div.narrow {
width: 8em; 
}

div#oddOneOut {
float: right;
}
</style>

<div class="box wide">a wide box</div>
<div class="box narrow">a narrow box</div>
<div class="box wide" id="oddOneOut">an odd box</div>

  3. ドキュメントの<body>タグ（またはIDは1つしかないため...）にクラスを指定すると、現在表示しているページのメニュー項目を強調表示したり、それを削除したりするなど、個々のページの気の利いたオーバーライドが可能になります。サインインページの冗長な2番目のサインインフォーム。すべてCSSのみを使用します。"body.signIn div＃mainMenu form.signIn {display：none;}"

私のとりとめのないものの少なくともいくつかがお役に立てば幸いです。そしてあなたのプロジェクトであなたが最高になることを願っています！

于 2008-11-19T01:08:34.817 に答える
4

CSS の編成を支援するために、さまざまなことができます。例えば：

  • CSS を複数のファイルに分割します。たとえば、レイアウト用に 1 つのファイル、テキスト用に 1 つ、スタイルのリセット用に 1 つのファイルを用意します。
  • CSS コードにコメントを付けます。
  • なぜ目次を追加しないのですか？
  • 960.gsなどの CSS フレームワークを使用して開始してみてください。

それは本当に個人的な好みにかかっています。ただし、役立つリンクがいくつかあります。

于 2008-10-08T14:46:07.490 に答える
3

CSS は、HTML が参照できる「ツールキット」を作成するものと考えてください。次のルールが役に立ちます。

  • 名前をclass明確にします。ほとんどの場合、これは予測可能な方法でプレフィックスを付けることを意味します。たとえば、 ではなくleft、 のようなものを使用しますheader_links_object2_left。

  • ページ上にオブジェクトの 1 つしか存在しないことがわかっている場合にのみidではなく使用します。繰り返しますが、明確にしてください。class id

  • 副作用を考慮します。marginand padding、floatand などのルールclearはすべて、他の要素に予期しない結果をもたらす可能性があります。

  • あなたのスタイルシートが私の数人の HTML コーダーに使用される場合は、あなたのスキームに合わせて HTML を書く方法についての簡潔で明確なガイドを書くことを検討してください。シンプルにしないと、退屈してしまいます。

そしていつものように、複数のブラウザー、複数のオペレーティング システム、さまざまなページ、および考えられるその他の異常な条件下でテストしてください。

于 2008-10-08T14:55:00.780 に答える
2

すべての CSS 宣言を、ドキュメント階層に配置されるのとほぼ同じ順序で配置することは、一般的には良いことです。これにより、将来の読者はどの属性が継承されるかを簡単に確認できます。これらのクラスはファイルの上位にあるためです。

また、これはあなたの質問とは直交していますが、CSS ファイルを読んですべてがどのように変化するかを確認するのに役立つツールを探している場合は、Firebugを十分にお勧めできません。

于 2008-10-08T14:44:06.810 に答える
2

私がこれまでに受けた組織に関する最高のアドバイスは、An Event Apart でのプレゼンテーションから得たものです。

すべてを 1 つのスタイルシートに保持すると仮定すると、基本的に 5 つの部分があります。

  1. * {margin: 0; padding: 0}リセットのルール (ルール、Eric Meyer のリセット、または YUI のリセットと同じくらい単純かもしれません )
  2. 基本的な要素のスタイリング; これは、段落の基本的なタイポグラフィ、リストの間隔などです。
  3. ユニバーサル クラス。私にとってこのセクションには、通常、、（私はセマンティックが 80% しかない）などの内容が含まれてい.errorます.left。
  4. ユニバーサル レイアウト/ID; #content、#header、またはページを切り取ったもの。
  5. ページ固有のルール; 1 ページまたは数ページだけ既存のスタイルを変更する必要がある場合は、一意の ID を上に貼り付け (通常は body タグが適しています)、オーバーライドをドキュメントの最後に投げます。

HTML fastで何かをモックアップする必要がない限り、CSS フレームワークの使用はお勧めしません。それらは肥大化しすぎており、セマンティクスが私にとって意味のあるものに会ったことがありません。時間の経過とともにプロジェクトで共有されるコードを把握するため、独自の「フレームワーク」を作成することをお勧めします。

他の人のコードを読むことは、まったく別の問題です。本当に恐ろしいCSSがいくつかあります。

于 2008-11-19T01:41:12.410 に答える
1

今年の警官ライン：それは異なります。

スタイリングに必要な量は？ほぼすべての要素の側面を変更する必要がありますか、それともほんの一部ですか?

このような情報を得るには、CSS Zen Garden & A List Apartがお気に入りです。

于 2008-10-08T14:43:02.240 に答える
1

2 つの世界があります。

  1. The human editor perspective:CSS が最も理解しやすいのは、明確な構造、適切な書式設定、冗長な名前、レイアウト、色、および組版に構造化されている場合です...
  2. The consumer perspective:訪問者は、サイトがすばやく読み込まれ、ブラウザーで完璧に表示されると最も満足します。そのため、css は小さく、1 つのファイルにまとめられ (接続を節約するため)、すべてのブラウザーをサポートするための CSS ハックが含まれている必要があります。

CSS フレームワークから始めることをお勧めします。

CSSフレームワークのリストもあります...

次に、 CSS オプティマイザー(pe CSS Form.&Opti. )を使用して (ブラウザー用に) 整形します。

結果 (最適化されていない <-> 最適化) をYSlowで測定できます。

于 2008-10-08T14:47:13.853 に答える
1

整理整頓のためのその他のヒント:

  • 各宣言内で、固執する属性の順序を採用します。たとえば、通常、マージン、パディング、高さ、幅、ボーダー、フォント、ディスプレイ/フロート/その他をこの順序でリストし、次のヒントで読みやすくします。
  • 他のコードと同じように CSS を記述します: インデント! 単純に HTML のソース順に進むのではなく、CSS ファイルをスキャンして高レベルの要素を見つけてドリルダウンするのは簡単です。
  • 適切なクラス名を持つセマンティック HTML は、どのスタイルがどの要素に適用されるかを覚えるのに大いに役立ちます。
于 2008-10-08T15:36:09.527 に答える