使用BEM命名规范来组织CSS代码

如何使用BEM

一个独立的(语义上或视觉上),可以复用而不依赖其它组件的部分,可作为一个块(Block)

属于块的某部分,可作为一个元素(Element)

用于修饰块或元素,体现出外形行为状态等特征的,可作为一个修饰器(Modifier)


在本规范中,以双下划线 __ 来作为块和元素的间隔,以单下划线 _ 来作为块和修饰器 或 元素和修饰器的间隔,以中划线 - 来作为块|元素|修饰器 名称中多个单词的间隔

保证各个部分只有一级 B__E_M,修饰器需要和对应的块或元素一起使用,避免单独使用

BEM 规范虽然结构比较清晰,但有时候会产生代码冗余。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • BEM 基于组件方式的web开发方法,基本思想是将用户界面分成独立的模块。 Block(块) 通常指模块,组件 B...
    xwwawj阅读 4,489评论 0 2
  • CSS是一门15分钟就能入门,但是却需要很长很长的时间才能掌握好的语言。它有着它自身的一些复杂性与局限性。其中非常...
    AlienZHOU阅读 5,670评论 0 8
  • BEM 是对 CSS 命名的一种规范,推崇将 WEB 页面模块化,从而提高代码的重用度,减少后期维护的成本。原文 ...
    Jadyn阅读 11,105评论 0 12
  • 转自BEM —— 源自Yandex的CSS 命名方法论 BEM的意思就是块(block)、元素(element)、...
    while1love阅读 3,701评论 0 8
  • 命名规范 名字的重要性不言而喻,在项目愈发复杂的今天,大量的变量和方法充斥在项目中,很多时候我们的时间浪费在识别乱...
    Schoilar阅读 7,399评论 0 1

友情链接更多精彩内容