样式隔离简介

简介

众所周知，css在web前端中具有样式控制、布局设计等重要作用。但是我们经常会遇到一个问题，就是修改一个组件的样式时会不自觉的影响到别的组件,比如说覆盖了上个已写好的背景颜色。这个问题叫做样式冲突。正因为这个问题，也就引出的这篇博客的主题-样式隔离。下面笔者就对比简介css module、tailwindcss、vue css scoped的样式隔离方案

CSS MODULE的样式隔离方案

与一般的.css文件不同，.module.css在导入时会将类名封装在一个对象字面量里面，原先的类名作为对象的键，而值是经过修饰过的类名，以此达到样式隔离的目的

原理

我们不妨来看这么一段代码

.container {
    background-color: blue;
    color: white;
    padding: 20px;
}

.title {
    font-size: 24px;
    font-weight: bold;
}

.button {
    background-color: green;
    color: white;
    padding: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

import styles from ./style.module.css

导入后, javascript会生成类似这样的对象

const styles = {
  container: 'container__1a2b3', 
  title: 'title__1a2b3', 
  button: 'button__1a2b3'
};

而对象的值作为新的类名，这样的方式让多处导入的同名类不会相互影响，以此达到了样式隔离的目的

tailwindcss的样式隔离方案

与一般的css不同，tailwind使用了原子化CSS（Atomic CSS）的设计理念来规避样式冲突问题，即一个类只包含一条CSS，或者说只干一件事情

原理

我们不妨以这么一段简单的代码为例

<div class="lg:text-xl">
  Hello, World!
</div>

这段代码的意思是在屏幕较大的时候显示较大的字体,而打开tailwind生成的文件我们会发现, 这段代码被转化成了

.lg\\:text-xl {\n    font-size: 1.25rem;\n    line-height: 1.75rem;\n  }

输出了一个css文件，并且在app.vue中导入

当类名变多时 如

<div class="lg:text-xl p-5">
  Hello, World!
</div>

我们可以看到生成了这样一个文件

.p-5 {\n  padding: 5px;\n}
.lg\\:text-xl {\n    font-size: 1.25rem;\n    line-height: 1.75rem;\n  }

那么我们不难得出tailwind的工作原理:

1. 获取用户设置的class类，判断是否符合组件库规范
2. 用空格拆分用户的class，将其转化为单独的类，每个类对应一条css
3. 将每个类生成的css组合 输出一个有独特名字的css文件 包含一个名称与原class相同的css文件
4. 将css文件导入组件，正常使用

正因如此，就算两个组件使用了相同的class类名，因为一个类名指向一个固定的css样式，有效的规避了样式冲突问题

vue css scopped样式隔离方案

在vue的style标签中添加scopped属性后，可以让组件的样式仅适用与该组件而不影响其他组件，以此来达到样式隔离的效果

原理

与css module类似，使用scopped属性后，vue会为每个css选择器添加一个独特的属性，确保不会被其他组件影响

例如

<style scoped>
.my-component {
    background-color: lightblue;
    color: white;
}
</style>

.my-component 会被转换为 .my-component[data-v-xxxxxx], 也就不会被全局样式所影响

作用

除了解决简述中的样式冲突问题, 样式隔离还有不少好处

提高可维护性

传统的全局css样式往往是牵一发而动一身的，这给代码维护造成了很大的麻烦，而隔离了样式之后就能避免这一问题

增强复用性

复用是前端领域非常重要的一块，而样式隔离可以让复用组件的成本更低

团队协作

团队的不同成员可能会同时修改样式，样式隔离可以很好解决这个问题