学习笔记《BEM》

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 的命名方式,在使用的过程中会进行具体的补充

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 不是所有的问题依靠使用工具都能完美解决,软件的参与者不是工具而是人。工程师之间怎样合作与配合,同样很重要。编码约定...
    何幻阅读 5,845评论 0 3
  • 【译】前端BEM命名方法论之一:BEM 官方简介文档【译】前端BEM命名方法论之三:命名惯例 重要概念 Block...
    咚门阅读 10,644评论 0 7
  • 【译】前端BEM命名方法论之一:BEM 官方简介文档【译】前端BEM命名方法论之二:BEM中的重要概念 使用 BE...
    咚门阅读 7,965评论 0 4
  • 大四快实习了,大家都在忙着实习找工作。我也不知道自己适合什么岗位,舍友说不管什么职位你都应该先去试试,其实也...
    川瑜文梅阅读 1,482评论 0 1