257 字
1 分钟
样式设计：CSS 也就是随便写写... (并没有)
CSS 的痛与乐
作为一个前端，最怕的不是写 JS 逻辑，而是调 CSS 样式。居中？对齐？适配？每一个词都能让猛男落泪。
Vue 中的 Scoped CSS
Vue 提供了 <style scoped>，这简直是防止样式污染的神器。它通过给元素添加唯一的 data-v-xxx 属性，确保你的样式只在这个组件内生效。
.example[data-v-f3f3eg9] { color: red;}但是！当你试图修改子组件的样式时（比如修改 Element Plus 的组件样式），scoped 就变成了拦路虎。这时候你就得用深度选择器 :deep()。
.parent :deep(.child) { /* 这样才能穿透过去 */}之前不知道这个，我傻傻地去写全局样式，结果污染了整个项目，被组长骂了一顿。
动态样式
Vue 3 允许我们在 CSS 中绑定 JS 变量：
.text { color: v-bind(color)}太酷了！这才是现代化开发嘛！
样式设计看似简单，实则深不可测。Flexbox, Grid, CSS Variables, Tailwind… 学不完，根本学不完。
分享
如果这篇文章对你有帮助，欢迎分享给更多人！
样式设计：CSS 也就是随便写写... (并没有)
https://blog.luozili.work/posts/vue-learning-5/ 部分信息可能已经过时
相关文章 智能推荐
1
我累了：试图理解源码，结果被源码理解了
Vue学习之路 记录第一次阅读 Vue 3 响应式和渲染器源码时，从建立入口地图到被 PatchFlags 劝退的过程。
2
Vite：快！太快了！由于速度太快我跟不上了
Vue学习之路 记录 Vite 开发服务器的速度优势，以及生产构建、依赖预构建、路径和插件兼容问题带来的反差。
3
Ref vs Reactive：响应式的哲学思考 (头秃篇)
Vue学习之路 对比 Vue 3 中 ref 与 reactive 的使用边界，以及解构、替换对象和模板自动解包时容易踩到的坑。
4
路由守卫：你是谁？你去哪？有通行证吗？
Vue学习之路 用门卫比喻梳理 Vue Router 的全局、路由独享和组件内守卫，并记录异步鉴权中的常见问题。
5
生命周期钩子：生老病死，Vue 组件的一生
Vue学习之路 按创建、挂载、更新和卸载阶段梳理 Vue 3 组件生命周期，以及各类钩子的典型使用场景。