CSS的BEM规范

最新推荐文章于 2024-03-16 20:03:55 发布
最新推荐文章于 2024-03-16 20:03:55 发布
阅读量3.1k 收藏 6
点赞数 3
分类专栏： 学习笔记 文章标签： 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46926182/article/details/121606077
版权

BEM规范学习

  • 在实际项目中，经常可以看到以下类似这样的css样式，这种就是CSS命名规范——BEM思想
  • BEM 是块（block）、元素（element）、修饰符（modifier）的简写
  • 主要缺点就是命名很长

在这里插入图片描述

  • __和--的区别

    • __表示的就是下级元素
    • --表示的是不同的形态
      • 就是另一个类名，另一种样式，就像overview__row中有公共的样式，而overview__row--right中具有非公共的样式，是特有的样式

  • &符号表示嵌套的上一级
    在这里插入图片描述

  • 之所以是两个连接符和下划线是为了块级的样式可以使用-来区分

晚风予星_Kylin
关注
  • 3
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解css BEM书写规范
09-22
BEM的意思就是块（block）、元素（element）、修饰符（modifier）,是由Yandex团队提出的一种前端命名方法论。本文主要介绍了详解css BEM书写规范,非常具有实用价值，需要的朋友可以参考下
CSS架构之BEM设计模式
肥晨开发的学习之路
02-08 6818
B代表：Black（块），独立实体，独立的意义，每个页面都可以看做是多个Block组成,见下图1-1；E代表：Element（元素），block 的一部分，没有独立意义，是组件下的一个元素，多个元素形成一个组件，见下图1-2；M代表： Modifier （修饰符），block 或 element 上的标记，是描述Block或Element的属性或状态，同一Block或Element可以有多个Modifier。
CSS-BEM命名规范
qq_35469342的博客
09-30 1492
CSS-BEM命名规范，让维护css不在头疼 相信大部分前端工作人员都不太喜欢写CSS，更不要说修改别人的CSS的样式了。 本文将简单介绍CSS-BEM使用规范,让自己/他人维护起CSS不在头疼。 前言 BEM（块、元素、修饰符）是一种基于组件的 Web 开发方法。其背后的想法是将用户界面划分为独立的块。这使得即使使用复杂的 UI 也能轻松快速地进行界面开发，并且允许重用现有代码而无需复制和粘贴。该笔记将围绕BEM核心模块,块（block）、元素（element）、修饰符（modifier)进行简述。 贴
CSS书写规范、顺序和命名规则，web前端开发书籍
最新发布
03-16 542
2.去掉小数点前的“0”del-zero3.简写命名很多用户都喜欢简写类名，但前提是要让人看懂你的命名才能简写哦！name4.16进制颜色代码缩写有些颜色代码是可以缩写的，我们就尽量缩写吧，提高用户体验为主。color-abb5连字符CSS选择器命名规范1）.长名称或词组可以使用中横线来为选择器命名。2）.不建议使用“_”下划线来命名CSS选择器，为什么呢？输入的时候少按一个shift键；
CSS命名-BEM方法
油头周大锅的博客
12-17 491
BEM简述： Bem 是块（block）、元素（element）、修饰符（modifier）的简写，利用不同的区块，功能以及样式来给元素命名。 BEM命名的好处 光凭class名字就可以让其他开发者知道某个标记用来做什么的，明白各个模块之间的关系 组件之间的完全解耦，不会造成命名空间的污染 BEM命名方式： 官网原文表述。 BEM方法通过使用混合或创建额外的块元素来达到相同的结果。您不需要创建额外的抽象包装器。 相对于其他块定位一个块 设置一个块元素相对于其他块元素的位置，最好的方法通常是使用混
BEM：css命名规范
qq_34498806的博客
11-03 545
(Block-Element-Modifier)，块、元素、修饰符，是一种CSS命名规范，旨在前端开发中创建可重用组件和代码共享的方法，使样式易于扩展，易于维护，易于理解规范：1、页面上独立的组件，具有明确的语义和功能。每个块都有自己的命名空间（如element的命名空间为el，），单词之间以连字符（-）分隔。例如：element的input组件el-input2、组成块的不同元素，不能独立存在，依赖于块的上下文，元素名称以块名称为前缀，用双下划线分隔（__）。
BEM规范
lixiaolong240035的博客
08-26 2868
BEM规范BEM是什么?BEM包含的内容Block特点例子Block使用指南嵌套例子Element特点例子Element使用指南嵌套例子嵌套例子从属性例子从属性例子可选性例子我应该创建Block还是Element?创建Block创建ElementModifier特点Modifier的分类1.布尔类型例子1.Key--Value类型例子Modifier使用指南不能脱离Block或者Element独立使用例子Mix特点例子 BEM是什么? BEM (Block, Element, Modifier)是一个基于组
CSS BEM 命名规范简介(推荐)
12-14
1 什么是 BEM 命名规范 Bem 是块（block）、元素（element）、修饰符（modifier）的简写，由 Yandex 团队提出的一种前端 CSS 命名方法论。 BEM 是一个简单又非常有用的命名约定。让你的前端代码更容易阅读和理解，更...
CSS BEM 命名规范的实现
04-21
BEM的主要目的是通过定义命名空间来解决CSS的范围问题，从而使CSS更具可维护性。BEM的核心思想是将页面分解为独立的块（Block），块中包含元素（Element），并且可以通过修饰符（Modifier）来改变块或元素的状态或...
css的组织方式：BEM规则
凝视深渊
05-10 4895
why? 无论选择了什么样的css组织方法，你都会从更加结构化的css 和 Ui 结构中获益。有些方式不那么严格，更加灵活。而另一些方法则更加易于理解，适用于团队协作。 为什么要选择bem呢？它不像其他语法（smacss）那么复杂，但是仍然可以提供给我们优良的代码结构和易于识别的术语。 模块化 block永远不依赖于页面上的其他元素，因此不会遇到级联问题。而且易于从旧项目中迁移。只要从某一个块级元...
CSS规范--BEM入门
leeleeliy的博客
06-11 316
BEM是由Yandex公司推出的一套CSS命名规范，官方是这么描述它的： BEM是一种让你可以快速开发网站并对此进行多年维护的技术。 一开始，Yandex公司推出的BEM，包括了规范以及其配套构建工具。如今提到的BEM主要是指其中的规范，在BEM最新的推广页中，对其的描述为： BEM是一种命名方法，能够帮助你在前端开发中实现可复用的组件和代码共享。 ...
CSS规范之 BEM
xzhlg57656的博客
11-06 470
不论是为团队考虑，还是后续的维护，规范CSS命名至关重要。BEM解决了css样式全局性，而不区分作用域的问题。
『精』CSS 小技巧之BEM规范
贤哲XianZhe的博客
12-27 656
BEM风格规范指的是 Block、Element、Modifier 这三者的简称，这个规范将 CSS 拆分成块、元素、修饰符，根本作用是帮助开发者快速理解HTML与 CSS 之间的关系。那么通过使用 BEM 能获得到什么好处呢？如果我们想制作一个组件的新样式，比如改个字体/背景色，可以很容易地看到有哪些样式项已经存在，只需要新增一个修饰符即可，甚至可能意识到一开始就不需要编写任何样式，有一个预先存在的修饰符可以满足我们的需求。
BEM 命名规范简介
dong_chl的专栏
12-12 2757
1、什么是 BEM 命名 BEM 是一个简单又非常有用的命名约定。让你的前端代码更容易阅读和理解，更容易协作，更容易控制，更加健壮和明确，而且更加严密.这篇文章主要介绍了CSS BEM 命名规范简介。Bem 是块（block）、元素（element）、修饰符（modifier）的简写，由 Yandex 团队提出的一种前端 CSS 命名方法论。 1.1 命名模式 block {}，block ...
CSS--BEM风格介绍
maDreambig的博客
03-31 3281
转载自简书：https://www.jianshu.com/p/1c0b77f30ec0， 感谢！ BEM 基于组件方式的web开发方法，基本思想是将用户界面分成独立的模块。 Block（块） （通常指模块，组件） Block 是一个逻辑上和功能上独立的页面组件，等同于网页组件中的部件（等同于网页中的组件）。Block 封装了行为（Javascript）、模板、样式（CSS）和其他实现...
CSS-BEM 命名规范
青蛙king的博客
03-01 507
BEM 是一种的 CSS 命名方法和规范。让开发更加规范与便捷，利于团队协作和维护。
【CSS】BEM 命名规范
STATICHIT静砸的博客
11-19 334
最近团队要考虑代码风格统一Bem 是块（block）、元素（element）、修饰符（modifier）的简写，由 Yandex 团队提出的一种前端 CSS 命名方法论。- 中划线 ：仅作为连字符使用，表示某个块或者某个子元素的多单词之间的连接记号。__ 双下划线：双下划线用来连接块和块的子元素_ 单下划线：单下划线用来描述一个块或者块的子元素的一种状态BEM 是一个简单又非常有用的命名约定。让你的前端代码更容易阅读和理解，更容易协作，更容易控制，更加健壮和明确，而且更加严密。
BEM 规范及实战快速生成
Cipher_Y的博客
08-03 270
BEM（Block, Element, Modifier）是一种前端编码规范，用于命名 HTML 和 CSS 中的类和选择器。它旨在提供一种一致的方式来组织和命名代码，使其易于理解、扩展和维护。块（Block）：块是一个独立的可重用组件，它代表一个完整的实体。它是整个 BEM 结构中最高层级的部分，应该有一个唯一的类名。示例：.yk-button、.yk-navbar元素（Element）：元素是块的组成部分，不能独立存在。它们依赖于块的上下文，并且有属于块的类名作为前缀。
CSS编程规范
怒放的生命的博客
11-14 1100
CSS编程规范
2023css面试题
08-26
8. 请解释CSS中的BEM命名规范，并说明其优点。 9. 如何使用CSS实现水平菜单和垂直菜单？ 10. 如何使用CSS实现网格布局（Grid Layout）？ 这些问题涵盖了一些基本的CSS概念和技巧。当然，在面试中还可能会有更具体和...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值