5

私は自分のサイト用に一連のボタンを作成していますが、専門的な洞察が必要です。

CSS の肥大化を減らすために、ボタンをさまざまな色 (例: .button.blue ) にサブクラス化したいと考えています。

次のような問題は今後発生しますか? (.blue だけのクラスを作成しないと仮定して)代わりに .button.button-blue のようなものを使用する必要がありますか?

.button {
  display:inline-block;
  padding: 9px 18px;
  margin: 20px;
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  background: #FFE150;
}
.button.blue {
  background: #49b8e7;
  border:1px solid #54abcf;
  border-bottom:1px solid #398fb4;
  color:#FFF
  text-shadow: 0 1px 0 rgba(255,255,255, 0.5);
}
.header{
  height: 50px;
}
.header.blue {
  background: blue;
  color: #fff;
}
4

4 に答える 4

8

マルチクラスでそこにあるものは、それらが次のように機能することを望んでいると仮定すると、正常に機能します。

<div class="button blue">
Will use .button and .button.blue
</div>

<div class="button">
Will only use .button
</div>

<div class="header blue">
Will  use .header and .header.blue
</div>

<div class="header">
Will only use .header
</div>

<div class="blue">
Will use neither of the .blue declarations because it doesn't contain header or button.
</div>
于 2012-02-09T15:00:21.213 に答える
1

.button.blue のようなセレクターは、.button.blue というクラスではなく、「blue」と「button」の両方をクラスとして持つ要素を実際に選択します。http://www.w3.org/TR/CSS21/selector.html#class-htmlを参照してください。

リストした .button.blue スタイル ルールを使用できますが、HTML を再配置して、 のようなものにする必要があります<button type="button" class="button blue"/>。<input type="submit">ただし、セレクターで使用するにはボタン (または など) で十分であるため、ボタン クラスを実際に持つ必要はありません。単純な CSS ルールを作成できます。button.blue, input[type=submit].blue{}

于 2012-02-09T14:51:00.600 に答える
0

テーマにしたい色を適用してクラスを結合します。

HTML:

<input type="text" class="text-field-required default" .../>
<select class="autocomplete-drop-down blue">...</select>
<a href="#" class="button-link green" .../>

CSS:

.text-field-required {
    //component css theme without colors
}
.default {
    //default color css theme for any component
}
.blue {
    //blue css theme for any component
}
.green {
    //green css theme for any component
}
于 2012-02-09T15:08:34.330 に答える
0

button.blue十分のようです。

2 つの唯一の違いは<button class="button blue">、またはを使用するかどうかです<button class="button button-blue">。

絵を青で複製する必要さえありません...次のようなことができます：

.button
{
// button style
}

.header
{
// header style
}

.blue
{
   background: blue; 
   color: #fff; 
}

もちろん、それぞれに青いクラスを追加すると。(<div class="header blue">と<button class="button blue">)

于 2012-02-09T14:55:12.273 に答える