嵌套选择器的性能影响和LESS

Question

我一直在阅读关于这个过去1.5小时,还是没能找到一个简洁和决定性的答案.

据我所知,浏览器从右到左解析CSS选择器.

这意味着一个长的CSS选择器,如下所示:

.card .container .businesscard .pinfo li.pinfo-box span:first-child

是在SO中出现的效率最低的代码行之一.

首先,我是对的吗？

其次,我正在使用LESS设计一个丰富的UI,它最终会从我编码的嵌套设计中产生这种庞大的选择器.

可以做些什么来避免这种选择器？仅依靠课程和ID？但是,如果你不能编写嵌套的CSS,那么再次使用LESS的目的是什么？

感谢您的意见.

Answer 1

那是正确的。浏览器从右到左评估选择器。它会尝试找到一个spaninside ali.pinfo-box等等。

编写 LESS 时要遵循的一条经验法则是：嵌套的层数不要超过 3-4 层。

这将防止您的选择器变大，同时您仍然可以从 LESS 中的嵌套功能中受益。

“无用”嵌套的一个很好的例子是样式列表。有时我会这样写选择器：

#wrapper .blog-post ul, #wrapper .blog-post ul li

真的有必要指定li 必须在 a 内ul吗？这可能就足够了：

#wrapper .blog-post li

所有这一切都很高兴知道。但是：在尝试优化您的网站性能时，这并不是首先要深入研究的内容。花一些时间减少请求的数量或其他东西。