CSS命名规范 BEM

通过阅读Element-UI源码来分析学习BEM规范, 使用BEM规范语义化更加鲜明,阅读更容易理解,
\color{red}{B}意思是\color{red}{Block} 块,
\color{red}{E}意思是\color{red}{Element} 元素,
\color{red}{M}意思是\color{red}{Modifier} 修饰器。
块与元素之间使用__ 双下划线连接,块或元素与修饰器之间使用-- 双中划线连接。
BEM中块、元素、修饰器的命名如果存在多个单词使用- 单中划线连接

<button class="button">
 Normal Button
</button>
<button class="button--state-success">
  Success Button
</button>
<div class="footer">
  <button class="footer__button">footer button</button>
  <button class="footer__button--state-success">footer button</button>
</div>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 本文章参考链接:https://blog.csdn.net/qq_27263045/article/details...
    艾萨克菊花阅读 248评论 0 0
  • 什么是BEM BEM其实是块(block)、元素(element)、修饰符(modifier)的缩写,利用不同的区...
    小母鸡叽叽叽阅读 832评论 0 4
  • 最近在写博客主题的时候发现一个很严重的问题,由于css的命名并不是很规范,导致自己在后期修改的时候很是头疼,有些样...
    枫s的思念阅读 6,006评论 0 8
  • 背景:最近上了一个前端项目,技术栈是angular + ionic。在听别的前端人员讨论的时候听到一个词叫BEM,...
    前端进城打工仔阅读 404评论 0 1
  • BEM 基于组件方式的web开发方法,基本思想是将用户界面分成独立的模块。 Block(块) 通常指模块,组件 B...
    xwwawj阅读 961评论 0 2