Bem命名

BEM思想
1. 什么是BEM:
　　BEM:(Block块,Element元素,Modifier修饰符)一种命名规范,
　　　　其核心思想是将页面拆分成一个个独立的富有语义的块（blocks）,从而使得团队在开发复杂的项目变得高效，并且十分有利于代码复用，即便团队引入新成员，也容易维护。
　　　　基本命名模式
　　　　　　block{},
　　　　　　block__element{},
　　　　　　block--modifier{},
2. BEM各元素:
　　* Block ：Block是逻辑和功能独立的单元，类似于组件。每个block包含自身的行为（js）、结构（HTML模板）、表现（css）。block的独立性有利于代码的复用，有利于项目管理。
　　　　特点：

　　　　　　+ block名描述block功能，不包括状态，可以复用，嵌套
　　　　　　+ block不影响自身布局，所以就不能设置margin，position属性
　　　　　　+ 不在Bem中使用元素选择器，和id选择器
　　　　　　+ 在同一页面中不依赖于其他block或element；

　　　　例子:

　　　　　　<button class="button" />
　　　　　　<button class="button button--success"/>
　　　　　　<button class="button button--danger"/>
　　* Element: Element是Block的组成部分，不脱离Block使用，嵌套使用，可嵌套多个数量，相互嵌套
　　　　特点：

　　　　　　+ element表示目的(item,text...),而不是状态(red,disabled...)
　　　　　　+ element的命名方式：block-name__element-name,使用双下划线连接block名和element名
　　　　例子:
　　　　　　<form class="search-form">
　　　　　　　　<input class="search-form__input"/>
　　　　　　</form>
　　　　与block的联系:
　　　　　　+ block确定命名空间，确保element不会被其他block影响
　　　　　　+ element只能作为block的一部分使用，不可独立使用
　　　　　　　　例子：
　　　　　　　　　　error:
　　　　　　　　　　<form class="search-form__input"/>
　　　　　　　　　　<button class="search-form__button"/>
　　　　　　+ block不一定含有element

　 * Modifier ：修饰符，用以展示状态，表现（size,color,...），用它们来改变外观或行为。
　　　　使用双中划线和block或element相连，
　　　　例子：
　　　　　　<form class="search-form">
　　　　　　　　<input class="search-form__input">
　　　　　　　　<button class="search-form__button search-form__button--disabled">
　　　　　　</form>
　　　　*Modifier不单独使用，使用时需要对应的block或element*
3. Bem展示的思维方式：
　　　　Bem将页面分为多个block组成，其下同时是有多个element构成，每个element,block之间是相互独立的，页面是由组件组合而成，而组件与组件之间是相互组合，而不是依赖

巴特西

Bem命名

最新文章

热门文章