苏州seo网站公司,网络舆情监测中心具体做什么,专业搜索服务网络公司,深圳网络推广推荐摘要当你在编写css代码的时候#xff0c;是否遇到这样的困扰: 不知道取什么class名? 修改某个组件的样式#xff0c;担心影响了其他组件? 编写的组件样式如何复用#xff1f;为了解决这些问题#xff0c;聪明的程序猿发明了BEM命名法。 BEM命名法#xff0c;是对css命名…摘要当你在编写css代码的时候是否遇到这样的困扰: 不知道取什么class名? 修改某个组件的样式担心影响了其他组件? 编写的组件样式如何复用为了解决这些问题聪明的程序猿发明了BEM命名法。 BEM命名法是对css命名的一种规范将页面模块化隔离样式提高代码的复用性减少后期的维护成本。BEM的意思就是Block(块)、Element(元素)、modifier(修饰符)通过双下划线__或者双中划--链接。BEM通常用于框架开发中比如微信WEUI、饿了么element-ui、有赞vant等。笔者也是通过阅读这些优秀框架的源码学习到了这一套css命名大法从此走上人生巅峰赢取白富美。1. 为什么需要BEM命名法样式隔离, 避免css样式污染css样式污染的根本原因是因为css没有作用域。BEM通过特殊的命名方式给css创造一个“作用域”就能有效避免css样式全局污染。例如,给输入框命名# 普通
.base input {}# BEM命名法
.base-input__inner {}普通的命名法, 会作用于所有classbase 的后代元素。 本来你只想给当前元素加样式结果不小心影响了其他元素这就是样式污染。 BEM命名法只会作用于classbase-input__inner的元素, 达到样式隔离。 不会影响其他元素。 有人会说css-module, 也能实现css“作用域”而且作用域更唯一我为什么要用BEM ? 客官别急且听我慢慢道来。代码更易覆盖假如客官你正在开发一个通用的输入框组件, 用了css-module。打包后是这个样子.base-input-sdFh3sxLwo5uer {}另一位客官用了你的输入框组件但是觉得样式不好看想修改样式。试了半天发现根本无法用css精确选择你的组件因为.base-input后面的hash值是动态的。于是这位客官捶胸顿足发誓再也不用你的组件了。代码更易读还是刚刚的输入框组件base-input__nner, 不需要我解释客官一眼就能看出: base代表基础组件input代表输入框组件, inner是组件中的某一块。 哇,客官你真是太聪明了2. 什么是BEM命名法BEM其实是块block、元素element、修饰符modifier的缩写利用不同的块功能以及样式来给元素命名。这三个部分使用__与--连接这里用两个而不是一个是为了留下用于块的命名。命名约定的模式如下.block{}
.block__element{}
.block--modifier{}block代表更高级别的抽象或组件block__element代表 block的后代用于形成一个完整的block的整体block--modifier代表block的不同状态或不同版本常用规范block element modifier包含多个单词时, 用一个中划线-链接,例如el-dropdown-menu el-buttonblock和element用双下划线__链接, 例如表单项 form__item导航项 menu__itemelement和modifier用双中划线--链接, 如表示按钮的不同状态,例如默认el-button--default 成功el-button--success用js控制样式时,css命名用is-开头,例如is-success、is-failed、is-disabled常用的元素名表单元素 form form-item input select radio checkbox switch rate datePicker导航元素 nav subnav menu tab提示 alert message messageBox notification数据展示 table process tree pagiantion其他 button icon3. 如何用好BEM命名法页面命名用page-开头, page表示这是一个页面, 而不是组件。 给页面命名时BEM可以搭配css-module一起使用。既能保证打包后选择器的唯一又容易调试。例如# 编译前
.page-index {}
.page-zufang {}# 编译后
.page-index-70yGFBg1eKjbSIwN {}
.page-zufang-mFTy62A1t83zjDbh {}使用css-module, 打包后的clss名是可以修改的 参考# 让打包后的文件更容易识别
{test: /.css$/,use: [{loader: css-loader,options: {modules: true,localIdentName: [local]--[hash:base64:5]}}]
}页面中的选择器都嵌套在页面根选择器内(.page-xxx), 保证所有样式, 只作用于当前页面。例如!- 页面命名 page-home -
div classpage-homediv classthe-formdiv classthe-form-itemdiv classthe-input/div/div/divdiv classthe-tablediv classthe-table-content/div/div
/div.page-home {.the-form {}.the-form-item {}.the-input {}.the-table {}.the-table-content {}
}公共组件命名用base-开头, base表示公共组件。div classbase-inputinput classbase-input__inner/
/div# 选择器避免嵌套降低选择器权重
.base-input {}
.base-input__inner {}公共组件的每一个class名带上组件的作用域前缀,如base-input__inner的作用域前缀是base-input。选择器不宜嵌套, 让选择器的权重尽可能低。原因如下: base-input__inner已经具有有作用域了无需再嵌套。 由于组件选择器权重较低在组件外修改组件样式时覆盖样式非常方便。局部组件命名用the-开头, the表示某一特定的组件。div classthe-headerdiv classthe-header__title /div classthe-header__desc
/div# 选择器避免嵌套降低选择器权重
.the-header {}
.the-header__title {}
.the-header__desc {}局部组件的每一个class名带上组件的作用域前缀,如the-header__title的作用域前缀是the-header。局部组件也不宜嵌套 降低选择器权重。局部组件也可以搭配css-module一起用因为局部组件只给少数特定页面使用修改样式可以在组件内部直接修改。4. 其他注意事项命名语义化怎样衡量你的命名是语义化的让一个人新人来看一下你的代码不需要解释就能知道这个类的作用就比较语义化.通常可以根据模块的功能而命名如页面头部header、导航栏nav、主体main、侧边栏sidebar、底部footer等这样整个页面看起来就比较清晰了维护起来也比较方便。# bad
.fl { ... }
.fr { ... }# good
# 左浮动
.is-float-left { ... }
# 右浮动
.is-float-right { ... }上面的代码, fl、fr之类的命名表达意思不够清晰要知道具体的含义还得去看代码。 而is-float-left, 就表达得非常清晰。使用 class(类) 选择器, 避免使用 id、标签、伪类 选择器标签、伪类 等选择器范围太广不具有“作用域”的作用会污染全局样式。例如下面的代码中.the-header a 选择器会选中the-header所有后代元素a/adiv classthe-headera/a
/div
# bad
.the-header a { ... }覆盖第三方组件样式时重新起一个class名使用原来的class名修改样式可能会不小心影响了后代组件的样式。为了消除这个隐患可以重新起一个class名只作用于当前组件。例如修改ant-design的输入框组件样式div classNamethe-formInput classNamethe-input
/div# bad 会影响the-form 后代的所有输入框
.the-form .ant-input {}# good 只会只用于classNamethe-input的输入框
.the-form .the-input{}总结为什么需要BEM命名法什么是BEM命名法如何用好BEM命名法其他注意事项
