学习笔记《BEM》

作者: 马文Marvin | 来源:发表于2016-10-13 18:36 被阅读41次

BEM 是 Yandex 提出的一种 CSS 命名法,初衷是为了解决CSS命名冲突,但是会牺牲一点阅读性,配合 Sass 的方式来撰写 BEM 是比较推荐的方式

BEM的意思就是块(block)、元素(element)、修饰符(modifier)

.block{}
.block__element{}
.block--modifier{}
  • .block 代表了更高级别的抽象或组件。
  • .block__element 代表.block的后代,用于形成一个完整的.block的整体。
  • .block--modifier 代表.block的不同状态或不同版本。
.site-search{} /* 块 */
.site-search__field{} /* 元素 */
.site-search--full{} /* 修饰符 */

关于 BEM 的介绍文章:
https://www.smashingmagazine.com/2012/04/a-new-front-end-methodology-bem/

如何结合 Sass 使用 BEM:
https://mindtheshift.wordpress.com/2014/10/15/getting-the-best-out-of-bem-with-sass/

如何结合 Scss 使用 BEM:
http://mathayward.com/modular-css-with-sass-and-bem/

接下来会在新的页面上使用 BEM 的命名方式,在使用的过程中会进行具体的补充

相关文章

  • 学习笔记《BEM》

    BEM 是 Yandex 提出的一种 CSS 命名法,初衷是为了解决CSS命名冲突,但是会牺牲一点阅读性,配合 S...

  • CSS命名规范 BEM

    通过阅读Element-UI源码来分析学习BEM规范, 使用BEM规范语义化更加鲜明,阅读更容易理解,意思是 块,...

  • BEM(CSS命名规范)

    在Web项目中规范css命名还是很有必要的,BEM传送门。 通过阅读Element-UI源码来分析学习BEM规范,...

  • BEM学习小结

    BEM顾名思义是由块(Block)、元素(Element)和修饰符(Modifier)这三个不同组成的。 1)块即...

  • BEM规范学习

    最近导师推荐的css命名规范,大概看了一下,感觉还不错,以后可以试试,方便自己管理代码然后还做了一些笔记,帮助自己...

  • 【译】前端BEM命名方法论之三:命名惯例

    【译】前端BEM命名方法论之一:BEM 官方简介文档【译】前端BEM命名方法论之二:BEM中的重要概念 使用 BE...

  • BEM--CSS命名规范

    什么是BEM? BEM代表块(Block),元素(Element),修饰符(Modifier)。BEM是一种书写C...

  • CSS命名——BEM

    前言 详情见参考,下面的只是部分摘要 BEM是什么 BEM是一种CSS命名规范。BEM代表 “块(block),元...

  • 【译】前端BEM命名方法论之二:BEM中的重要概念

    【译】前端BEM命名方法论之一:BEM 官方简介文档【译】前端BEM命名方法论之三:命名惯例 重要概念 Block...

  • 【译】前端BEM命名方法论之一:BEM 官方简介

    【译】前端BEM命名方法论之二:BEM中的重要概念【译】前端BEM命名方法论之三:命名惯例 Yandex 发明 B...

网友评论

    本文标题:学习笔记《BEM》

    本文链接:https://www.haomeiwen.com/subject/dpawyttx.html