1

なぜ人々はこの種の CSS や HTML を使用してページのスタイルを設定するのでしょうか?

<div class="page">
  <div class="page-left-column">
    <div class="page-left-column-container-box">
      <div class="page-left-column-container-box-element-header-wrapper">
         <h2>This is the header!</h2>
      </div>
    </div>
  </div>
</div>

上記のマークアップには、次のような CSS ルールが付随します。

.page-left-column-container-box-element-header-wrapper {
  color: red;
}

次のように書いてみませんか。

<div class="page">
  <div class="left column">
    <div class="container-box">
      <div class="element header-wrapper">
         <h2>This is the header!</h2>
      </div>
    </div>
  </div>
</div>

次に、CSS ルールを作成します (おそらく、すべてが必要なわけではありません)。

.page .left.column .container-box .element.header-wrapper {
  color: red;
}

私が見る限り、後者は最初のものよりはるかに優れています。.container-box .elementや などのルールを指定できるので、あちこちにコピペせずに CSS ルールを指定する方が簡単です.column .header-wrapper。私の意見では、これにより、ルール、コード、およびすべてがより保守しやすくなります。これの唯一の欠点は、CSS ルールを次のように記述.page .left.column .container-box .element.header-wrapperすると、セレクターが HTML の深い階層に依存するようになることです。ただし、page-left-column-container-box-element-header-wrapper階層にそれほど強い依存関係はないかもしれませんが、明らかに階層を変更すると、「偽の」クラス名を更新したくなるでしょう。

のようなクラス名を使用する唯一の理由page-left-column-container-box-element-header-wrapperは、おそらくもう少し「複雑な」セレクターを使用すると計算コストが高くなり、ブラウザーが遅くなるからです。これは本当ですか？私が見ていない他のプログラミング関連/技術的な利点はありますか? それとも、複数の要素、クラス、および ID を使用するルールが複雑になっているだけですか?

4

1 に答える 1

4

どちらも CSS の悪い例です。

次のような CSS:

.page .left.column .container-box .element.header-wrapper

具体的すぎるため、再利用性は最小限です。

次のような CSS:

.page-left-column-container-box-element-header-wrapper

言葉が長すぎます。名前を次のように簡単に短縮できます。

header-wrapper

つまり、コードの他の場所で非常に簡単に使用でき、ヘッダーをラップする要素の目的を簡単に識別できます。

CSS の特異性:

ID を「決して」使用しないなど、これらのリンクの内容の一部に完全には同意しないことに注意してください。

簡単に言えば、人々がこれらの方法を使用するのは、ほとんどの場合、それ以上のことを知らないからです。

命名規則は非常に主観的なトピックですが、個人的には、CSS クラスと ID は 10文字ではないにしても、常に 20 文字未満にする必要があると考えています。しかし、それらは理解できるはずです。例えば：

.pg-fl-r

貧しいです...一方：

.float-right, .page-float-r

などはより良い方法です。(これは単なる例です。クラスにそのような名前を付けることは必ずしもお勧めしません。)

于 2012-09-24T17:11:17.080 に答える