theme: channing-cyan

前言

CSS作为前端必备技能，他的上手比较容易，但深入缺难。

CSS不仅仅是一门科学，而是一门艺术。 您可以了解选择器的每种组合，并且可以成为每种样式属性的专家，但是仍然无法根据需要布置和样式化网站。

传统编程背景的开发人员不喜欢CSS的原因有很多：

1. Learning the rules is only half the game – you need experience to really understand CSS.

学习规则只是游戏的一半-您需要经验才能真正理解CSS。

1. CSS can be illogical and require too much trial and error.

CSS可能不合逻辑，并且需要过多的反复试验。

1. 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做演示）。

/* 定义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变量即可，又或者你的项目不是特别大，只需要简单适配即可，你也可以直接用媒体查询定义两套适配方案即可。

@media (prefers-color-scheme: dark) {
    /* 深色主题 */
    .main {
        color: white;
    }
}

@media (prefers-color-scheme: light) {
    /* 浅色主题 */
    .main {
        color: black;
    }
    
}

关于黑暗模式，就简单的说一下使用方法及一些看法，如有更好的方案还请评论区赐教~

最后

关于css的问题还有很多方面的研究，css实践性是比较强的，多写多试才能画出更加精美的页面~ 希望大家都可以作出能让自己骄傲的页面~

最后，若本文章对你有帮助，可以奉上你的赞，我才更有动力继续创作~