BEM的用法是什么？BEM命名规则要注意什么？
发布时间：2022-01-20 16:25:28 所属栏目：语言 来源：互联网
导读：这篇文章给大家分享的是有关BEM的内容。一些朋友可能对BEM是什么，BEM的用法等等不是很了解，因此本文就给大家详细介绍一下BEM，感兴趣的朋友就继续往下看吧。 什么是BEM BEM（块，元素，修饰符）是基于组件的Web开发的一种前端命名方法论，主要针对CSS。其
|
这篇文章给大家分享的是有关BEM的内容。一些朋友可能对BEM是什么，BEM的用法等等不是很了解，因此本文就给大家详细介绍一下BEM，感兴趣的朋友就继续往下看吧。 什么是BEM BEM（块，元素，修饰符）是基于组件的Web开发的一种前端命名方法论，主要针对CSS。其背后的想法是将用户界面分为独立的块。即使使用复杂的UI，这也使界面开发变得容易和快速，并且允许重用现有代码而无需复制和粘贴。 优势 避免样式冲突 减小名称长度 提高可阅读性 增加样式重用 怎么使用BEM Block 一个功能独立的页面组件，可以重复使用 块不应影响其环境，这意味着您不应设置块的外部几何形状（边距）或位置 <!-- good --> < div class = "header" > </ div > <!-- bad red-text 是描述外观 --> < div class = "red-text" > </ div > Element 块的复合部分，不能单独使用 元素全名的结构为block-name__element-name <!-- 块 `search-form` --> <form class="search-form"> <!-- `input button` 元素 在 `search-form` 块中 --> <input class="search-form__input"> <button class="search-form__button">Search</button> </form> 一个元素始终是块的一部分，而不是另一个元素，因此元素名称不可定义为 block__elem1__elem2 的层次结构 <!-- good 遵循 `block-name__element-name` --> <form class="search-form"> <div class="search-form__content"> <input class="search-form__input"> <button class="search-form__button">Search</button> </div> </form> <!-- bad ' search-form__content__button ' 不遵循 `block-name__element-name` --> <form class="search-form"> <div class="search-form__content"> <input class="search-form__content__input"> <button class="search-form__content__button">Search</button> </div> </form> 元素始终是一个块的一部分，您不应该与该块分开使用 <form class="search-form"> <!-- good 元素在块 search-form 的里面 --> <input class="search-form__input"> <button class="search-form__button">Search</button> </form> <form class="search-form"></form> <!-- bad 元素不在块 search-form 的里面 --> <input class="search-form__input"> <button class="search-form__button">Search</button> Modifier 定义块或元素的外观，状态或行为的实体 修饰符的两种类型 Boolean 修饰符全名的结构遵循以下模式： block-name_modifier-name block-name--modifier-name block-name_element-name_modifier-name block-name_element-name--modifier-name <form class="search-form search-form_focused"> <input class="search-form__input"> <!-- 'disabled' 是 'button' 的元素 --> <button class="search-form__button search-form__button_disabled">Search</button> </form> 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 <form class="search-form search-form_theme_islands"> <input class="search-form__input"> <!-- good `button` 的修饰符 `size` 的值是 `m` --> <button class="search-form__button search-form__button_size_m">Search</button> </form> <form class="search-form search-form_theme_islands search-form_theme_lite"> <input class="search-form__input"> <!-- bad 不可同时使用两个不同值的相同修饰符 --> <button class="search-form__button search-form__button_size_s search-form__button_size_m"> </button> </form> 不能将修饰符与修饰的块或元素隔离使用。修饰符应更改实体的外观，行为或状态，而不是替换它 <!-- good --> <form class="search-form search-form_theme_islands"> <input class="search-form__input"> <button class="search-form__button">Search</button> </form> <!-- bad 缺少了块名称 'search-form' --> <form class="search-form_theme_islands"> <input class="search-form__input"> <button class="search-form__button">Search</button> </form> 在修饰符和元素名称中添加块名称的好处 有助于减少一个块的元素和修饰符对另一个块的实现的影响 可更清楚的知道修饰符应用于该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 <div class="van-doc"> <div class="van-doc-header"> <div class="van-doc-row"> <div class="van-doc-header__top"> <a class="van-doc-header__logo">搜索</a> <ul class="van-doc-header__top-nav"> <li class="van-doc-header__top-nav-item"> <a class="van-doc-header__logo-link"> </li> </ul> </div> </div> </div> <div class="van-doc-container van-doc-row van-doc-container--with-simulator"> ...... </div> </div> weui 组件 css 命名 使用的命名是 React命名风格：block-name__element-name_modifier-name <div class="page button js_show"> <div class="page__hd"> <h1 class="page__title">Button</h1> <p class="page__desc">按钮</p> </div> <div class="page__bd"> <div class="button-sp-area"> <a class="weui-btn weui-btn_primary">页面主操作</a> <a class="weui-btn weui-btn_loading">页面主操作</a> <a class="weui-btn weui-btn_disabled>页面主操作</a> <a class="weui-btn weui-btn_default">页面次要操作</a> <a class="weui-btn weui-btn_warn">警告类操作</a> </div> .... <div class="button-sp-area cell"> （编辑：玉林站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
