CSS 中的分离、抽象和层叠，文末领取面试资料-CSDN博客

本文链接：https://blog.csdn.net/m0_60707685/article/details/136860005

如果我们需要给div.footer定义个上边距，我们只需要把他添加到选择器里面就行，不用重新定一个规则了。我确信别人已经想到了这种风格的写法（或许起了个更好的名字），但是我不知道。我想这也是css作者的初衷之一吧。在实际中，以我的经验来看，这样的方式很难做到。不知为何，我没有这样的习惯去保持样式从他们的规则中独立出来。css属性和div.main,blockquote相关联，但是不符合dorothy（一种样式风格）第一条原则。也许专业人士能做的更好，但我从来没遇见过。

使用LESS就没这些问题。我只需要定义一个混合类，然后在我需要的地方复用它就可以了。

层叠

对于层叠问题LESS和SASS提出了一种很好的解决方案，但是有一定的局限性。层叠是复杂性中最基本的一个问题。对于一个特定元素的特定的属性，有很多地方的值是需要设定的。然而确定这些所有地方的优先权的规则是很复杂的。

一个元素的最终CSS属性值是由以下因素决定的：

导入CSS的顺序
CSS规则中定义的class的数量
在文件中定义的规则的顺序
所有的继承的属性设置
元素的 tag name
元素的 class
元素的 id
HTML树中所有元素的祖先元素
浏览器的默认样式

确实，css样式属性被很多影响着，但，智者总会让所有事情保持干净和简单。其实，保持这种智慧行为仅仅在小项目中有效，但在其他一些时候，层叠样式将会伤害到你。

Jason Zimdars 在37 Signals展现了他们提出的层叠样式的解决方案，他分享了一些关于层叠问题的分析和LESS怎么能消除层叠问题的观点。

如果css的层叠可以受控制，我们将第一次能够明确自己写的css不会引起问题，这将促使我们创造带有自身包含的样式表的元素，这些元素放之四海皆有效！

内容和样式的分离听起来像圣杯一样响亮！

通过使用嵌套的LESS规则和子选择器，我们能够避免大多数的层叠带来的痛。联合其他的一些技巧，我们能够将我们的样式混合到一块（或者是混合中嵌套混合），并将这些样式和通过模仿html结构的嵌套规则绑定到一块。

这是完美的，最终的解决方案吗？不一定！

将来

也有其他一些尝试解决层叠问题的方法，LESS和Sass被用来作为css的父集，这就意味着你可用的css文件就自动的成为LESS文件，同时也意味着你一开始就得用LESS编译器。

在这种情况下，LESS将会同事拥有所有css没有解决的问题，我建议在下一步可以尝试采用css子集并加以实践，同时，也非常希望听到大家的意见！

是的，嵌套规则确实可以处理层叠问题，但是也有其他关于层叠的问题。样式的混合不能真的帮你解决盒模型，再多的变量和算法也不能让两个DIV的宽度相同。

接下来，我将一个一个的解决这些问题。

再次“层叠”

直率的说，层叠就是css的创作者犯的一个错误，层叠的运用一开始希望是美好的，但在实际的运用中表现的并不理想。

事后诸葛亮，各个浏览器统一的层叠样式真的是我们所需要的，CSS reset真的是一项漂亮的发明，它精彩的解决了不同浏览器之间的默认样式的不同，它可以让你不用考虑默认样式轻松的开始页面的制作，所以，css reset可以实现页面样式默认，但除此之外，它中间的一些样式可能不能被充分的利用。

有的时候，你可能会想用层叠，例如，你想要设置整个文档的字体，所以，你设置 body{ font-family：'Comic Sans';}，0K,间接的利用font-famiy属性的继承性便将整个文档的字体搞定了。事实上，如果你想每个标签都有同样的属性，可以这样写:* {font-family：'Comic Sans';},其实这和css reset 有异曲同工之妙，都是为样式设置默认样式。

这意味着一条原则：一次性地重置一些默认样式并避免使用样式重叠。接下来我们需要能系统地遵循此原则。这是新的代码结构的样子：

不使用样式重叠意味着我们必须严格要求自己不在同一页面元素上应用多个样式规则。我无法告诉你要怎么做才能严格达到此要求，但是有些准则是可以参考的。

重置默认样式的规则只使用bare (classless + non-nested) selectors。
LESS规则中不要用bare selectors。
LESS规则中不要有重复的选择器。

这些准则会限制样式重叠的出现次数，再结合使用Zimdars提出的解决方案，效果会更佳。

常见错误

我把他们叫做常见错误是因为找不到更好的词来表达了，但实在是他们存在于CSS中。

盒子模式

盒子模式的引入可以使我们避免犯一些简单错误。

其中一个错误是发生在你定义左间距而不是右间距的时候。在这种情况下，右间距该怎么定义呢？级联。

当我设置宽度为100%的时候会出现什么情况？如果有级联填充的话。哎呦，妈呀，怎么办？当复合属性存在的时候不要单个的使用CSS属性。

个人建议不要采用以下属性：

left-margin,right-margin,top-margin,bottom-margin; usemargininstead
left-border,right-border,top-border,bottom-border; useborderinstead
left-padding,right-padding,top-padding,bottom-padding; usepaddinginstead
width,height; use the .dimension mixin instead

为了得多更多的规则，混合界定如下：

.dimension(@w,@h) { width : @w; height : @h; margin : 0; padding : 0; border-width: 0;}

这就需要你一开始就设置高度和宽度，它会重新设置内边距，外边距和边框，由于有盒子模式，这些都会影响真实的宽度。然而你还是可以无视他们，你只需要明确化。虽然这个不能解决整个盒子模式问题，但是能减去很多意外的行为。

我推荐使用混合是因为不管什么时候你设定一个元素的尺寸，由于他们影响盒子模式，在这一点上你应该明确内边距，外边距和边框。

字体颜色

现在我就挑一些反面案例

你见过下面这些代码多少次了？

body { color: black; a:link {color: blue; } a:hover {color: red; } a:active {color: blue; } a:visited {color: purple; }}实在太多了。我经常忘记一些。是时候改成混入处理了。 .font-color(@f,@a:blue,@h:red,@c:blue,@v:purple) { color: @f; a:link {color: @a}; a:hover {color: @h}; a:active {color: @c}; a:visited {color: @v};}模式很清楚吧。

结论

CSS从未完全实现样式与内容的分离。LESS(和Sass)终于能使这种分离实现。而且，使用LESS，我们可以开始磨圆CSS中尖锐的边角部份。但是，我们应该去寻找CSS的一个子集并用mixins替换有问题的CSS属性，而不是将LESS做为CSS的超集使用。该子集可以用一个linter工具强制执行。这些建议是一个很好的开始，但仍有很长的路要走。

后记

最后我想提一个关于CSS层叠的反思，但在上文中没有找到一个合适的地方，主要因为它不是一个问题而只是个不便。我经常疑惑为什么在CSS中，元素样式（定义在HTML标签的样式属性中）的优先级高于所有其他样式。同样，为什么在HTML（style标签）中定义的样式优先于那些通过连接引入的外部样式？我认为应该是完全相反的才更有意义。 HTML页面可以为其元素定义默认样式，这应该是在页面中指定并用外部样式表进行覆盖。

然而，按实际的规则，如果想改变一个有元素样式的元素的样式我必须修改相应的HTML文件。这不是与CSS的意图完全相反吗？

小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。