css 命名：BEM, scoped css, css modules 与 css-in-js详解CSS使用BEM命名规范实践CSS样式书写顺序和命名规范及注意事项值得收藏的CSS命名规范(规则)常用的CSS命名规则 好的 CSS 命名规范可以节约 Debug 时间CSS规范BEM CSS和OOCSS的示例代码详解详解css BEM书写规范 从QQtabBar看css命名规范BEM的详细介绍

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

一. BEM

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

实例

.dropdown-menu__item--active

二. scoped css

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

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

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

实例

转换结果：

三. css modules

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

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

实例

转换结果：

四. 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的文章就介绍到这了,更多相关css 命名内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！