一篇关于BEM命名规范

【一篇关于BEM命名规范】的更多相关文章

一篇关于BEM命名规范

一直以来自己对命名都是比较混乱的,并没有一个比较好的格式来命名,最近自己碰巧学习到了BEM命名规范,我想谈谈自己的理解以供自己来学习,同时也可以和各位大佬一起学习. BEM是一个很有用的方法可以创建复用组件和前端代码有三个特性. 易用性,使用BEM只需要使用BEM的命名规范就可以. 单元性,使用独立的块和CSS选择器,可以使你的代码可重用和单元化. 灵活性,使用BEM后,方法和工具可以按照自己喜欢的方式去组织和配置. BEM的简介 BEM是一个强大而简单的命名规范,使得代码更容易让人理解,容易…

CSS BEM 命名规范简介

[前言] BEM 是一个简单又非常有用的命名约定.让你的前端代码更容易阅读和理解,更容易协作,更容易控制,更加健壮和明确,而且更加严密.这篇文章主要介绍了CSS BEM 命名规范简介(推荐)的相关资料,感兴趣的小伙伴们可以参考一下 [主体] 1 什么是 BEM 命名规范 Bem 是块(block).元素(element).修饰符(modifier)的简写,由 Yandex 团队提出的一种前端 CSS 命名方法论. BEM 是一个简单又非常有用的命名约定.让你的前端代码更容易阅读和理解,更容易协作…

CSS — BEM 命名规范

推荐阅读: https://juejin.im/post/5b925e616fb9a05cdd2ce70d 1 什么是 BEM 命名规范 Bem 是块(block).元素(element).修饰符(modifier)的简写,由 Yandex 团队提出的一种前端 CSS 命名方法论. - 中划线 :仅作为连字符使用,表示某个块或者某个子元素的多单词之间的连接记号. __ 双下划线:双下划线用来连接块和块的子元素 -- 双中划线:双中划线用来描述一个块或者块的子元素的一种状态 BEM 是一个简单又非…

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

BEM 是 Block(块) Element(元素) Modifier(修饰器)的简称使用BEM规范来命名CSS,组织HTML中选择器的结构,利于CSS代码的维护,使得代码结构更清晰(弊端主要是名字会稍长) 如何使用BEM 一个独立的(语义上或视觉上),可以复用而不依赖其它组件的部分,可作为一个块(Block) 属于块的某部分,可作为一个元素(Element) 用于修饰块或元素,体现出外形行为状态等特征的,可作为一个修饰器(Modifier) 在本规范中,以双下划线 __ 来作为块和元素的间隔…

css命名规范： BEM 的命名法

整理自:前端早读课[第1183期]这些 CSS 命名规范,将省下你大把调试时间试图解决 3 类问题: 仅从名字就能知道一个 CSS 选择器具体做什么从名字能大致清楚一个选择器可以在哪里使用从 CSS 类的名称可以看出它们之间的联系不知你是否见过这样的类名: .nav--secondary { ... } .nav__header { ... } 这就是 BEM 命名规范. 这个火柴人代表了一个组件,比如说一个设计区块. BEM 这里的 B 意为『区块』('Block'). 在实际中,这里…

前端css命名规范----BEM

一.什么是BEM BEM就是块(block).元素(element).修饰符(modifier),是由Yandex团队提出的一种前端命名方法论.这种巧妙的命名方法可以使css类对其他开发者来说更加透明且具有意义.BEM约定更加严格,而且包含更多的信息,它们用于一个团队开发一个耗时较大的项目. BEM的关键是光凭名字就可以告诉其他开发者某个标记是用来干什么的.通过浏览HTML代码中的class属性,就能够明白模块之间是如何关联的,有一些仅仅是组件,有一些则是这些组件的子孙或者是元素,还有一些是组件…