大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
这篇文章将为大家详细讲解有关CSS如何使用BEM命名规范,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
创新互联公司-专业网站定制、快速模板网站建设、高性价比泗县网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式泗县网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖泗县地区。费用合理售后完善,十多年实体公司更值得信赖。BEM(块,元素,修饰符)是基于组件的Web开发的一种前端命名方法论,主要针对CSS。其背后的想法是将用户界面分为独立的块。即使使用复杂的UI,这也使界面开发变得容易和快速,并且允许重用现有代码而无需复制和粘贴。
优势
避免样式冲突
减小名称长度
提高可阅读性
增加样式重用
怎么使用BEM
Block
一个功能独立的页面组件,可以重复使用
块不应影响其环境,这意味着您不应设置块的外部几何形状(边距)或位置
< div class = "header" > div > < div class = "red-text" > div >
Element
块的复合部分,不能单独使用
元素全名的结构为block-name__element-name
一个元素始终是块的一部分,而不是另一个元素,因此元素名称不可定义为 block__elem1__elem2 的层次结构
元素始终是一个块的一部分,您不应该与该块分开使用
Modifier
定义块或元素的外观,状态或行为的实体
修饰符的两种类型
Boolean
修饰符全名的结构遵循以下模式:
block-name_modifier-name
block-name--modifier-name
block-name_element-name_modifier-name
block-name_element-name--modifier-name
Key-value
修饰符全名的结构遵循以下模式:
block-name_modifier-name_modifier-value
block-name_modifier-name--modifier-value
block-name__element-name_modifier-name_modifier-value
block-name__element-name_modifier-name--modifier-value
不能将修饰符与修饰的块或元素隔离使用。修饰符应更改实体的外观,行为或状态,而不是替换它
在修饰符和元素名称中添加块名称的好处
有助于减少一个块的元素和修饰符对另一个块的实现的影响
可更清楚的知道修饰符应用于该DOM节点上的哪个实体
名称使查找代码或文件系统中的实体变得更加容易
什么时候应该用 BEM 格式
使用 BEM 的诀窍是,你要知道什么时候哪些东西是应该写成 BEM 格式的。
并不是每个地方都应该使用 BEM 命名方式。当需要明确关联性的模块关系时,应当使用 BEM 格式。
比如只是一条公共的单独的样式,就没有使用 BEM 格式的意义:
.hide { display: none !important; }
命名规范
双下划线风格block-name__elem-name--mod-name--mod-val
名称以小写拉丁字母书写。
BEM实体名称中的单词由连字符(-)分隔。
元素名称与块名称之间用双下划线(__)分隔。
布尔修饰符用双连字符(--)与块或元素的名称分隔。
修饰符的值与其名称之间用双连字符(--)分隔。
(重要提示:注释(--)中的双连字符可能会在HTML文档验证期间导致错误。)
CamelCase styleblockName-elemName_modName_modVal
名称以拉丁字母书写。
名称中的每个单词都以大写字母开头。
块,元素和修饰符名称的分隔符与标准方案中的相同
React命名范式BlockName-ElemName_modName_modVal
名称以拉丁字母书写。
块和元素的名称以大写字母开头。修饰符的名称以小写字母开头。
名称中的每个单词都以大写字母开头。
元素名称与块名称之间用单个连字符(-)分隔。
修饰符的名称和值之间的分隔符与标准方案中的相同。
没有命名空间样式_available
名称以拉丁字母书写。
修饰符之前不包括块或元素的名称。此命名方案限制了mixs的使用,因为它无法确定修饰符属于哪个块或元素。
常用的CSS命名
例子
vant 组件 css 命名
使用的命名是双下划线风格:block-name__element-name--modifier-name
......
weui 组件 css 命名
使用的命名是 React命名风格:block-name__element-name_modifier-name
Button
按钮
....关于“CSS如何使用BEM命名规范”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
分享名称:CSS如何使用BEM命名规范-创新互联
本文网址:http://dzwzjz.com/article/coshgc.html