7

こんにちは、Web サイトを作成しています。CSS の書き方について少し混乱しています。同じスタイルに異なるクラスを使用する必要があるかどうか、スタイル固有のクラスを作成してどこでも使用する必要があるかを知りたいです...例を使用しましょう...

最小の高さを指定したいとします。これを使用する必要があります。

.div1,.div2,.div3{min-height:335px;}

HTML を次のように使用します。

<div class="div1">afads</div>
<div class="div2">fads</div>
<div class="div3">fads</div>

または、次のようにする必要があります: CSS:

.minheightstyle{min-height:225px;}
.leftitems{float:left;}
.red{background-color:red;}
.blue{background-color:blue;}
.grey{background-color:grey;}

HTML:

<div class="minheightstyle leftitems red">my text in red bg</div>
<div class="minheightstyle leftitems blue">my text in blue bg</div>
<div class="minheightstyle leftitems grey">my text in grey bg</div>

どの方法が最適化された方法であり、どの方法を使用する必要があるかは重要です。

4

6 に答える 6

2

どちらも同じように機能するため、技術的には問題ありません。

ただし、目標は、css を明確で再利用可能にし、理想的には最小限にすることであり、これを示すためにセレクターとルールをターゲットにする必要があります。

背景や色などの特定のルールは、通常、特定の要素にのみ適用されます。そのため、ターゲットにしたい要素の ID に適用する必要があります。

<div id="header">XXX</div>

#header {
    background-color: red;
    color: #000;
}

注意: ID は一意である必要があり、ページ上の 1 つの要素にのみ適用されます。クラスは、複数の要素を対象とする場合に使用されます。

多数のアイテムにルールを適用する場合は、クラスを使用する必要があります。clearfix多数の要素に適用されることが多いクラスなど、2番目の例と同様にルールが適用される場合がたくさんあります。たとえば、他のものは少し不要かもしれません。最初の例では、親ラッパーをターゲットにして、次のようなルールを設定することをお勧めします。

.parent > div {
    min-height:335px;
}

結局のところ、多くの場合個人的な好みですが、コードはできる限り整頓されている必要があることを覚えておいてください。

私がコードを書く際に常に心がけているのは、「これを別の開発者に渡したら、何が起こっているのか一目で理解できるか」ということです。

別の開発者がコードを追加または変更する場合、HTML を編集するよりも CSS を編集する方がはるかに簡単です。これは、CMS や、コードをさまざまなテンプレート ファイルに分散するものを使用している場合に特に当てはまります。 . そのため、HTML 内に追加を開始した場合red、leftitems開発者は、特定の項目を赤くしたり左揃えにしたくないと判断した場合、現在のルールを上書きする必要があり、すぐに混乱する可能性があります。

これを読んでいる上級ユーザーには、 CSSではなく SCSS を使用することをお勧めします.

それが役立つことを願っています!!

于 2013-06-13T08:51:30.947 に答える
2

クラスの名前は、見た目ではなく、何を表しているかに基づいて命名します。したがって、クラスredは悪い考えです。すべての赤いテキストを実際には青にする必要があると判断した場合、次のような css になる可能性があります。

.red {
    color: blue;
}

これは意味がなく、実際にはスタイリングがはるかに困難になります。

于 2013-06-13T08:52:36.873 に答える
1

まず第一に、「minheightstyle」のような視覚的な意図を示唆する名前を使用して CSS クラスにタグを付けないでください。CSS の背後にあるアイデアの一部は、コンテンツとスタイルを分離することです。これは、表示するクラス名で無効にしようとする実証済みの利点です。したがって、これが最初の経験則です。要素にタグを付けたい場合は、スタイリングのためだけにタグを付けるのではなく、その要素がコンテンツに関して他の要素とどのように異なるかから手がかりを得てタグを付けます。たとえば、3 つdivの で、すべてが似ている場合、それらを親の子として選択できるはずです。たとえば、次のようになります。

#parent > div {
    min-height: 300px;
}

これらのいずれかが (たとえば) 選択されたメニュー項目である場合、「選択された」クラスを指定し、それに応じてスタイルを設定できます。

.selected {
    min-height: 300px; }

一般に、スタイルについて考えるのではなく、セレクターを設計するときは構造について考えるようにしてください。これはおそらく、より単純な手段に頼って破棄するアドバイスの一部ですが、今日 Web デザインに真剣に取り組んでいる場合、これが最善の投資であることを保証します。コンテンツとスタイルの分離は絶対に不可欠であり、今日の HTML と CSS だけでなく、他の分野にも関連しています。

そして第二に、あなたが書いたルールはブラウザーによって奴隷的に適用されることを覚えておくべきです。つまり、あなたのスタイルシートでオーバーライドされる要素は、CSS の仕様に従って、それが何であれ、そのスタイルを再計算する必要があります。つまり、(たとえば)次のセレクターですべての要素のスタイルをオーバーライドすることにした場合:

* { 
    margin: 0; padding: 0; }

..ブラウザが独自の小さなマージンとパディングをあちこちに適用する間の小さな矛盾にうんざりしていると判断し、ページのマージンとパディングを厳密に制御したい場合は、ブラウザがバインドすることを知っておく必要があります。上記のルール (その場でスタイルを計算するか、後でそれを延期するか) を各要素に適用します。これを知っていると、上記のルールをいくつかの要素だけに適用する方が良いかどうかを判断する必要があります。通常、同じ理由が背景画像にも当てはまります。背景色を要素の子に適用するのと、単純に要素自体に適用するのとではどちらがよいでしょうか (結果は視覚的に区別できないことがよくあります)。

 <div id="menu">
      <div>Apples</div>
      <div>Oranges</div>
      <div>Bananas</div>
 </div>

 #menu > div {
      background-color: brown;
 }

また

 #menu {
      background-color: brown;
 }

当面の問題に関しては、経験則として、マークアップとスタイルの両方を含めてコードを最小限に抑えることをお勧めします。子の同一のクラス名を取り除きます。CSS は、クラス名なしでこれらを完全に選択できます。

<div id="foo">
    <div>my text in red bg</div>
    <div>my text in blue bg</div>
    <div>my text in grey bg</div>
</div>

#foo > div
{
    min-height: 300px;
    float: left;
}

#foo > div:nth-child(1)
{
    color: red;
}

#foo > div:nth-child(2)
{
    color: green;
}

#foo > div:nth-child(3)
{
    color: blue;
}

もちろん、上記のものを選択する方法は他にもありますが、CSSが実際にどのように機能するかの知識を適用してみてください。詳細からの抽象化は良いことですが、最適化にはその詳細に関する知識が必要です。マークアップをデザインするときは、スタイルについて考えないようにしてください。作成者 (あなたの) スタイルが常に無効になるかのように入力するか、コンテンツを念頭に置いて要素にタグを付けて入力してください。次に、CSS を適用し、レビュー (「ラッパー」が必要になることがよくありますが、最近の Web 開発者の生活ではこれが一般的です) を繰り返します。ただし、コンテンツとスタイルを別々に保つようにしてください。一方を変更しても、他方への影響は最小限に抑える必要があります。

于 2013-06-13T09:42:21.520 に答える
0

すべての div が同じ css スタイルを持つ必要がある場合は、1 つのクラスを使用し、すべての div に複数のクラスを使用する必要がない場合は、それをすべての div に渡します。

<div class="divv">afads</div>
<div class="divv">fads</div>
<div class="divv">fads</div>r code here

.divv{最小高さ:335px;}

于 2013-06-13T08:52:52.537 に答える