2016-06-28 4 views
0

私の質問はsassまたはscssの入れ子についてです。読みやすさの観点からは、セレクタを嫌なことに他のセレクタの中に入れ子にすることは良いことですが、それは私たちがやらなければならないものですか?私はscss-lintを実行すると、深さの入れ子になるいくつかのエラーが発生するので、私はちょっと混乱しています。私はいくつかの記事を赤くして、今私は、3つ以上のルールを別のものの中に入れ子にするよりも深く進むべきであることを知っています。私は(ネスティングなし)ちょうどこのようSASSの私のルールを記述する場合はsassを使用する場合、他のセレクタのセレクタを常にネストする必要がありますか?

  1. は、何か問題があります:

    .MY-クラス ...

    だから私は2つの質問があります代わりに、そのような書き込みの

header 
    nav 
     .myclass 
  1. なぜあなたは巣の中に入れ子にする必要があるのか​​、入れ子の利点は何ですか?私はそれがルールを無効にするのに良いことを知っていますが、もし私がそれを入れ子にする必要がなければ?私はすべての答え、またはさらに詳細に私の質問を説明するいくつかの記事へのリンクを感謝します。

答えて

1

実際にはを避けるべき理由がない場合は Sassの入れ子セレクタを避けてください。なぜネスティングをより選択しなければならないのかについては、Avoid Nested Selectors for more Modular CSSBeware of Selector Nesting in Sassを参照してください。

あなたのやっていることは機能的に入れ子に相当しますが、あなたの意図とは異なるときには、改行と字下げをフォーマットして入れ子にすることは避けてください。

header 
    nav 
    .myclass {...} 

header { 
    nav { 
    .myclass {...} 
    } 
} 

両方の農産物:

header nav .myclass {...} 

のでscss-lintがあなたの書式に巻きトリップ取得する場合でも、それはあなたが、とにかくやっているしたいおそらくない何かです。また、ネスティングやセレクタの深さに関心がない場合は、disableまたはoverrideと入力してください。

+0

ヘッダセレクタとnavセレクタの下にプロパティがない場合、2つのトップの例で示したように、私のCSSセレクタを書かないでください。代わりに、第3の例に示すのと同じ方法で記述する必要があります。私はネイティブスピーカーではありませんが、あなたが私が意味するものを得ることを願っています。 –

+0

CSSを管理するための現行の規則では、不要な複雑さを引き起こすため、セレクタの長さ(またはネスティング)を最小限に抑えることが推奨されています。 BEMや他の同様のアプローチでは、命名規則に基づいてこれを扱います。したがって、 'header nav .myclass'をターゲットにする代わりに、クラスにユニークな意味論名を与え、それをターゲットにします。それは '.myclass'かもしれないし、' .header-nav__element-name'かもしれない。優れたCSS規約を扱うことに興味があれば、http://sass-guidelin.esとhttp://cssguidelin.esをチェックしてください。 – jwfrench

関連する問題