CSSのネストされたIDは適切ですか？

Question

私はこの問題について私自身の意見を得ようとしてきましたが、できなかったので、尋ねることに決めました。

htmlのidはページ上の一意の要素を表すために作成されていることはよく知られているようですが、私の経験では、ページ上のユニークな要素の量は通常、 。さらに、ページ上の多くのユニークな要素が入れ子になっています。

のは、このような単純な構造を見てみましょう：

：それはこのコードの平和をスタイリングするために来るとき、あなたは一般的な二つのアプローチ（私はSCSSを使用していますので、例である）を持っている

#content 
    form#search-filters 
    #datepicker 
    #search-results 

を

1. 階層的に整理します。平野宣言

    
   #content { 
       columns(8, 12); 
   } 
   #search-fiters { 
       @include search-filters; 
   

そして、私の意見から、それはすべてのロジックに対して何らかの形だが、最初の方法でそれを持っている気クーラーであると

 
#content { 
    columns(8, 12); 
    #search-filters { 
    @include search-filters; 
     etc. 

移動します。

上記の例のように、＃search-filtersブロックの内容についても問題は解決しません。たとえば、フィルタをホストしているフォームの各要素にIDを生成したRailsの足場を使用し、そのIDを参照してスタイリングを提供したいとします。 要素はユニークで、検索フィルタのミックスインを拡張する任意の形式で一意であることがわかります。だからあなたはそれにidを持たせたい。 しかし、論理的に一貫するクラスを与えなければなりません。

この問題についてご意見はありますか？

P.S.私はこれらの2つのケースでパフォーマンスの違いがあるかどうかについて仕様を読んでみましたが、何も言わない： http://www.w3.org/TR/css3-selectors/#class-html

Answer 1

一般的に、ネストされていないIDセレクタとクラスセレクタを使用すると、レンダリングのパフォーマンスが最も高くなります。 Googles Optimize browser renderingの記事でこれを詳細に読むことができます。

さらに、ネストされたCSSセレクタがないと、specificityが低くなり、特定のケースで簡単に上書きできるようになります。

扱いやすいスタイルのサイトでは、これは問題ではないかもしれません。特に、他のスピードの側面も正しく処理すると、put styles before scriptsのようになります。そのような場合は、読みやすくするためにネストされたスタイルを使用することをお勧めします。

Answer 2

ネストIDセレクタはCSSスタイルをより速くブラウザレンダリングの視点。

また、既にIDを持っているので、そのIDだけを使用すると、セレクタが長いチェーンではなく、CSSを読みやすくなります。

要素がページに沿って位置を変更する必要がある場合や、削除して後で別の位置に作成し直して別のセレクタが必要な場合は、同じ要素を参照するさまざまなスタイルを使用する予定です。この場合、ネストされたセレクタを必要とするかもしれません。それ以外の場合は、その必要はありません。