BEM 命名规范

最新推荐文章于 2023-11-19 20:18:53 发布
最新推荐文章于 2023-11-19 20:18:53 发布
阅读量525 收藏
点赞数
分类专栏： web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Tan_D/article/details/78411346
版权

BEM命名规范

选择CSS架构注意考虑的问题

  • 编辑一个class是否安全，会不会干扰其他CSS。
  • 能准确定位CSS
  • class是否精简
  • 明确组件是否是否使用的javascript,更改了class是都否意外的破坏组件

BEM

  • B: block(块)
  • E: element(元素)
  • M: modifier(修饰符)

命名约定模式

.block{}            //更高级别的抽象或组件
.block__element{}   //block的后代，用来形成一个完整的.block
.block--modifier{}  //代表block的不同状态
蔚蓝蒲公英
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
BEM命名规范
skysys的研究小屋
07-10 329
BEM - Block Element Modfier（块元素编辑器）是一个很有用的方法，它可以帮助你创建出可以复用的前端组件和前端代码   块 独立的实体，它本身是有意义的。 例子 header，container，menu，checkbox，input 元件 块的一部分，没有独立的含义，并且在语义上与其块相关联。 例子 menu item，list item，checkbox caption，header title 修改 块或元素上的标志。用它们来改变外观或行为...
bem 命名规范
zw19940808的博客
10-19 303
BEM代表“块（block）,元素（element）,修饰符（modifier）”,我们常用这三个实体开发组件。 在选择器中，由以下三种符号来表示扩展的关系： - 中划线 ：仅作为连字符使用，表示某个块或者某个子元素的多单词之间的连接记号。 __ 双下划线：双下划线用来连接块和块的子元素 _ 单下划线：单下划线用来描述一个块或者块的子元素的一种状态 1、中划线, 用于单词之间的连接 例: <div class = ' banner-list '> ...
CSS -- BEM命名规范
weixin_43598023的博客
05-05 858
BEM解决问题思路 由于项目开发中,每个组件都是独一无二的,其名字也是独一无二的,组件内部元素的名字加上组件名,并用元素的名字座位选择器,自然组件内的样式就不会与组件外的样式冲突了 通过组件名的唯一性来保证选择器的唯一性,从而保证样式不会污染到组件外 BEM命名规则 : block-neme__elment-name--modifier-name 也就是 模块名 + 元素名 + 修饰器名 一般来说 根据组件目录名来座位组件名字: 比如分页组件 : /app/components/page-btn.
css BEM 命名规范
weixin_50982549的博客
07-11 584
1.什么是BEM命名规范 BEM是块（block），元素（element），修饰符（modifier）的简写， - 中划线： 仅为连字符使用，表示某个块或者某个子元素的多单词之间的连接记号 __ 双下划线：双下划线用来连接块和块的子元素 _ 单下划线 ： 单下划线用来描述一个块或者块的子元素的一种状态 BEM是一个简单又非常有用的命名约定，当你的前端代码更容易阅读和理解，更容易协作，更容易控制，更加健壮和明确，而且更加严密。 1.1 BEM命名模式 BEM命名约定的模式是： .blo.
BEM命名规则
Hi~豆豆麻麻
04-16 411
解释：BEM（Block-块 Element-元素 Modifier-修饰符） 规则： 1、block-name--element-name 2、blockName-elementName
CSS BEM 命名规范简介(推荐)
12-14
1 什么是 BEM 命名规范 Bem 是块（block）、元素（element）、修饰符（modifier）的简写，由 Yandex 团队提出的一种前端 CSS 命名方法论。 BEM 是一个简单又非常有用的命名约定。让你的前端代码更容易阅读和理解，更...
CSS BEM 命名规范的实现
04-21
具体来说，BEM的命名规则如下： 块（Block）：一个独立的、可重用的页面组件，例如header、footer、menu等。块的命名应该简短、清晰、有意义，并且应该使用单词或短语的形式。 元素（Element）：块的组成部分，...
CSS-BEM 命名规范
青蛙king的博客
03-01 722
BEM 是一种的 CSS 命名方法和规范。让开发更加规范与便捷，利于团队协作和维护。
【CSS】BEM 命名规范
最新发布
STATICHIT静砸的博客
11-19 1718
最近团队要考虑代码风格统一Bem 是块（block）、元素（element）、修饰符（modifier）的简写，由 Yandex 团队提出的一种前端 CSS 命名方法论。- 中划线 ：仅作为连字符使用，表示某个块或者某个子元素的多单词之间的连接记号。__ 双下划线：双下划线用来连接块和块的子元素_ 单下划线：单下划线用来描述一个块或者块的子元素的一种状态BEM 是一个简单又非常有用的命名约定。让你的前端代码更容易阅读和理解，更容易协作，更容易控制，更加健壮和明确，而且更加严密。
weui使用的BEM命名规范
火锅国刘dada的博客
07-31 224
BEM命名规范使每个元素的名字都是独一无二的，使不同元素的样式不会相互干扰，使开发组件变得更加轻松； 1、BEM的基本规则： block__element_modifier 模块(block)：独立的实体； 元素名(element)：block的一部分； 修饰器(modifier)：用来改变block和element的行为和状态； 2、使用BEM命名规范的例子 很多大公司都使用BEM命名规范，比如微信的 weui ： weui-cell__bd_in-select-before /* we-ui:
BEM：css命名规范
qq_34498806的博客
11-03 758
(Block-Element-Modifier)，块、元素、修饰符，是一种CSS命名规范，旨在前端开发中创建可重用组件和代码共享的方法，使样式易于扩展，易于维护，易于理解规范：1、页面上独立的组件，具有明确的语义和功能。每个块都有自己的命名空间（如element的命名空间为el，），单词之间以连字符（-）分隔。例如：element的input组件el-input2、组成块的不同元素，不能独立存在，依赖于块的上下文，元素名称以块名称为前缀，用双下划线分隔（__）。
BEM的命名规范
ciguanpeng7618的博客
07-06 140
基本概念 CSS 的命名规范又叫做BEM规范，为的是结束混乱的命名方式，达到一个语义化的CSS命名方式。 BEM是三个单词的缩写：Block（块）代表更高级别的抽象或组件，Element（元素） Block的后代，以及Modifier（修饰） 不同状态的修饰符。 命名方法： .block__e...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值