Block

!误区:这个block并非inline-block里的block,
而是将所有东西都划分为一个独立的模块,一个header是block,header里嵌套的搜索框是block,甚至一个icon一个logo也是block
block可以相互嵌套

Element
!误区:如果一个Element-son是另一个Element-father的子元素,
那么写法是 Block__Element-father__Element-son_Modifer,嵌套多了会很长么?
不是的!!!
一个Block下的所有Element无论相互层级如何,都要摊开扁平的属于Block
所以 BEM 最多只有 B+E+M 三级,不可能出现 B+E+E+..+E+M 超长class名,也要求E不能同名

Modifier
之前我们经常写的 .current .active 等表达状态

__双下划线代表B和E连接例如 menu__item
_单下划线代表B和M或E和M的连接 例如 menu_active 或 menu__item_active
-中划线同英语里做连字符例如 mod-menu 或 mod-menu__item 这里 B或E或M需要多个单词来描述,就使用中划线。

刚发现 CSS 还存在一个命名规范 B.E.M的更多相关文章

  1. 常用html、CSS、javascript前端命名规范

    无论是从技术角度还是开发视角,对于web前端开发规范文档都有一定规范,本文就css3和html5的发展前景总结了一系列的web开发文档,仅供大家参考. 规范目的: 为提高团队协作效率, 便于后台人员添 ...

  2. html、css、js的命名规范

    最佳原则 坚持制定好的代码规范. 无论团队人数多少,代码应该同出一门. 项目命名 全部采用小写方式, 以下划线分隔. 例:my_project_name 目录命名 参照项目命名规则: 有复数结构时,要 ...

  3. 这些 CSS 命名规范将省下你大把调试时间

    我听说很多开发者厌恶 CSS.而在我的经验中,这往往是由于他们并没有花时间来学习 CSS. CSS 算不上是最优美的『语言』,但迄今二十多年来,它都是美化 web 举足轻重的工具.从这点来说,也还算不 ...

  4. 前端开发规范：命名规范、html 规范、css 规范、js 规范

    上周小组的培训内容是代码可读性艺术,主要分享如何命名.如何优化代码排版,如何写好的注释.我们都知道写出优雅的代码是成为大牛的必经之路. 下面感谢一位前端开发小伙伴总结的前端开发规范,通过学习相关开发规 ...

  5. 通用CSS命名规范

    一．文件命名规范 样式文件命名主要的 master.css布局,版面 layout.css专栏 columns.css文字 font.css打印样式 print.css主题 themes.css [/ ...

  6. CSS命名规范参考及书写注意事项

    CSS书写顺序 *{ /*显示属性*/ display position float clear cursor … /*盒模型*/ margin padding width height /*排版*/ ...

  7. 前端开发规范：命名规范、HTML 规范、CSS 规范、JavaScript 规范

    一个好的程序员肯定是要能书写可维护的代码,而不是一次性的代码,怎么能让团队当中其他人甚至一段时间时候你再看你某个时候写的代码也能看懂呢,这就需要规范你的代码了.我是有一点强迫症的人,上周我们后端给我了 ...

  8. CSS 命名规范将省下调试时间

    我听说很多开发者厌恶 CSS.而在我的经验中,这往往是由于他们并没有花时间来学习 CSS. CSS 算不上是最优美的『语言』,但迄今二十多年来,它都是美化 web 举足轻重的工具.从这点来说,也还算不 ...

  9. 再探CSS 中 class 命名规范

    一直以来我的CSS 的 class命名都是比较随意,有时采用驼峰式.有时采用下划线,好像没有什么统一的标准,想到什么英文单词就拿过来用,这对于自己瞎写的小项目无伤大雅,遇到冲突的问题可稍加调整改变即可 ...

随机推荐

  1. 以iphone作为热点时ios程序中的UDP广播地址

    iPhone 开启热点后,会启用一个 172.20.10.0/28 的子网, 也就是最多15个ip地址,自己的地址是172.20.10.1, 广播地址是 172.20.10.15 ,不是传统的255. ...

  2. 记录一个EF连接查询的异常：the entity or complex type 'x' cannot be constructed in a linq to entities query

    问题解决连接:https://stackoverflow.com/questions/5325797/the-entity-cannot-be-constructed-in-a-linq-to-ent ...

  3. spring-mvc访问本地html文件

    项目中要用到在线预览word文档,刚开始考虑是要将word转成pdf文件,然后再直接在浏览器打开pdf文档即可, 但是项目部署在Linux下,在网上搜了一下没有找到合适的方法, 后来项目组讨论用POI ...

  4. 洛谷 P1111 修复公路

    题目链接 https://www.luogu.org/problemnew/show/P1111 以后只发题目链接!!! 题目大意 给出A地区的村庄数N,和公路数M,公路是双向的.并告诉你每条公路的连 ...

  5. wx:for获取 data-xxx 自定义的属性

    今天在写wx:for循环时,在事件对象上e.target.dataset上一直拿不到自定义属性 data-id. 示例: <view wx:for='{{list}}' wx:key='{{it ...

  6. centos7设置httpd

    1.httpd开机自启动 systemctl enable httpd.service 2.httpd开机不自启动 systemctl disable httpd.service 3.启动httpd ...

  7. centos7 firewalld 开放端口

    开通80端口 firewall-cmd --zone=public --add-port=80/tcp --permanent --zone #作用域 --add-port=80/tcp #添加端口, ...

  8. pwn学习（2）

    0x00 序 ​ 之前学了蒸米大佬的ropx86,本次学习 ropx64 0x01 Leak Memory & Dynelf ​ 蒸米大佬使用pwntools的Dynelf模块来获取函数地址, ...

  9. java中枚举起别名

    public enum Gender { MALE("男"),FELMALE("女"); private final String cValue; privat ...

  10. Snakes 的 Naïve Graph

    题解: 首先分析一下这个问题 发现等价于是求n之内与n互素的数的个数,即欧拉函数 这个可以线性筛 但发现还应该减去$x^2==1$的情况 这个东西不是那么好处理 考虑用中国剩余定理拆 因为$p1^{a ...