- 中划线 :仅作为连字符使用,表示某个块或者某个子元素的多单词之间的连接记号。
__ 双下划线:双下划线用来连接块和块的子元素
_ 单下划线:单下划线用来描述一个块或者块的子元素的一种状态
BEM 命名约定的模式是:
.block {}
.block__element {}
.block--modifier {}
block
代表了更高级别的抽象或组件。block__element
代表 .block 的后代,用于形成一个完整的 .block 的整体。block--modifier
代表 .block 的不同状态或不同版本。使用两个连字符和下划线而不是一个,是为了让你自己的块可以用单个连字符来界定。如:
.sub-block__element {}
.sub-block--modifier {}
BEM的关键是,可以获得更多的描述和更加清晰的结构,从其名字可以知道某个标记的含义。于是,通过查看 HTML 代码中的 class 属性,就能知道元素之间的关联。
常规的命名法示例:
class="article">
<div class="body">
<button class="button-primary">button>
<button class="button-success">button>
div>
复制代码
使用了 BEM 命名方法的示例:
class="article">
<div class="article__body">
<div class="tag">div>
<button class="article__button--primary">button>
<button class="article__button--success">button>
div>
复制代码
.hide {
display: none !important;
}
以 LESS 为例:
.article {
max-width: 1200px;
&__body {
padding: 20px;
}
&__button {
padding: 5px 8px;
&--primary {background: blue;}
&--success {background: green;}
}
}
Vue.js
/ React
/ Angular
等前端框架中,都有 CSS 组件级作用域的编译实现,其基本原理均为利用 CSS 属性选择器特性,为不同的组件生成不同的属性选择器。
.form { }
.form--theme-xmas { }
.form--simple { }
.form__input { }
.form__submit { }
.form__submit--disabled { }
//对应的HTML结构如下:
class="form form--theme-xmas form--simple">
<input class="form__input" type="text" />
<input
class="form__submit form__submit--disabled"
type="submit" />
复制代码