CSS Modules 简单入门
CSS的选择器在全局范围都会生效,比如有时候会有A写了 btn
的class定义了一个默认显示蓝色按钮, B之后不小心也写了一个 btn
的class, 很不幸,A需要的按钮样式可能被B所写的样式覆盖! Bootstrap中的类似btn这种情况,在 btn
的class 通常定义的是所有按钮通用的样式,并且通过在定义 btn-success
、btn-error
等样式通过选择器优先级来实现不同的样式。但是这种依旧相当于在全局中定义了样式, 无法避免将来有人不经意的又写了btn-success
这样的class覆盖或者影响了之前的样式。
为了解决这问题,前端大牛们提出了种种的命名约定来避免命名冲突。 比如OOCSS、SMACSS、BEM、SUIT等等。 以BEM为例,class的名字以block__element--modifier
这种方式来命名,比如写个Menu, 那么Menu中的item处于active状态就要命名成 menu__item--active
这样的写法可能会解决问题,但是写起来总感觉有些反人类。所以有人说BEM很火,看着就想吐 . 并没有在项目中实践BEM这种命名方式,但是它来解决命名冲突的思路还是挺不错的,相当于通过模块命名前缀的方式避开在全局空间下命名,每个组件在它所属的命名空间下定义。