阅读 1040

前端样式那些事

前言

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中,部分人可能会说你用cssModulestyle 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实践性是比较强的,多写多试才能画出更加精美的页面~ 希望大家都可以作出能让自己骄傲的页面~

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

文章分类
前端
文章标签