5

たとえば、どちらが優れているか:

方法 1 (クラスに個別に名前を付ける):

/* CSS */

.textbox-red, 
.textbox-green {
   padding: 10px;
   border: 1px solid #CCC;
   border-radius: 10px;   
}

.textbox-red { color: #900; }
.textbox-green { color: #3c3; }

/*HTML*/

<div class="textbox-red"></div>
<div class="textbox-green"></div>

また - - - - - -

方法 2 (チェーン クラス):

/* CSS */

.textbox {
  padding: 10px;
  border: 1px solid #CCC;
  border-radius: 10px;
}

.textbox.text-red { color: #900; }
.textbox.text-green { color: #3c3; }

/*HTML*/

<div class="textbox text-red"></div>
<div class="textbox text-green"></div>

2つの中でより良い習慣は何ですか?

4

4 に答える 4

5

私の意見では、モジュラー css を使用する必要があります。クラスをリンクする代わりに、クラスを結合することもできます。

/*CSS*/
.textbox {
  padding: 10px;
  border: 1px solid #CCC;
  border-radius: 10px;
}

.text-red { color: #900; }
.text-green { color: #3c3; }

/*HTML*/

<div class="textbox text-red"></div>
<div class="textbox text-green"></div>

そうすれば、テキストボックスなしで赤い背景が必要な場合に、赤と緑の色を再利用できます。このようにして、コードをより再利用でき、テキストボックスとテキストカラーの間の結合が緩くなります

于 2013-02-08T09:52:00.030 に答える
1

個人的には方法 2 を使用します。そうすれば、text-red または text-green を text-blue または text-yellow に簡単に交換でき、テキストの基本的なスタイルを維持できます。基本的に、方法 2 を使用すると、柔軟性と保守性が向上します。

于 2013-02-08T09:55:54.053 に答える
0

私の経験では、モジュラーアプローチはあなたに最も柔軟性を与えます。モジュラーcssパターンは、柔軟性が非常に重要なTwitterBootstrapでも使用されます。

于 2013-02-08T09:49:24.953 に答える
-2

このブラウザは 2 番目の方法をサポートしていないため、IE6 用のスタイルを作成する場合は、最初のほうがよいでしょう。

于 2013-02-08T09:46:57.123 に答える