如何用 BEM 来规范您的 CSS 的代码(实例篇）

  通常我们会把界面进行分析，根据需要将界面中有一定意义且重复出现的单元规划为组件，下面就是一个两个具有不同风格但结构相同的卡片，卡片有图片、标题和说明。

首先我们定义 card 如图，card 是我们组件的名称，需要具有一定意义且唯一。可以作为命名空间与其他组件进行区分。

card--light card 后面紧跟两个中划线后表示修饰，所谓修饰就是样式，也就是表面 card 的是什么风格的。我们这里有两种样式分别为白色背景和深灰背景的 card。

card--light 的 css 代码展示

card--dark 的 css 代码展示，修饰应该不会涉及到 card 的结构，多半是与具体颜色，内外边距以及文字样式有关的代码。这里指明是与颜色相关，我们就需要其他像 padding box-shodow margin 这样两个风格共享的样式提取到结构 card 定义中。

在 card--light 和 card--dark 仅保留两种风格不同的样式。

组件是由元素组成的，每一个元素名称定义为组件名称__元素名称，也就是组件名加两个下划线连接元素名，在组件内元素名称需要是唯一的。这一点应该很好理解