CSS命名规范——BEM思想（非常赞的规范）

最新推荐文章于 2024-07-05 12:23:20 发布
最新推荐文章于 2024-07-05 12:23:20 发布
阅读量119 收藏
点赞数
分类专栏： css
原文链接：https://www.cnblogs.com/dujishi/p/5862911.html
版权

CSS命名规范——BEM思想（非常赞的规范）

人们问我最多的问题之一是在CSS类名中“–”和“__”是什么意思？它们的出现是源于BEM和Nicolas Gallagher…

BEM的意思就是块（block）、元素（element）、修饰符（modifier）,是由Yandex团队提出的一种前端命名方法论。这种巧妙的命名方法让你的CSS类对其他开发者来说更加透明而且更有意义。BEM命名约定更加严格，而且包含更多的信息，它们用于一个团队开发一个耗时的大项目

FIND方式
关注
专栏目录
CSS命名规范之BEM
LQ55
08-01 936
What is BEM？ BEM：Block（块） Element（元素） Modfier（修饰符），是由Yandex团队提出的一种前端命名方法论。根据这个规范，能够创建出可以复用的前端组件和前端代码。（BEM是一个高可用、强大的、简单易用的命名规范） 编程方法论中常见的一个就是面向对象编程（OOP），这种方法用在了许多的语言中。BEM和OOP类似的，是用代码和一系列模式来描述实际情况的方法，...
前端规范——CSS
QAmazing的博客
07-26 630
前端开发规范——CSS
BEM思想（css命名规范）
eunice_sytin的博客
10-24 8054
在团队开发中，由于缺乏规范，样式管理一直是开发中的痛点，样式污染，难以定制化，依赖性高，各种问题层出不穷。 而BEM是一个非常有用，强大，简单的命名约定，可以让你的前端代码更容易阅读和理解，更容易协作，更容易控制。 当然，通常人们会认为BEM写法难看，但是他的好处远远超过它外观上的那点瑕疵。 BEM命名约定 BEM：块（block）、元素（element）、修饰符（modifier） 命名约定的...
什么是 BEM 规范
最新发布
narukeu的博客
07-05 295
BEM（Block, Element, Modifier）是一种 CSS 命名规范，旨在提高代码的可读性和可维护性。BEM 规范通过明确的命名规则来定义组件和组件的各个部分，使开发者能够更容易地理解和维护代码。
使用BEM命名规范来组织CSS代码
tzllxya的博客
06-17 182
使用BEM命名规范来组织CSS代码 BEM是Block（块）Element（元素）Modifier（修饰器）的简称 使用BEM规范来命名CSS，组织HTML中选择器的结构，利于CSS代码的维护，使得代码结构更清晰（弊端主要是名字会稍长） 如何使用BEM 一个独立的（语义上或视觉上），可以复用而不依赖其它组件的部分，可作为一个块（Block） 属于块的某部分，可作为一个元素（E...
CSS BEM 书写规范
USTC-sparks
09-07 540
CSS BEM 书写规范 BEM命名约定 BEM 是由 Yandex 团队提出的一种前端命名方法论。网上流传的主要是两个版本，一个是Yandex 原版BEM，还有一个是Nicolas Gallagher 修改版，这里我们采用的是 Yandex 团队原版的 BEM 规范。 使用 BEM 命名规范，理论上讲，每行 css 代码都只有一个选择器。 BEM代表...
CSS命名规范BEM
wuxeek的博客
12-04 321
首先直接给原文链接：getBEM BEM的命名规则： 计算机科学里面只有两个问题：缓存失效和对象命名。——Phil Karlton 正确的样式指南能显著地提高开发速度、debug效率和继承代码的执行效率，然而很多CSS代码实际上并没有良好的组织结构和命名的规范，这导致了过去很长一段时间内，CSS代码都是一个难以维护的状态。 BEM方法为所有Web开发人员提供了一个命名的规范，它会让...
前端编码规范（4）—— CSS 和 Sass (SCSS) 开发规范
09-24
在前端开发中，保持良好的编码规范至关重要，尤其是在CSS和Sass (SCSS)的编写过程中。规范化的代码有助于提高代码的可读性、可维护性和团队协作效率。以下是一些关于CSS和Sass编码规范的关键点： 1. **ID和class...
网页前端设计规范（包含文件夹，CSS命名等）
07-29
这份资源包涵盖了CSS命名规范和文件管理规范两个关键方面，旨在为前端开发者提供一个清晰、一致的工作指南。 首先，让我们详细探讨CSS命名规范。在前端开发中，CSS是样式和布局的主要工具，良好的命名习惯能大大...
人人网FED CSS编码规范+CSS解析、检查、修复与压缩
01-16
推荐采用BEM（Block Element Modifier）或SMACSS（Scalable and Modular Architecture for CSS）等命名策略。 2. **选择器的使用**：避免使用过于复杂的CSS选择器，因为它们可能导致性能下降。优先使用类选择器而...
CSS的各种居中——如何书写高质量代码
09-25
【CSS居中技术详解——构建高质量布局】 在网页设计中，CSS居中是常见的布局需求，它可以提升用户体验，使页面内容更加对称美观。本文将详细介绍CSS中的水平居中和垂直居中，以及如何针对不同类型的元素进行适配，...
BEM规范：css命名规范
小葱的博客
02-27 422
什么是BEM BEM：css命名规范
【CSS】CSS BEM思想
z767327552的专栏
01-27 178
1. 什么是BEM? Block 将所有东西都划分为一个独立的模块, 一个header是block, header里嵌套的搜索框是block Element !误区:如果一个Element-son是另一个Element-father的子元素,那么写法是 Block__Element-father__Element-son_Modifer,嵌套多了会很长么?不是的!!! 一个Block下的所有Element无论相互层级如何,都要摊开扁平的属于Block所以 BEM 最多只有 B+E+M 三级,不可能出
bem规范
weixin_48160591的博客
10-11 66
这样就通过混合的方式把位置样式从块中剥离了，可以在.top__search-form中设置表单的位置或浮动等样式，保持了 search-form块的样式独立，对其完整样式代码进行了解耦。举个例子说明，例如我们将top块中的search-form块移动到bottom块中，想要保证整体不会乱，就需要search-form块的CSS必须是独立的。需要注意的是块应该是独立的，当在页面中添加，删除，或者是移动某个块时，不需要对块进行修改。每个块的块名必须是唯一的，用于明确指出它所描述的是哪个块。
css命名——BEM约定
flynn_
12-08 496
特别声明：此篇文章由David根据csswizardry的英文文章原名《MindBEMding – getting your head ’round BEM syntax》进行翻译，整个译文带有我们自己的理解与思想，如果译得不好或不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax以及作者相关信息 ——作者：csswizardry ——译者：Dav.
BEM规范
qq_36135258的博客
09-18 901
BEM规范，即Block（块）Element（元素）Modifier（修饰器)，用来规范css命名 命名约定模式如下： .block{} .block__element{} .block__element--modifier{} 对于块，若多个单词，则用 - 连接，如search-form 具体例子 块即模块，如搜索表单search-form，可以看做一个块 这个块内的按钮butto...
CSS的BEM规范
Kylin的博客
11-29 3233
BEM规范学习 在实际项目中，经常可以看到以下类似这样的css样式，这种就是CSS命名规范——BEM思想 BEM 是块（block）、元素（element）、修饰符（modifier）的简写 主要缺点就是命名很长 __和--的区别 __表示的就是下级元素 --表示的是不同的形态 就是另一个类名，另一种样式，就像overview__row中有公共的样式，而overview__row--right中具有非公共的样式，是特有的样式 &符号表示嵌套的上一级 之所以是两个连接符和
BEM命名规范
m0_62811051的博客
08-09 360
BEM（Block, Element, Modifier）是一种前端编码规范，用于命名 HTML 和 CSS 中的类和选择器。它旨在提供一种一致的方式来组织和命名代码，使其易于理解、扩展和维护。展开来说，BEM 是块（block）、元素（element）、修饰符（modifier）的简写，利用不同的区块，功能以及样式来给元素命名。块（Block）：块是一个独立的可重用组件，它代表一个完整的实体。它是整个 BEM 结构中最高层级的部分，应该有一个唯一的类名。如下表示：el-input。
CSS命名规范：提升Debug效率与可读性的BEM方法
总结来说，使用良好的CSS命名规范，如BEM，能够提高代码的可读性、可维护性和一致性，进而提升开发效率。在实际开发过程中，理解和遵循适当的命名规则，是每一位前端开发者提升编程技能的重要一环。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值