CSS 的命名规范又叫做BEM规范,为的是竣事杂乱的命名方式,到达一个语义化的CSS命名方式。 BEM是三个单词的缩写:Block(块)代表更高级别的抽象或组件,Element(米素) Block的后裔,以及Modifier(修饰) 差别状态的修饰符。
命名方式:
.block__element--modifier { display: flex; } .block--modifier { display: flex; } .block__element { display: flex; } <p class="header"> <p class="header__body"> <button class="header__button--primary"></button> <button class="header__button--default"></button> </p> </p>
通过BEM的命名规范我们可以到达一个什么目的呢?就是有一个清晰的形貌,从上面的代码中我们可以看到一层一层的清晰明晰,而且有一个清晰的结构。
block 代表一个更高级别的抽象或者是一个组件,它仅仅作为一个界限。它主要的功效有下面三点:
卖力形貌功效的,不应该包罗状态。
/* correct */ .header { } /* wrong */ .header--select { }
不影响自身结构,不包罗详细的样式,也就是block内里不应该加样式
/* correct */ .header { } /* wrong */ .header { margin-top: 50px; }
不能使用米素选择器和ID选择器
/* correct */ .header { } /* wrong */ .header a { margin-top: 50px; }
是用一个双下划线离隔
/* correct */ .header__body { margin-top: 50px; } /* wrong */ .header .body { margin-top: 50px; }
示意的是目的,而不是状态,如下例子:目的是在header下面界说三个区域 body、logo、title,然则并没有指定任何状态。
.header__body { margin-top: 50px; } .header__logo { margin-top: 50px; } .header__title { margin-top: 50px; }
不能脱离Block父级单独使用
/* correct */ <p class="header"> <p class="header__body"> <button class="header__button--primary"></button> <button class="header__button--default"></button> </p> </p> /* wrong */ <p> <p class="header__body"> <button class="header__button--primary"></button> <button class="header__button--default"></button> </p> </p>
示意的是一个状态,是用双横杠离开的。
.header__button--default { background: none; } Boolean .header__button--select { background: none; } 枚举 .header__button--primary { background: #329FD9; }
不能单独使用
/* correct */ <p class="header"> <p class="header__body"> <button class="header__button--primary"></button> <button class="header__button--default"></button> </p> </p> /* wrong */ <p> <p> <button class="header__button--primary"></button> <button class="header__button--default"></button> </p> </p>
在Sass中的使用
.header { &__body { padding: 20px; } &__button { &--primary { background: #329FD9; } &--default { background: none; } } }
在Less中的使用
@classname: header; .@{classname} { .@{classname}__body { padding: 20px; } .@{classname}__button { .@{classname}__button--primary { background: #329FD9; } .@{classname}__button--default { background: none; } } }
1.阿里云: 本站现在使用的是阿里云主机,平安/可靠/稳固。点击领取2000米代金券、领会最新阿里云产物的种种优惠流动点击进入
2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各种产物的最新流动,优惠券领取点击进入
3.广告同盟: 整理了现在主流的广告同盟平台,若是你有流量,可以作为参考选择适合你的平台点击进入
链接: http://www.fly63.com/article/detial/4032