2

今日、私は「Help Class Style」で CSS をコーディングしようとしていますが、Twitter の多くの開発者は、それは悪い習慣だと言いました。

以下に例を示します。

<span class="et-margin-top-30 et-width-400 et-display-inline">
    <p class="et-common-frame-shadow et-inner-img-shadow">
        <img class="et-common-frame-img" src="img3.jpg"/>
    </p>
    <h3 class="et-margin-top-10 et-fontsize-26 et-fontweight-bold">foo</h3>
    <p class="et-margin-top-10">bar</p>
</span>

なぜそれが悪い習慣なのですか？.clear などのヘルパー クラスはいつ使用する必要がありますか?

4

2 に答える 2

5

CSSによるスタイリングの考え方は、コンテンツとスタイリングを分離することです。コンテンツは HTML であり、CSS はそれを視覚的に表示する方法に関する情報を提供します。一方を変更したい場合は、もう一方を変更せずに変更できます。

クラスet-margin-top-30に名前を付けることで、スタイリング情報を HTML に戻します。と書くこともできますstyle="margin-top: 30px"。結局、その要素に50ピクセルの余白が必要であると判断した場合は、CSSとHTML の両方を変更する必要があるためです。だからスタイル悪い。

むしろ、HTML 要素に機能別の名前を付けて (例: class="headline"、 または)、その見出しまたは行動を促すフレーズのスタイルclass="call-to-action"を CSS で記述する必要があります。後で変更したい場合は、CSS を編集するだけで変更できます。HTML を変更する必要はありません。

言うまでもなく、JavaScript を使用して要素を操作している場合document.getElementsByClassName('et-margin-top-30')、a) スクリプトと HTML 構造の意味を理解するのが非常に難しくなり、b)微調整するたびにHTML、CSS 、および Javascriptを変更する必要があります。要素の視覚的外観。その場合、わかりやすいクラス名を使用することが二重に重要になります。

于 2012-06-21T10:47:10.717 に答える
1

あなたがそこでやろうとしていることは恐ろしいように見えます。すべての異なるスタイリング属性のクラスがあるようです。HTML が読めなくなるだけでなく、ファイル サイズも大きくなります。

要素に 15 個のスタイルが「添付」されている場合はどうなるでしょうか。15クラスあるの？

また、これはレンダリングを遅くするだけだと思います（これは私が作ったばかりで、証拠がありません）。これらのすべてのクラスを検索する必要があるためです。

することに違いはありません<p style="color: red;"></p>。

于 2012-06-21T10:47:24.557 に答える