1

Web サイトでインライン CSS を使用するのはよくないと聞きました。

例を次に示します。

クラス mycss があるとしましょう

.mycss { margin: 10px 0 11px 12px; text-align: left; color: red; }

そして、私はそれを私のdivの1つで使用します

<div class="mycss">DIV ONE</div>

DIV TWO で同じスタイルを使用したい場合、マージンは 0 に設定されます。

<div class="mycss" style="margin: 0;">DIV TWO</div>

これは悪い習慣ですか？

別の例を編集して、より明確にします。

私は5つのDIVSを手に入れました

 <div class="mycss">ONE</div>
 <div class="mycss">TWO</div>
 <div class="mycss">THREE</div>
 <div class="mycss">FOUR</div>
 <div class="mycss">FIVE</div>

クラス mycss があるとしましょう

.mycss { margin: 10px 0 11px 12px; text-align: left; color: red; }

ここで、5 つの DIVS すべてに異なるマージンを持たせたいと考えています。それぞれにさらに5つのクラスを作成する必要がありますか? または単にインラインCSSを実行しますか?

それは次のようになります:

A.

 .marginfordivone { margin: 1px 2px 3px 4px }
 .marginfordivtwo { margin: 2px 4px 6px 6px }
 .marginfordivthree { margin: 8px 5px 1px 3px }
 .marginfordivfour { margin: 1px 2px 2px 2px }
 .marginfordivfive { margin: 1px 4px 8px 4px }.


 <div class="mycss marginfordivone">ONE</div>
 <div class="mycss marginfordivtwo">TWO</div>
 <div class="mycss marginfordivthree">THREE</div>
 <div class="mycss marginfordivfour">FOUR</div>
 <div class="mycss marginfordivfive">FIVE</div>

B.

 <div class="mycss" style="margin: 1px 2px 3px 4px">ONE</div>
 <div class="mycss" style="margin: 2px 4px 6px 6px">TWO</div>
 <div class="mycss" style="margin:  8px 5px 1px 3px">THREE</div>
 <div class="mycss" style="margin: 1px 2px 2px 2px">FOUR</div>
 <div class="mycss" style="margin: 1px 4px 8px 4px">FIVE</div>

AまたはB

4

4 に答える 4

2

はい、これは悪い習慣です。

単純に 2 つの異なるクラスを作成してみませんか?

.mycss { text-align: left; color: red; }
.mycss2 { margin: 10px 0 11px 12px; }

<div class="mycss mycss2">DIV ONE</div>
<div class="mycss">DIV TWO</div>

更新（更新された質問に合わせて）

css クラスをオーバーライドするためにインライン css を使用するべきではありません。別のクラスを追加するだけです（私が示したように）。5 つの異なるマージンがある場合、なぜそれを行っているのか自問する必要があります。一般に、margin-left、margin-right、margin-top、および margin-bottom を個別に使用して、実装ではなく意図によって定義される css クラスを作成できるはずです。例えば：

.narrowSideMargins { 
    margin-left: 2px; 
    margin-right: 2px; 
}
.wideSideMargins { 
    margin-left: 10px; 
    margin-right: 10px; 
}

もちろんマージンの任意の構成を選択できますが、実際の現在のプロパティではなく意図によってクラスを定義することを覚えておくことが重要です。これは、元の（および現在の）質問とbazmegakapaのコメント（方法論的に）の両方に回答します。

于 2013-11-07T06:45:31.927 に答える
1

はい、それは悪い習慣になります。ほとんどの CSS スタイルが共通していて、1 つまたは 2 つのスタイル プロパティを変更したい場合は、次のようにします。

1) 最も一般的なスタイル プロパティのクラスを作成します。2) 個々の変更ごとに異なるクラスを作成します。

  .mycss { text-align: left; color: red;}
    .mycss2 {margin: 10px 0 11px 12px; }
.mycss3 {margin: 0px}
于 2013-11-07T06:55:03.137 に答える
0

異なる 2 つのクラスを次のように記述できます。

CSS:

.mycss-1 { margin: 10px 0 11px 12px; text-align: left; color: red; }

HTML:

<div class="mycss">DIV ONE</div>

CSS:

.mycss-2 { margin: 0; text-align: left; color: red; }

HTML:

<div class="mycss-2">DIV TWO</div>

次のように最適化するだけです。

CSS:

.mycss{ text-align: left; color: red; }
.margin-1{ margin: 10px 0 11px 12px; }
.margin-2{ margin: 0; }

HTML:

<div class="mycss margin-1">DIV ONE</div>
<div class="mycss margin-2">DIV TWO</div>
于 2013-11-07T06:51:10.017 に答える