sassやpostcssを採用した場合従来はネストをすべてに使っていたが、 最近は全く使わないないしは、コンポーネント化したい場合のみつかわないというのが主流でしょうか？

Question

sassやpostcssを採用した場合従来はネストをすべてに使っていたが、
最近は全く使わないないしは、コンポーネント化したい場合のみつかわないというのが主流でしょうか？

また、ネストを使っても子孫セレクタにならないプラグインなどがあれば教えてください。

flocssなどを使う最近のCSS設計を採用する場合、ネストを使うと、子孫セレクタだらけになるのでネスト自体使わなくなってきているのでしょうか？
それとも、コンポーネント化の為に、コンテナーとコンテンツを分離したいCSSのみネストから外し、直下にきさいし、
分離する必要がない場合はネストを使うという形でしょうか？

・下記ソース
http://qiita.com/hbsnow/items/3193f7576cbec0a5765e より

なぜPostCSSを使うのか

自分がPostCSSを使う理由は変換の早さではなくて、SCSSやLESSの多機能性を求めていなかったことにあるとおもう。特に最近はJSXとか.vueとかPolymerなんかでCSSをコンポーネント化することが多くて、
まずネストは使わなくなるし、変数すら使わなかったりする。Polymerなんかは変数もmixinも自身の機能として提供されているしね。変数のプラグインで使うにしてもSCSSライクなものよりは
仕様通りのものを使ってくれていたほうがありがたいかなあとおもう。

前に似た質問をしたときは、3つまでのネストは使うという方の回答でしたが、
上記のような情報もあり、いろいろな方の現場の声を聴きたいです。

POSTCSSのネストのメリットはパットみどの要素のCSSかわかりやすいということだけですよね。
それ以上の詳細度があがり、コンテナーとコンテンツの分離ができないため、
コンポーネント化できず、再利用性が下がるデメリットのほうが大きいと思う場合は採用しないほうが良いでしょうか？

Answer 1

ネストを使っても子孫セレクタにならないプラグインなどがあれば教えてください。

sass ver3.3以上であれば、「@at-root」で記述した場所より上のセレクタのネストを解除することができます。

.foo {
  ....
  @at-root{
    .bar {...}
    .baz {...}
  }
}

このように記述した場合、コンパイル結果は以下の様になります。

.foo {...}
.bar {...}
.baz {...}

無駄に子孫セレクタを増やしたくない場合、このような記述をするというのもひとつの手かと思います。

こちらのブログに詳細の解説がありますので参考にしてはいかがでしょうか。

Comments

[退会済みユーザー]

ありがとうございます。
これはいいですね。
ただ私はpostcssを使っているので、ないかもしれないですね。
探してみます。