LESS - 嵌套生成坏的CSS代码？

问题描述

在下面的文章中，我读到应该尝试减少选择器的数量。

我想知道如果写LESS和我使用很多嵌套到组父元素和子元素，最终会生成坏的CSS代码吗？

LESS

  .wrap {
 width：100％; 
 height：20％; 
 background：green; 
 header {
 background：blue; 
 h1 {
 color：red; 
} 
} 
} 
  

解决方案>
$ b

一句话，是的。从长远来看，这将给你高度具体，不可维护的CSS。让我们来看看你的例子会为 h1 风格产生什么。

  .wrap header h1 {color：red; } 
  

所以你最后得到的是一个非常具体的CSS选择器，真的必要。例如，您可以只有

  h1 {color：red; } 
  

或使用 h1

  .title {color：red; } 
  

为什么特异性较差？

所以想象，6个月后，另一个开发者来了，他们需要改变 h1 的颜色，但只是其中之一。

首先，他们尝试向 h1

  .new-color {color：blue; } 
  

但颜色不会改变，因为原始的CSS是如此具体。因此他们必须这样做

  .wrap header h1.new-color {color：blue} 
  

或更糟糕的是他们可能会这样做。

  .new-color {color：blue！important; } 
  

然后当需要进行其他更改时会发生什么？

性能

如果你能看到非常快速和非常容易，你可以结束不可维护的CSS，

人们通常在CSS方面否定性能，但是总是好的，知道当页面呈现时发生什么。 CSS从右到左读。使用您的示例

  .wrap header h1 {color：red; } 
  

这意味着浏览器引擎将搜索每个 h1 并检查他们是否有一个父头，然后如果有一个父类 wrap 。如果是这样，它将应用的风格。

因此，为了总结，嵌套，虽然它可能看起来很好保持你的代码漂亮和可读性，应该只在绝对必要时使用。这很容易忘记实际生产的CSS看起来像什么。在你知道之前，你就会陷入地狱。

In the following article I read that one should try reduce the number of selecetors.

Article: use less selectors

I'm wondering if writing LESS and I'm using a lot of nesting to group parent and child elements, will that generate bad CSS code in the end?

LESS

.wrap{
   width: 100%;
   height: 20%;
   background: green;
   header{
           background: blue;
           h1{
                color: red;
             }
         }
 }

解决方案

In a word, yes. In the long run this will give you highly specific, unmaintainable CSS. Let 's have a look at what your example will produce for the h1 style.

.wrap header h1{ color: red; }

So what you've ended up with here is a very specific CSS selector, that isn't really necessary. You could, for instance, just have

h1 { color: red; }

or use a class on the h1

.title { color: red; }

Why is specificity bad?

So imagine, 6 months later another developer comes along and they need to change the color of a h1, but just one of them.

First they try to add a class to the h1

.new-color { color: blue; }

But the colour doesn't change because the original CSS is so specific. So they have to do this

.wrap header h1.new-color { color: blue }

or worse still they may do this

.new-color { color: blue!important; }

And then what happens when other changes need to be made? As you can see very quickly and very easily you can end up with unmaintainable CSS, that will have everyone pulling their hair out.

Performance

People usually negate performance when it comes to CSS, but it is always good to know what is going on when a page is rendered. CSS is read from right to left. Using your example

.wrap header h1 { color: red; }

This means the browser engine will search for every h1 and check if they have a parent header and then if that has a parent class wrap. If so it will apply the style. A low specificity makes the rendering process a lot simpler.

Summary

So to sum it up, nesting, whilst it may seem great keeping your code nice and readable, should only be used when absolutely necessary. It's very easy to forget what the CSS that is actually being produced looks like. Before you know it you'll be in nesting hell.

这篇关于LESS - 嵌套生成坏的CSS代码？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！