5

最近、HTMLをよりクリーンにするCSS構造を使用していますが、これに何か問題があるかどうかはわかりません。

使用する代わりに：

.top { //properties }

.top-wrapper { //properties }

.top-logo { //properties }

そしてHTMLの場合：

<div class="top">
    <div class="top-wrapper">
        <a href="" class="top-logo">Logo</a>
    </div>
</div>

私は実際に次のようにコーディングしています：

.top { //properties }

.top .wrapper { //properties }

.top .wrapper .logo { //properties }

そしてHTMLの場合：

<div class="top">
    <div class="wrapper">
        <a href="" class="logo">Logo</a>
    </div>
</div>

これを行うのは間違っていますか？

4

6 に答える 6

4

間違いではありませんが、セレクターが多いほど、スタイルの特異性が高くなります。特異性の詳細については、http：//www.w3.org/TR/CSS21/cascade.html#specificityを参照してください。

あなたの例を想像してみてください

.top .wrapper .logo { font-size: 10px; }

これに続いて：

.logo { font-size: 20px; }

2番目の<a class="logo">宣言で20pxと指定した場合でも、フォントサイズは10pxになります。

于 2012-11-30T13:16:11.200 に答える
1

いいえ。

2番目のコードが実行しているのは、「クラスを持つ要素内のすべての要素をターゲットにし、topクラスを持ち、そのwrapperようなプロパティを適用する」ということです。

一方、最初のコードはtop-wrapper、親クラスに関係なく、クラス（またはその他）を持つ要素のみを対象としています。

于 2012-11-30T13:15:39.470 に答える
1

これを行うのは必ずしも「間違っている」とは限りません。それは機能します。使いやすいと思ったら、ぜひ行ってみてください。

ただし、このアプローチにはいくつかの欠点があります。たとえば、CSSファイルが大きくなり、Webサイトを表示するすべての人のダウンロード時間が長くなります（この影響は無視できる場合があります）。

また、別の要素でのスタイルを再利用する場合は、top-wrapperその要素をtopクラスのあるdiv内に配置する必要があり、HTMLが乱雑になるという問題もあります。

（上記の点の詳細については、OOCSSを参照してください）

結局のところ、どのアプローチにもメリットとデメリットがあります。このアプローチに本当に満足していて、それがうまく機能している場合は、それを使い続けてください。

編集： 2番目のアプローチでは、最初のアプローチよりもブラウザのレンダリングに時間がかかることにも注意してください（ブラウザは1つではなく複数の条件をチェックする必要があります）。詳細については、この質問を参照してください

于 2012-11-30T13:16:30.063 に答える
0

その指定されたクラスをどのように使用するかによって異なります

.logo { //general properties  }


.top .wrapper .logo { //specific propery to top wrapper properties that overrides .logo }

.bottom .wrapper .logo { //specific property to bottom  wrapper that overrides .logo }

HTML

<div class="top">
    <div class="wrapper>
        <a href="" class="logo">Logo</a>
    </div>
</div>

 <div class="bottom">
    <div class="wrapper>
        <a href="" class="logo">Logo</a>
    </div>
</div>

一般的に、それはより良いです

于 2012-11-30T13:17:28.147 に答える
0

間違いではありませんが、10レベルのネストがあると、冗長になり、少し遅くなる可能性があります。.logoとの両方.wrapper .logoがスタイル設定されている場合、結果のデバッグも難しくなる可能性があります。

一方で、またはで.button見た目が異なると便利な場合があります。一般に、特定のユースケースで意味のあるものを使用します。.content.menu

于 2012-11-30T13:18:32.660 に答える
0

ここでは正しいことも間違っていることもありません。チームに所属しているかどうか、そして何があなたにとって意味があるかは、すべてが構築しているサイトによって異なります。

個人的には、htmlが以前よりもクリーンになったとは思いませんが（この小さな例では）、CSSの特異性が高まり、悪影響を与える可能性があります。

私は今、「なぜこの要素をこのようにスタイル設定したいのですか？」と自問します。継承が原因の場合もあれば、特定の領域で発生する特定のケースの場合もあります。使用する例は継承の良い候補のようですが、サイトの残りの部分を見ると、別の結論につながる可能性があります。

私の知る限り、長いクラス名を追加しても、パフォーマンスが大幅に低下することはありません。唯一の影響はわずかであり、目立たない可能性が高いと思います。本当に実装に依存しています

さらに、htmlを「読んでいる」場合はtop-logo、のようなクラス名を持って読む方が理にかなっている場合があります。そうでない場合は、適切な祖先を探す必要があります（適用できる祖先が複数ある可能性があることに注意してください）。

私はOOCSS/BEM方式（もっと多くのリソースをグーグルで検索してください...）に移行するのに忙しいです。将来のメンテナンスが容易になると信じているだけでなく、チーム環境内での方が理にかなっていると思います。 。これらは、「classitis」または「乱雑な」htmlにつながる可能性のあるアプローチです。私はそれを気にせず、サイトが大きいほどこれが理にかなっていると思います。4ページのサイトを作成している場合は、気にしないでください。

しかし、これは私にとってはうまくいき、あなたにとってはうまくいかないかもしれません。だから私は元の声明に戻ります、ここに正しいことも間違っていることもありません:)

于 2012-11-30T13:27:25.383 に答える