样式表
样式表不仅用于美化页面,也常作为组件功能的重要补充。一个良好的样式体系,不仅能提升用户体验,还能增强组件的表达力和复用性。在组件化开发中,传统的全局样式往往容易引发冲突和维护困难,而作用域机制的引入有效解决了这些问题。通过将样式限定在组件内部,开发者可以放心地定义类名和样式规则,无需担心影响到其他组件或页面元素。这种方式既保留了 CSS 的灵活性,又带来了更强的可控性和可维护性,是构建现代前端应用时不可或缺的一部分。
样式作用域
组件模板中内容在渲染时都会被添加一个作用域属性,例如:
html
<div>...</div>
会被渲染为类似这样的 HTML 片段:
html
<div qk-dbb1016b>...</div>
为了避免组件中的样式污染全局或其他组件,嵌入样式也会被添加一个作用域属性,例如:
qk
<lang-css>
div {
color: red;
}
</lang-css>
会被转换为:
css
div[qk-dbb1016b] {
color: red;
}
在组件嵌入样式语言标签中通过 @import 语法导入的样式表也受此影响。
作用域属性位置
通常情况下作用域属性会被添加到最后一个选择器后面:
css
div p[qk-dbb1016b] {
}
.container .box[qk-dbb1016b] {
}
但我们可以通过 qk-scope
属性选择器手动调整作用域属性添加的位置,例如:
css
div[qk-scope] p {
}
[qk-scope] .container .box {
}
会被转换为:
css
div[qk-dbb1016b] p {
}
[qk-dbb1016b] .container .box {
}