最新文章:

您的位置: 富录-前端开发|web技术博客 > HTML&&CSS > 浅谈团队开发中css的BEM命名风格

浅谈团队开发中css的BEM命名风格

发布时间:2022年05月19日 评论数:抢沙发阅读数: 1718

    点击查看原图

    前端在项目开发中经常遇到的问题

    团队开发中css的命名冲突

    为css的命名而绞尽脑汁

    css的命名五花八门

    开发时如何规范css的书写


    什么是BEM

    BEM是一种前端命名方法论,主要是针对CSS,意思是块(Block)、元素(Element)、修饰符(Modifier)的缩写。它Yandex团队提出,这种命名方法让CSS便于统一团队开发规范和方便维护,提高css的开发效率和可读性,可以很好的解决上面遇到的问题。


    BEM的命名格式


    block__element--modifier 或者是 block--modifier


    块(b)与元素(e)之间用双下划线“__”来连接

    元素(e)与修饰符(m)之间用双连字符“--”来连接


    用BEM模式命名的好处

    可以获得更多的描述和更清晰的结构,从命名就可以知道这个类的含义,就可以知道元素之间的关联,除此之外还能很好解决上面遇到的问题。


    使用范例

    截图.png

    <div class="btn btn--green">
       <i class="btn__icon"></i>
       <span class="btn__text">绿色按钮</span>
    </div>
    
    <div class="btn btn--red">
       <i class="btn__icon"></i>
       <span class="btn__text">红色按钮</span>
    </div>
    /*block*/
    .btn {
       padding: 5px 10px;
       margin-bottom: 10px;
       width: 70px;
       text-align: center;
       border-radius: 5px;
    }
    
    /*modifier*/
    .btn--green {
       background: green;
    }
    
    /*modifier*/
    .btn--red {
       background: red;
    }
    
    /*element*/
    .btn__icon {
       display: inline-block;
       width: 8px;
       height: 8px;
       background: black;
    }
    
    /*element*/
    .btn__text {
       color: white;
    }


    总结

    BEM最难的部分之一是明确作用域是从哪开始和到哪结束的,以及什么时候使用或不使用它,并不通篇都用BEM风格来命名,当需要明确关联性的模块关系时,应当使用BEM风格命名,如果简单的一个样式就没有使用的意义了。注意,要用在最适合的地方。


    如果对你有帮助,请给我留言,你们的支持是我分享的动力!!!

二维码加载中...
本文作者:DGF      文章标题: 浅谈团队开发中css的BEM命名风格
本文地址: https://www.arbays.com/post-182.html     本文已被百度收录!
版权声明:若无注明,本文皆为“富录-前端开发|web技术博客”原创,转载请保留文章出处。
挤眼 亲亲 咆哮 开心 想想 可怜 糗大了 委屈 哈哈 小声点 右哼哼 左哼哼 疑问 坏笑 赚钱啦 悲伤 耍酷 勾引 厉害 握手 耶 嘻嘻 害羞 鼓掌 馋嘴 抓狂 抱抱 围观 威武 给力
提交评论

清空信息
关闭评论