1

私の最近のプロジェクトの 1 つで、特定のスタイルが同じ組み合わせで繰り返し発生することに気付きました。DRY の原則に従って、これらのスタイルを組み合わせる必要があります。優れた CSS スタイルに関して、どのオプションが優れていますか?

オプション 1
これらのスタイルを含むクラスを作成し、それを HTML の対応する要素に追加するだけです。

例

HTML では:

<a href='#' class="myClass">Link</a>

また

<ul class="myClass">
  <li>Item</li>
<ul>

CSS で:

.myClass {
  font-weight: bold;
  font-size: 14px;
  color: grey;
}

オプション 2
次の例のように、CSS でそのスタイルを必要とするすべての要素を単純に組み合わせます。

a,
ul {
  font-weight: bold;
  font-size: 14px;
  color: grey;
}
4

2 に答える 2

2 
.myClass {
  font-weight: bold;
  font-size: 14px;
  color: grey;
}

最高です ...

.myclass {
  font-weight: bold;
  font-size: 14px;
  color: grey;
}

さらに優れています（小文字）

このように、DOM エンジンは、ドキュメント内のすべての a およびすべての ul タグにまたがってスタックする必要なく、要素に到達します。

于 2013-01-28T23:50:50.093 に答える
1

私はしばしば同じ問題に遭遇し、オプション 2を選択することを学びました。

まず、両方のスタイルが接続されている理由を自問する必要があります。スタイルを設定している 2 つの要素は、常に同じようにスタイル設定されることを意図しているのか、それともスタイルが同じであるという偶然の一致なのか?

たとえば、リンクを灰色ではなく青色にすべきだと判断した場合、UL リストも青色にしてもよろしいでしょうか? つまり、リンクとリストは関連していますか? 彼らはいつも同じに見える必要がありますか？それとも、たまたま、この特定の状況で、それらが同じであるということですか?

また、クラスの名前にも注意する必要があります。

  • のよう.boldGreyに呼ぶと、クラス名が内容ではなくスタイルを記述しているため、間違っています。
  • スタイルではなくコンテンツを説明しているため、 のような.secondary名前を付ければ、うまくやっています。その場合は、オプション 1 を使用しても問題ありません。

しかし、最終的には、常にオプション 2 を選択します。同じスタイルを複数の要素に接続しても、気が変わった場合は後で簡単に変更できます。私は通常、CSS の上部 (リセットのすぐ下) に、同じプロパティを共有する要素のリストを配置します。次に、各要素に特定のスタイルを追加します。

私のウェブサイトからの例:

time, code, figcaption {
  background:#f5f5f5;
  border:1px solid #e9e9e9;
  border-radius:2px;
  color:#93a1a1;
  font-size:11px;
  padding:0 4px 1px;
  white-space:nowrap;
}

次に、以下に、たとえば の追加のスタイリングをいくつか示しますcode。

code {
  font-size:12px;
  position:relative;
  top:-2px;
}

これらの 3 つの要素をスタイリングしているときに、それらを同じように見せたいことに気付きました。しかし、まったく同じではありません。そこで、私は彼らの共通点をすべて再編成し、特に彼らが持っていたものを特定しました。

そのために単一のクラスを使用できたでしょうか？多分。しかし、私はそれをどのように呼んだでしょうか？.greySmallBordered? .littleBlocks? .tag探していますか? スタイリングではなく、コンテンツのみを説明する名前を思いつくのは本当に難しいです。

したがって、通常、セレクターに複数の要素をリストします。理由は次のとおりです。

  • これは、HTML のコンテンツを CSS のスタイリングから分離しておくための最良の方法です。
  • 各要素に追加のスタイルを指定するのに役立ちます
于 2013-01-29T00:09:06.407 に答える