css命名：BEM,scopedcss,cssmodules与css-in-js的示例分析

小编给大家分享一下css命名：BEM, scoped css, css modules与css-in-js的示例分析，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！

班玛网站制作公司哪家好，找创新互联！从网页设计、网站建设、微信开发、APP开发、成都响应式网站建设公司等网站项目制作，到程序开发，运营维护。创新互联于2013年成立到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选创新互联。

css 作用域是全局的，项目越来越大，人越来越多，命名慢慢成为问题，以下是几种解决命名问题的方案

一. BEM

以 .block__element--modifier 形式命名，命名有含义，block 可视为模块，有一定作用域含义

实例

.dropdown-menu__item--active

二. scoped css

参考：vue-loader.vuejs.org/zh/guide/sc…

目标：当前组件样式不会影响其它组件

给组件的 dom 节点添加惟一属性，并转换 style 标签中的 css 匹配该属性，使得 css 作用域有限

实例

.example {
  color: red;
}

 

转换结果：

三. css modules

参考：vue-loader.vuejs.org/zh/guide/cs…

将 css 的选择器转换成惟一的字符串，运用到 dom。是在用算法命名，记录了人的命名到算法命名的 map 表

实例

.red {
  color: red;
}

转换结果：

._1yZGjg0pYkMbaHPr4wT6P__1 {
  color: red;
}

四. css-in-js

参考：github.com/styled-comp…

将 css 内容用惟一的选择器表示。同 css modules，用算法命名。将 css 视为 js 的字符串，赋予 css 更多能力

实例

转换结果：

五. 总结

1. BEM 让命名有规律、有含义，block 可视为模块，有一定作用域含义

2. scoped css 限定 css 作用域，无关命名。无法适配多套主题

3. css modules 使用算法命名，没有了命名冲突，也限定了 css 作用域。无法适配多套主题

4. css-in-js 使用算法命名，拥有 css modules 的优势。同时将 css 视为 js 的字符串，赋予 css 更多能力

看完了这篇文章，相信你对“css命名：BEM, scoped css, css modules与css-in-js的示例分析”有了一定的了解，如果想了解更多相关知识，欢迎关注创新互联行业资讯频道，感谢各位的阅读！