这篇文章给大家分享的是有关BEM的内容。一些朋友可能对BEM是什么，BEM的用法等等不是很了解，因此本文就给大家详细介绍一下BEM，感兴趣的朋友就继续往下看吧。

    什么是BEM

    BEM（块，元素，修饰符）是基于组件的Web开发的一种前端命名方法论，主要针对CSS。其背后的想法是将用户界面分为独立的块。即使使用复杂的UI，这也使界面开发变得容易和快速，并且允许重用现有代码而无需复制和粘贴。

    优势

• 避免样式冲突
• 减小名称长度
• 提高可阅读性
• 增加样式重用

    怎么使用BEM

    Block

    一个功能独立的页面组件，可以重复使用

    块不应影响其环境，这意味着您不应设置块的外部几何形状（边距）或位置

< div class = "header" > 


< div class = "red-text" > 

    Element

    块的复合部分，不能单独使用

    元素全名的结构为block-name__element-name

Search

    一个元素始终是块的一部分，而不是另一个元素，因此元素名称不可定义为 block__elem1__elem2 的层次结构

	Search



	Search

    元素始终是一个块的一部分，您不应该与该块分开使用

SearchSearch

    Modifier

    定义块或元素的外观，状态或行为的实体

    修饰符的两种类型

    Boolean

    修饰符全名的结构遵循以下模式：

• block-name_modifier-name
• block-name--modifier-name
• block-name_element-name_modifier-name
• block-name_element-name--modifier-name

Search

    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

Search

    不能将修饰符与修饰的块或元素隔离使用。修饰符应更改实体的外观，行为或状态，而不是替换它

SearchSearch

    在修饰符和元素名称中添加块名称的好处

• 有助于减少一个块的元素和修饰符对另一个块的实现的影响
• 可更清楚的知道修饰符应用于该DOM节点上的哪个实体
• 唯一名称使查找代码或文件系统中的实体变得更加容易

    什么时候应该用 BEM 格式

• 使用 BEM 的诀窍是，你要知道什么时候哪些东西是应该写成 BEM 格式的。
• 并不是每个地方都应该使用 BEM 命名方式。当需要明确关联性的模块关系时，应当使用 BEM 格式。
• 比如只是一条公共的单独的样式，就没有使用 BEM 格式的意义：

.hide {
    display: none !important;
}

    命名规范

    双下划线风格
block-name__elem-name--mod-name--mod-val

• 名称以小写拉丁字母书写。
• BEM实体名称中的单词由连字符（-）分隔。
• 元素名称与块名称之间用双下划线（__）分隔。
• 布尔修饰符用双连字符（--）与块或元素的名称分隔。
• 修饰符的值与其名称之间用双连字符（--）分隔。
• （重要提示：注释（--）中的双连字符可能会在HTML文档验证期间导致错误。）

    CamelCase style
blockName-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
		

		

			按钮
		

	

	

		
		

			页面主操作 页面主操作 页面次要操作 警告类操作 
		
....
		

			
		

	

    校验 BEM 规范工具

    stylelint-selector-bem-pattern

    以上就是BEM的用法及命名规范的介绍啦，有需要的朋友可以了解看看，希望本文对大家有帮助，想要了解更多BEM的内容，大家可以继续浏览群英网络其他相关的文章。

文本转载自脚本之家

相关阅读：

WebSocket是什么？PHP如何实现WebSocket?
websocket封装过程是什么？
react项目应该如何创建和部署？
用css写圆形镂空打孔效果的优惠券
CSS实现视差滚动的原理及方法是什么？
用CSS3怎样做红包的抖动动画效果？

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• CSS的content属性都有哪些使用，你知道多少？

  这篇文章小编给大家分享的是CSS的content属性的相关使用，content属性一般用于::before、::after伪元素中，用于呈现伪元素的内容。很多时候，content属性值我们用的最多的就是给个纯字符，其实它还有很多值可供选择文中示例介绍的很详细，感兴趣的朋友可以了解看看，下面让我们一起来学习一下吧！

• 用CSS怎样实现可滚动元素的阴影效果？

  在开发过程中，我们经常会使用到CSS滚动效果，例如表格滚动，图片滚动等等，对于一些可滚动的元素而言，想要视觉效果更好一些，通常在滚动的时候会给垂直于滚动的一侧添加一个阴影，用于表明当前有元素被滚动给该滚出了可视区域，如下图所展示一样。那么这样的效果要怎么样实现呢?

• CSS中如何利用radio实现选择地址切换样式的效果

  这篇文章主要介绍了CSS 点击radio实现两个图片样式切换并且多个radio中只能有一个checked，感兴趣的朋友跟随小编一起看看吧

• CSS隐藏元素有多少方法，特点和区别在哪

  前言在平常的样式排版中，我们经常遇到将某个模块隐藏的场景通过css隐藏元素的方法有很多种，它们看起来实现的效果是一致的但实际上每一种方法都有一丝轻微的不同，这些不同决定

• 在CSS去掉table表格边距的方法是什么

  在css中，可以利用“border-style”属性让table元素去掉边框，该属性的作用就是设置元素的边框样式，当属性的值为“none”时，会去掉元素的边框，语法为“表格元素{border-style:none;}”。