CSS工程架构

THIM
39 阅读2分钟

工程架构 CSS模块化

提示，以下规范和操作都是为了解决全局污染问题的出现，以及实现样式隔离

  • BEM 命名规范

BEM的命名规矩很容易记：

block-name__element-name--modifier-name

也就是模块名+ 元素名+ 修饰器名

  • vue-loader的 scoped 方案

鉴于我个人的理解就是，scoped就可以只在当前文档中生效，比如说我们创建vue的时候，主页App.vue里面的style样式就被默认为 scoped，其他外面的元素对我们这一页是不受影响的，它的 CSS 只作用于当前组件中的元素。

  • CSS Modules

我再来用简单说法解释一下，就是一般的css样式我们直接引用就可以，不需要做任何调整，但是当你在js中使用这个方式，CSS Modules 的时候，你的类型就会被完全替换掉，这样，这个样式就只会应用在这一个组件上面。

image.png

就会被替换为

image.png

  • 这个方法就可以很好的区分不同的class样式，其实就和第一个方法一样
  • 区别了每一个class类

要是还有不理解可以查一下相关的比如说。CSS工程化，模块化

image.png

CSS-in-JS

这个用过react的同学就很好理解，想入门react的可以看我这篇文章

react里面我们就是在 js里写上css和html

React 对 CSS 封装非常简单

const style = {
  'color': 'red',
  'fontSize': '46px'
};

styled-component

  • styled-components 是一个常用的css in js 类库
  • 可以直接npm下载
npm install styled-components
  1. 如何理解
  2. 还是按它的名字
  3. 样式组件化
  4. 没错的
  5. 就是把你写的样式放在js里面定义后
  6. 在html像引用组件一样引用它
const Sidebar = styled.section`
  margin: 0 auto;
  width: 300px;
  text-align: center;
`;

  <Sidebar>
avatar
文章
阅读
粉丝