样式被覆盖进行隔离的解决方案
问题清单
- 选择器命名重复
- 样式优先级
解决方式
- css 变量 var
- 选择器自定义
或 增加前缀 prefix 通过PostCss 插件postcss-prefix-selector解析
工具思维
让css有局部作用域,全局作用域等；
- CSS 命名方法论：通过人工的方式来约定命名规则。
- CSS Modules：一个 CSS 文件就是一个独立的模块。
- CSS-in-JS：在 JS 中写 CSS。
- HTML5的style scoped
BEM
BEM即为块级元素修饰字符（Block Element Modifier），以 .block__element–modifier 形式命名，即 .模块名__元素名–修饰符名
CSS in JS
CSS IN JS是使用 JavaScript 编写 CSS 的统称，用来解决 CSS 样式冲突、覆盖等问题; CSS IN JS 的具体实现有 50 多种，比如：CSS Modules、styled-components` 等;
CSS Modules
css modules 通过对css类名的重命名，保证每一个类名的唯一性，从而避免样式冲突问题
:global() 、:local()
