[英]Does it really saves a lot of time to have nested rules in CSS? (using HAML or LESS)
Currently, this is how I'm coding my CSS: 当前,这是我编码CSS的方式:
Normal CSS: 普通CSS:
#content { color: white; background: black; }
#content a { color: yellow; }
#content p { margin: 0; }
#content (etc...)
#contnet (etc...)
#content (etc...)
(I always include the parent even if its not necessary so I can orient myself within the stylesheet) (即使没有必要,我也会始终包含父项,因此我可以将自己定位在样式表中)
This is how it would be done in SCSS or LESS: 这是在SCSS或LESS中完成的方式:
#content {
color: white;
background: black;
a { color: yellow; }
p { margin: 0em; }
(etc....)
(etc....)
(etc....)
}
What are some of the pro and cons of having nesting rules in CSS? 在CSS中使用嵌套规则有哪些利弊?
The short answer is: clarity. 简短的答案是:清晰度。
It's much easier to read the second item. 阅读第二项要容易得多。 Also, it tends to force you to put all of your #banner related styles in one location instead of scattered throughout the sheet.
同样,它会迫使您将所有与#banner相关的样式放在一个位置,而不是分散在整个工作表中。
Does it save time? 节省时间吗? I guess that depends on your work habits.
我想这取决于您的工作习惯。 It might.
它可能。
Well this is really simpler to maintain. 好吧,这真的很容易维护。 Let's say you are scoping a huge CSS:
假设您要确定一个巨大的CSS:
#content el1{}
#content el2{}
#content el3{}
...
#content el999{}
... and tomorrow #content changes to #something-else. ……明天#content更改为#something-else。 Instead of changing 999 entries, you'd change only one!
无需更改999个条目,只需更改一个即可!
#content{
el1{}
...
el999{}
}
Also it's easier to read and kind of force you to use nesting. 此外,它更易于阅读,并迫使您使用嵌套。
I only see positive things using solutions like less or scss. 我只使用诸如less或scss之类的解决方案看积极的事情。 So I guess that it will save you some time in the long run, but the main advantage is that it will produce a cleaner, DRYer code.
因此,我认为从长远来看,它可以为您节省一些时间,但是主要的优点是,它将产生更清晰的DRYer代码。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.