了解BEM
来源:互联网 发布:淘宝详情页自动生成 编辑:程序博客网 时间:2024/06/13 10:52
作为一个前端,写页面结构,写CSS怎么命名?
就算不用,但你的了解, 让自己的代码更规范。
BEM是什么
它是css命名的一种规范。试想,你写了一个页面,有input, button, div, 这些元素是什么样的关系,给他们添加样式的时候,怎么知道他们是一个页面的? 怎么知道input 是否放在div里面的? 不要急,这就说到了下面的命名之作用
BEM是怎么命名的
<html> <div class="loggin-from"> <input class="loggin-from__input"/> <button class="loggin-from__confim">确定</button> </div></html>
通过上面命名可以很直接看出,input 和button 在div 里面。
这里讲 后面的 __input/__confim 这里后面接两个下划线,表示的是div里面的子元素。
<html> <div class="loggin-from--big"> <input class="loggin-from__input"/> <button class="loggin-from__confim">确定</button> </div></html>
这里说, –big表示添加的描述, 很明显是大的注册表单的样式嘛。
BEM总结
好了, 这里loggin-from 相当于一块整体(block), 里面包含了元素input/button(element), 还有这个块或者一些元素的修饰big(modifier) => BEM
它一般和sass一起使用,在用@C代表块、 @d代表元素、 @m代码修饰符的时候, css可以这样写了
@C loggin-from { width: 100px; height: 100px; @m big { width: 200px; height: 200px; } @d input { color: red; } @d button { color: blue; }}
怎么样,这样是不是就不用写那么长了, 而且一看样式文件,就能知道页面布局是什么样的。
以上写法, 要通过sass 插件配置的
这里有一个包 ,可以使用sass-bem-constructor
阅读全文
0 0
- 了解BEM
- 什么事BEM
- BEM命名
- BEM的定义
- BEM的定义
- css 模块化规范bem
- CSS命名BEM规范
- BEM命名方式
- CSS bem命名规范
- BEM 命名规范
- BEM 命名规范
- 把BEM用起来
- 理解BEM的命名方式
- Web css named way BEM
- BEM + Emmet = 根本停不下来
- Atitit OOCSS vs bem
- 前端规范(ES6\BEM\OOCSS\SMACSS)
- 关于css的BEM命名规范
- AngularJS 应用身份认证的技巧
- TClientDataSet[1]: 浏览测试数据
- IntelliJ IDEA使用(一):创建maven web项目
- java 根据IP地址获取地理位置
- 《Scrum实战》定义DoD
- 了解BEM
- 【HDU1872】稳定排序(sort)
- Go语言学习笔记 --- 控制语句之if判断,循环语句for, switch语句和跳转语句
- 字节流和字符流转换、标准输入流和标准输出流、打印流、对象序列化、随机流
- AngularJS – 实现基于角色访问控制的 GUI
- 代价函数 cost function
- web项目部署详细步骤
- POJ 2349(Kruskal) Arctic Network
- 字符串