postcssのネストを使うと、 子孫セレクタ だらけになってしまいます

Question

postcssのネストを使うと、
子孫セレクタ だらけになってしまいます

レンダリングの速度再利用性を考えると子孫セレクタを使わないべきですが…
現場ではどのように対処していますか？

本題ですが、postcssのネストですと、子孫セレクタを使わないように設定する、
ないしはセレクタは始めと最後のみにするということはできないのでしょうか？

そうしないと場所に依存するし、レンダリングの速度も下がりますよね

一番良いのはクラス名をつけて子孫セレクタを使わせないことですが、
そのようにしたい場合は使わないか最後に自分で修正するしかないのでしょうか？

Answer 1

子孫セレクタに関して無限にネストすることが出来ますが、管理の問題上3つネストが限界にしてます。
むしろそれ以上ネストするようなcssの設計 or デザインならデザインや仕様を見直したりします。

また、レンダリングの速度再利用性に関しては、あまり気にしなくていいと思います。
むしろ、「パフォーマンス < 人間の管理のしやすさ」だと思います。

理由は、機械の進化の速度はムーアの法則ではありませんが、以上なほど早く、人間の成長速度を圧倒的に凌駕しています。

なので、パフォーマンスを気にしすぎて人間がcssを管理できなくなってしまうことが考えられます。
人が稼働できる時間は限られているので、パフォーマンスを気にしすぎて運用コストがかさまないように、管理の氏やすさを重視するようにしています！

Comments

[退会済みユーザー]

いつもありがとうございます。

>>>
また、レンダリングの速度再利用性に関しては、あまり気にしなくていいと思います。
むしろ、「パフォーマンス < 人間の管理のしやすさ」だと思います。

CSSのタグ名を入れないなどのレンダリング速度の差は、JSのフックをIDにするなどに比べると、
ほぼ意味がないというアンチな意見もありますが、クラや現場の認識はどうですか？
塵も積もれば山となるで結構な差になりますでしょうか？

ただ現場の認識は速度よりも、CSS設計の教科書のような保守性管理性を考えた、FLOCCSSの概念OOCSSの概念などのほうが
よほど実質的価値があり大事ということですね。
ただクラはまったく評価しないという悲しい現実もあるでしょうか？

[MasakazuFukami]

> CSSのタグ名を入れないなどのレンダリング速度の差は、JSのフックをIDにするなどに比べると、
ほぼ意味がないというアンチな意見もありますが、クラや現場の認識はどうですか？
塵も積もれば山となるで結構な差になりますでしょうか？

ちりも積もればの話ですが、正直cssに関して言えば相当の量を書いていて、リファクタリングも何度も何度もやっていますが、全く気にしたことがありません。
そのくらい初期レンダリングの速度には関係ないと思います。
mobileのほうがそういう面では気にした方がいいかもしれませんが、それでも体感値として感じたことはありません。

> ただクラはまったく評価しないという悲しい現実もあるでしょうか？
すいません僕の知識不足なのですが、「クラ」とはなんでしょうか？？

[退会済みユーザー]

すいません変な省略でした。クラはクライアントのことです。
素晴らしい知識をお持ちでうらやましいくらいですよ！

[MasakazuFukami]

あ、クラはクライアント様のことなんですね！！

> 素晴らしい知識をお持ちでうらやましいくらいですよ！
いえ、僕なんてまだペーペーのペーペーです（笑）

クライアントには先程上で述べたように、パフォーマンスは顕著に差がでるものではないので気にしないでくださいということと、「パフォーマンス < 人間の管理のしやすさ」のほうが管理コストが安くなります（管理しやすい実装だと、追加実装や変更などの時に人的工数がかからないため）と伝えますねー。

大体そう言うと納得してくれますし、もし運用とか無視して速度重視とかなら管理しやすさにはあまり注力しないで作ったりします！

[退会済みユーザー]

それでは、CSSのセレクトにタグ名を入れないということも、あまり意味がないでしょうか？
拡張性の意味のみでしょうか？

[退会済みユーザー]

＞＞＞
クライアントには先程上で述べたように、パフォーマンスは顕著に差がでるものではないので気にしないでくださいということと、「パフォーマンス < 人間の管理のしやすさ」のほうが管理コストが安くなります（管理しやすい実装だと、追加実装や変更などの時に人的工数がかからないため）と伝えますねー。

なるほど、保守性に関心を持ってくれないクライアントが多いといわれていますが、
評価はされないものの、理解はしてくれるという感じですね。

全然ペーペーではないと思います。いつも勉強になっています。

[MasakazuFukami]

そう言っていただけて光栄ですー！

[退会済みユーザー]

本題ですが、postcssのネストですと、子孫セレクタを使わないように設定する、
ないしはセレクタは始めと最後のみにするということはできないのでしょうか？

[MasakazuFukami]

んーーーどうなんでしょう。。。

おそらく書き方でなんとかなると思いますが。。。

[退会済みユーザー]

つまり、子孫セレクタを使うとコンテナーとコンテンツが分離できないのでやめたほうが良いという場合は、一切ネストを使わないということでしょうか？
それしかないですよね。
勝手に使われてしまうので。

はじめと最後だけの子孫セレクタにしたい場合は、真ん中のCSSだけネストの外に出すのでしょうか？
順番がおかしくまりますが。

モダンなCSS設計とネストは矛盾しませんか？
谷氏などはどうしているのでしょうか？

[MasakazuFukami]

子孫セレクタを使うとコンテナーとコンテンツが分離できないというのがいまいちわかってないのですが、
cssを書いていく時にcontainerとコンテンツを分離できるような書き方にすれば問題ないと思います。

FLOCSSの中では各々のcssの役割を分けるために、
foundation
layout
comonent
project
utility

のように分かれています。
これらはあくまでもパーツです。

これらのパーツをhtml側で組み合わせてviewを作っていきます。
なので、コンテナーとコンテンツの分離ができていないというふうに感じることが出来ていらっしゃるのであれば、viewの画面設計がおかしいと疑ったほうがいいです。

そもそもFLOCSSなどの構成案を最大限発揮したいのであれば、
画面設計の段階でデザイナーの方などとviewの情報設計等を密にやる必要があります。
そうやって設計されたものを元にcomponentなどのcss設計を行っていくからです。

また、モダンなCSS設計が壊しやすい修正しやすいなどの運用に重きをおいているという考え方だとしたら、
ネストの階層の深さにもよりますが、深さを3つくらいまでに抑えておけばそこまで大変だと感じたことはありません。

また、仮にモダンなCSS設計とネストが矛盾するようでしたら、矛盾しないようにwebpageさんで改修されるのもありかと思います！
そうやって技術は進歩していくと思うので！