theme: channing-cyan
前言
CSS作为前端必备技能，他的上手比较容易，但深入缺难。
CSS不仅仅是一门科学，而是一门艺术。 您可以了解选择器的每种组合，并且可以成为每种样式属性的专家，但是仍然无法根据需要布置和样式化网站。
传统编程背景的开发人员不喜欢CSS的原因有很多：
- Learning the rules is only half the game – you need experience to really understand CSS.
学习规则只是游戏的一半-您需要经验才能真正理解CSS。
- CSS can be illogical and require too much trial and error.
CSS可能不合逻辑，并且需要过多的反复试验。
- Even if Browser X renders your page perfectly, Browser Y could fail dramatically.
即使浏览器X完美呈现您的页面，浏览器Y也会严重失败。
回到现实
在使用react的过程中，经常需要思考因样式污染问题带来的烦恼，而在vue中已经提供了很好的解决方案
scoped，但是react中没有，需要你自己人为或引入插件来解决，这点vue scoped做的相对不错，让我们不用纠结于样式污染的问题，而专心功能层面的问题。
命名规范防止样式污染
在react中，部分人可能会说你用cssModule或style component等解决方案，如果你对css命名方式有比较强的规范性，大可不用上面两种方案，直接最外层使用唯一class去包裹即可（比较推荐这种），vue中也一样，class的命名可以根据业务功能等来区分再配合预处理语言（如less、sass等），比如：
.movie-list-view{
background: #fff;
.ant-table{
background: #1B9AEE;
}
}
.goods-list-view{
background: #fff;
.ant-table{
background: #E9E9E9;
}
}上面的样式就可以修改各自包裹的类名为ant-table的元素，并且互不影响。因为某些时候你可能同一个组件在不同的场景下需要有特定样式，这时候这种命名方式就会有比较大的优势。这种方式对于你新开发的页面还好，如果接手别人的老代码没有这么做就有点难受了，所以新启一个项目时需要充分考虑一下样式规范的问题。
vue scoped
在vue中，由于vue已经提供了scoped这种比较好的方案了可以让你专注开发功能，大多数情况下scoped无疑用起来是很舒服的，但涉及到要修改公共组件的私有样式就比较麻烦了，毕竟scoped的原理是每个样式都加上唯一hash值来实现私有化，但scoped提供了/deep/来进行样式穿透。权重问题可以使用!important，不到万不得已不建议使用。
x.vue
<template>
<div>
<div class='movie-list-view'>
<div class='ant-table'>
.......
</div>
</div>
<y/>
</div>
</template>
<style lang='less' scoped>
.movie-list-view{
background: #fff;
.ant-table{
background: #1B9AEE;
}
}
// 这里改变了y的背景色
/deep/ .goods-list-view{
background: red
}
</style>
y.vue
<template>
<div class='goods-list-view'>
<div class='ant-table'>
.......
</div>
</div>
</template>
<style lang='less' scoped>
.goods-list-view{
background: #fff;
.ant-table{
background: #E9E9E9;
}
}
</style>/deep/很好的解决了上述的问题，在不同业务场景下使用的公共组件，如有特殊的需求，可以使用穿透样式来进行修改，并且不影响其他场景下使用该组件。
黑暗模式
关于黑夜模式，有一个小故事，前段时间由于苹果逼迫让微信添加自适应的暗黑模式来配合IOS刚出的黑暗模式功能，不然就下架微信APP，所以微信团队也是被迫营业，调整出黑暗模式配合苹果，又进一步推动了黑暗模式的广阔度，让大家更为知悉。
适配黑暗模式可以直接利用css提供的媒体查询功能完成即可，一般情况下需要定义两套样式来进行切换，利用less或其他预处理语言来定义样式变量即可（这里用less做演示）。
代码语言：javascript复制/* 定义less变量 */
@dark__font-color-main: white;
@light__font-color-main：black;
/* 定义css变量 */
@media (prefers-color-scheme: dark) {
/* 深色主题 */
:root {
--font-color-main: @dark__font-color-main;
}
}
@media (prefers-color-scheme: light) {
/* 浅色主题 */
:root {
--font-color-main: @light__font-color-main;
}
}
/* 使用 */
.main {
color: var(--font-color-main)
}以上是作者比较喜好的写法，当项目变量多时，看名字即可大概知道是哪一块的变量，而且维护方便，当然如果你阅读能力很强，完全可以略去less部分定义的变量，可以直接赋值css变量即可，又或者你的项目不是特别大，只需要简单适配即可，你也可以直接用媒体查询定义两套适配方案即可。
代码语言：javascript复制@media (prefers-color-scheme: dark) {
/* 深色主题 */
.main {
color: white;
}
}
@media (prefers-color-scheme: light) {
/* 浅色主题 */
.main {
color: black;
}
}关于黑暗模式，就简单的说一下使用方法及一些看法，如有更好的方案还请评论区赐教~
最后
关于css的问题还有很多方面的研究，css实践性是比较强的，多写多试才能画出更加精美的页面~ 希望大家都可以作出能让自己骄傲的页面~
最后，若本文章对你有帮助，可以奉上你的赞，我才更有动力继续创作~
