2024年CSS 中的分离、抽象和层叠(2)，2024年最新2024年前端社招面试题-CSDN博客

本文链接：https://blog.csdn.net/2401_84434301/article/details/138678419

总结

我在成长过程中也是一路摸爬滚打，没有任何人的指点，所以走的很艰难。例如在大三的时候，如果有个学长可以阶段性的指点一二，如果有已经工作的师兄可以告诉我工作上需要什么，我应该前面的三年可以缩短一半；后来去面试bat，失败了有5、6次，每次也不知道具体是什么原因，都是靠面试回忆去猜测可能是哪方面的问题，回来学习和完善，当你真正去招人的时候，你就会知道面试记录是多么重要，面试官可以从面试记录里看到你的成长，总是去面试，总是没有成长，就会被定义为缺乏潜力。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

使用LESS，我可以定义个混合类Dorothy:

.dorothy() { background-color: green; text-color: yellow; border: 1px solid red;}呵呵，这个样式看起来有点丑，但是它仅是个样式。它不依赖于任何的HTML结构，甚至一个HTML标签。现在，如果你想使用它，只需要在需要的地方引用它就可以，下面是几个例子。 div.main { .dorothy;}blockquote { .dorothy;}

这是LESS让HTML样式更加易用的一个方面，除此之外，你可以定义个包含大小和颜色的变量，这也是把样式绑定到HTML的另外一种方式.

抽象

如果你对混合类和变量有了进一步的认识，你会发现他们可以任意组合。我可以定义一个混合类，然后在另一个混合类里面引用它。我也可以用他们组合出第三种样式，红色边框，黄色字体，绿色背景。这类的组合表明我们可以对css做进一步的抽象。

这在单纯的HTML+CSS里面是不可能办到的。

好吧，虽然我说了不可能办到，但是也不是没有办法，只是有点2x罢了。诺，你可以复制粘贴嘛，这TM虽然根本不是个解决方案，但是也能得到你想要的样式。或者你可以像网格框架（blech!）一样重复使用没有语义的类名。最后，你可以做个“倒置样式”（inverted-style）：把所有样式的优先级看做最高，其他的选择器都是从属。这个需要解释下。

通常，我们这样写css:

div.main { background-color: green; text-color: yellow; border: 1px solid red; margin-top: 10px;}blockquote { background-color: green; text-color: yellow; border: 1px solid red;}p { margin-top: 10px;}

这样看起来似乎不是很糟，但是仍存在一些重复的定义。我们可以采用另一种方式。

/* Dorothy style */div.main, blockquote { background-color: green; text-color: yellow; border: 1px solid red;}/* Top margin */div.main, p { margin-top: 10px;}

如果我们需要给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中。

盒子模式

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

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

Vue 面试题

1.Vue 双向绑定原理
2.描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？
3.你是如何理解 Vue 的响应式系统的?
4.虚拟 DOM 实现原理
5.既然 Vue 通过数据劫持可以精准探测数据变化,为什么还需要虚拟 DOM 进行 diff 检测差异?
6.Vue 中 key 值的作用？
7.Vue 的生命周期
8.Vue 组件间通信有哪些方式?
9.watch、methods 和 computed 的区别?
10.vue 中怎么重置 data?
11.组件中写 name 选项有什么作用？
12.vue-router 有哪些钩子函数?
13.route 和 router 的区别是什么？
14.说一下 Vue 和 React 的认识，做一个简单的对比
15.Vue 的 nextTick 的原理是什么？
16.Vuex 有哪几种属性?
17.vue 首屏加载优化
18.Vue 3.0 有没有过了解？
19.vue-cli 替我们做了哪些工作？