CSS 的痛与乐

作为一个前端，最怕的不是写 JS 逻辑，而是调 CSS 样式。居中？对齐？适配？每一个词都能让猛男落泪。

Vue 中的 Scoped CSS

Vue 提供了 <style scoped>，这简直是防止样式污染的神器。它通过给元素添加唯一的 data-v-xxx 属性，确保你的样式只在这个组件内生效。

1
2
3
.example[data-v-f3f3eg9] {
  color: red;
}

但是！当你试图修改子组件的样式时（比如修改 Element Plus 的组件样式），scoped 就变成了拦路虎。这时候你就得用深度选择器 :deep()。

1
2
3
.parent :deep(.child) {
  /* 这样才能穿透过去 */
}

之前不知道这个，我傻傻地去写全局样式，结果污染了整个项目，被组长骂了一顿。

动态样式

Vue 3 允许我们在 CSS 中绑定 JS 变量：

1
2
3
.text {
  color: v-bind(color)
}

太酷了！这才是现代化开发嘛！

样式设计看似简单，实则深不可测。Flexbox, Grid, CSS Variables, Tailwind… 学不完，根本学不完。

CSS