BEM前端命名规则

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文件”状态。

OOCSS

使用CSS“对象”分隔容器和内容

SMACSS

样式指南，用于为CSS规则编写五个类别的CSS

SUITCSS

结构化类名和有意义的连字符

原子

将风格分解为原子或不可分割的碎片

 

为什么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预处理器性能 ”。她非常了解她在大多数网站遇到的问题，并提供了跟踪和处理问题的方法。