1、block不影响自身布局,也就是说不能设置margin和position属性。
2、不能在BEM中使用元素选择器和ID选择器。
3、elementy只能作为block的一部分使用,不能独立使用。
附上官网介绍http://getbem.com/introduction/
介绍
在较小的宣传册网站上,您如何组织自己的风格通常不是一个大问题。你进去,写一些CSS,甚至可能是一些SASS。您可以使用SASS的生产设置将其全部编译到单个样式表中,然后将其聚合以将所有样式表从模块转换为一个漂亮整洁的包。
但是,当涉及更大,更复杂的项目时,如何组织代码是至少在以下三种方式中提高效率的关键:它会影响您编写代码所需的时间,您需要多少代码写,以及您的浏览器必须加载多少。当您与众不同的团队合作时,这一点变得尤为重要。
对于具有遗留代码的长期项目也是如此(阅读“如何使用Sass和SMACSS扩展和维护遗留CSS” - 一些不错的SMACSS和BEM混合)。
方法
有很多方法可以减少CSS占用空间,组织程序员之间的合作并维护大型CSS代码库。这在Twitter,Facebook和Github等大型项目中显而易见,但其他项目通常会迅速成长为“巨大的CSS文件”状态。
使用CSS“对象”分隔容器和内容
样式指南,用于为CSS规则编写五个类别的CSS
结构化类名和有意义的连字符
将风格分解为原子或不可分割的碎片
为什么BEM超过其他人?
无论您选择在项目中使用何种方法,您都将受益于更加结构化的CSS和UI的优势。有些风格不那么严格,而且更灵活,而有些则更容易理解并适应团队。
我选择BEM而不是其他方法的原因归结为:它比其他方法(即SMACSS)更少混淆,但仍然为我们提供了我们想要的良好架构(即OOCSS)和可识别的术语。
Mark McDonnell,BEM可维护的CSS
块,元素和修饰符
听到BEM是该方法的关键元素的缩写 - 块,元素和修饰符,您不会感到惊讶。BEM的严格命名规则可以在这里找到。
块
独立实体,它本身就是有意义的。
例子
header
,container
,menu
,checkbox
,input
元件
块的一部分,没有独立的含义,并且在语义上与其块相关联。
例子
menu item
,list item
,checkbox caption
,header title
修改
块或元素上的标志。使用它们来改变外观或行为。
例子
disabled
,highlighted
,checked
,fixed
,size big
,color yellow
在引擎盖下
让我们看看如何在BEM中实现页面上的一个特定元素。我们button
将从GitHub采取:
对于通常情况,我们可以有一个普通按钮,对于不同情况,我们可以有两个状态。因为我们的风格深受类选择与BEM块,我们可以用我们想要的(任何标签实现它们button
,a
甚至div
)。命名规则告诉我们使用block--modifier-value
语法。
HTML
<button class =“button”>
正常按钮
</按钮>
<button class =“按钮按钮 - 状态成功”>
成功按钮
</按钮>
<button class =“button button - state-danger”>
危险按钮
</按钮>
CSS
.button {
display:inline-block;
border-radius:3px;
填充:7px 12px;
边框:1px solid#D5D5D5;
background-image:线性渐变(#EEE,#DDD);
字体:700 13px / 18px Helvetica,arial;
}
.button - state-success {
颜色:#FFF;
背景:#569E3D线性梯度(#79D858,#569E3D)repeat-x;
border-color:#4A993E;
}
.button - state-danger {
颜色:#900;
}
优点
模块化
块样式永远不依赖于页面上的其他元素,因此您不会遇到级联问题。
您还可以将已完成项目中的块传输到新项目。
可重用性
以不同方式组合独立块,并智能地重用它们,减少了您必须维护的CSS代码量。
有了一套样式指南,您可以构建一个块库,使您的CSS超级有效。
结构体
BEM方法为您的CSS代码提供了一个简单易懂的结构。
进一步阅读
- “为什么是BEM?” 简而言之
- MindBEMding - 让你的头脑圆形BEM语法
- CSS指南
- 小型项目的BEM方法
- BEM它!适用于Brandwatch
- 使用和滥用 - CSS继承与我们对级联的误用。
- 空间物体 - 使用SMACSS和BEM进行模块化SASS开发的样式指南
- 如何使用Sass和SMACSS扩展和维护旧版CSS
- 使用BEM和Sass构建模块化的My Health技能
- 建立我的健康技能 - 第3部分
案例分析
我们希望尽快写出“如何将现有项目迁移到BEM”。在此期间,您可以观看Nicole Sullivan的精彩演示 - “ CSS预处理器性能 ”。她非常了解她在大多数网站遇到的问题,并提供了跟踪和处理问题的方法。