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命名的更多相关文章
- 更好用的css命名方式——BEM命名
一.什么是BEM? BEM代表块(Block),元素(Element),修饰符(Modifier).无论是什么网站页面,都可以拆解成这三部分. 二.带你认识网页 我们来看一下qq的官网,它可以由三个块 ...
- CSS BEM 命名规范简介
[前言] BEM 是一个简单又非常有用的命名约定.让你的前端代码更容易阅读和理解,更容易协作,更容易控制,更加健壮和明确,而且更加严密.这篇文章主要介绍了CSS BEM 命名规范简介(推荐)的相关资料 ...
- 一篇关于BEM命名规范
一直以来自己对命名都是比较混乱的,并没有一个比较好的格式来命名,最近自己碰巧学习到了BEM命名规范,我想谈谈自己的理解以供自己来学习,同时也可以和各位大佬一起学习. BEM是一个很有用的方法可以创建复 ...
- CSS — BEM 命名规范
推荐阅读: https://juejin.im/post/5b925e616fb9a05cdd2ce70d 1 什么是 BEM 命名规范 Bem 是块(block).元素(element).修饰符(m ...
- BEM命名及其在sass中的实践
Why use it 近几年web应用的发展可以用疯狂来形容,依靠浏览器的支持以及前端技术和框架的发展,很多应用已经把大量的逻辑从服务器端迁移到了浏览器端,使用前后端分离技术,浏览器端与用户进行交互来 ...
- 使用BEM命名规范来组织CSS代码
BEM 是 Block(块) Element(元素) Modifier(修饰器)的简称 使用BEM规范来命名CSS,组织HTML中选择器的结构,利于CSS代码的维护,使得代码结构更清晰(弊端主要是名字 ...
- CSS 中 BEM命名方式
BEM的意思就是块(block).元素(element).修饰符(modifier),是一种CSS Class 命名方法. 类似于: .block{} .block__element{} .block ...
- CSS BEM 命名方式
简介 简易 css 命名方式,减小命名冲突,使得 css 更有组织感和识别感.但如今写 react 项目大多可以忽略对 css 的命名约束了. 官网介绍:http://getbem.com/intro ...
- css命名规范: BEM 的命名法
整理自:前端早读课[第1183期]这些 CSS 命名规范,将省下你大把调试时间 试图解决 3 类问题: 仅从名字就能知道一个 CSS 选择器具体做什么 从名字能大致清楚一个选择器可以在哪里使用 从 C ...
随机推荐
- 重庆OI2017 小 Q 的棋盘
小 Q 的棋盘 时间限制: 1 Sec 内存限制: 512 MB 题目描述 小Q正在设计一种棋类游戏.在小Q设计的游戏中,棋子可以放在棋盘上的格点中.某些格点之间有连线,棋子只能在有连线的格点之间移 ...
- 如何将变量id添加到jquery的选择器中
今天在做广州仲裁委员会的系统时这样的一个需求,需要在页面一加载的时候查询各个项目的案件数,这里有很多个项目,一开始我是这样写的: 代码如下: $.get(assignedCaseUrl,functio ...
- mbr gpt
超过2T硬盘的磁盘要用gpt格式,准确地说,应该是分区超过2T地硬盘要选用GPT模式. 做个小推广:程序员经常久坐,颈椎毛病比较多,特别推荐ventry颈椎保健枕
- 洛谷 P1186 玛丽卡
P1186 玛丽卡 题目描述 麦克找了个新女朋友,玛丽卡对他非常恼火并伺机报复. 因为她和他们不住在同一个城市,因此她开始准备她的长途旅行. 在这个国家中每两个城市之间最多只有一条路相通,并且我们知道 ...
- VB.NET机房收费 & 抽象工厂模式
学习设计模式的时候,提到了一个专门訪问数据库的模式-抽象工厂模式,记得当时举样例理解的时候并未设计到数据库,仅仅是大概了了解了一下,如今对于机房收费系统涉及到了数据库的管理,借此机会好好学习一下.用常 ...
- ip地址转换成16进制long
<span style="font-size:18px;">public class IpUtil { /** * ip地址转换成16进制long * @param i ...
- 包含utf8字符的 pickle 转 json的大坑处理过程
背景:希望将pickle转换为json,由于pickle里有utf8的字符,因此转换失败. 转换代码如下: ''' Convert a pkl file into json file ''' impo ...
- c++之——————各种变量
对我们程序员来讲,“变量”和“对象”是可以相互互换使用的.-------------开篇之词. 变量:提供一个具有名字的可供程序操作的存储空间.由类型说明符和其后紧跟的数个列表组成,其中变量名之间使用 ...
- [JavaEE] JBoss主要版本下载链接一览
URL: http://teddysun.com/260.html JBoss在2006年被 RedHat 收购.在各种 J2EE 应用服务器中,JBoss 是最受欢迎而且功能最为强大的应用服务器.不 ...
- 搭建go开发环境
一.go下载安装 进入该网站 https://golang.google.cn/dl/ 选择相应的操作系统下载安装包 Linux/Mac OS X 安装 1.下载 go1.10.3.linux-am ...