学习笔记《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》

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