css命名规范-BEM学习笔记

1.简介

BEM全称Block Element Modifier,翻译过来就是块,元素,修饰词,是由Yandex 开发并推广，旨在帮助开发者创建可维护的、模块化的 CSS 代码命名规范

2.规范

BEM官网

1.Block

含义:封装一个独立实体，该实体本身就很有意义。虽然块可以嵌套并相互交互，但在语义上它们保持相等;没有优先级或层次结构。没有 DOM 表示的整体实体（例如控制器或模型）也可以是块。

命名:块名称可以由小写的拉丁字母、数字和破折号组成。要形成 CSS 类，请为命名空间添加一个短前缀：.block。长块名称中的空格将替换为短划线。

eg:仅使用类名选择器。没有标签名称或 ID。不依赖于页面上的其他块/元素。.block { color： #042;

2.Element

含义:块的一部分，没有独立的含义。任何元素在语义上都与其块相关联。

命名:元素名称可以由小写的拉丁字母、数字、破折号和下划线组成。CSS 类的形式为块名称加上两个下划线和元素名称：.block__elem。长元素名称中的空格将替换为短划线。

eg:<div class="block"><span class="block__elem"></span></div>

3.Modifier

含义:块或元素上的标志。使用它们来改变外观、行为或状态。

命名:修饰符名称可以由小写的拉丁字母、数字、破折号和下划线组成。CSS 类由块或元素的名称加上两个破折号组成：.block--mod 或 .block__elem--mod 和 .block--color-black 和 .block--color-red。复杂修饰符中的空格将替换为破折号。

eg:使用修饰符类名作为选择器：.block--hidden { } 要根据块级修饰符更改元素：.block--mod .block__elem { } 元素修饰符：.block__elem--mod { }

Example:

假设您有带有修饰符 themes： “xmas” 和 simple： true 且带有元素输入和提交的块表单，以及禁用了其自身修饰符的元素提交： true 表示在未填写表单时不提交表单：

html
<form class="form form--theme-xmas form--simple">
  <input class="form__input" type="text" />
  <input
    class="form__submit form__submit--disabled"
    type="submit" />
</form>

css
.form { }
.form--theme-xmas { }
.form--simple { }
.form__input { }
.form__submit { }
.form__submit--disabled { }