BEM - 一种前端CSS命名方法论

原创

彭世瑜 2021-08-30 10:24:49 ©著作权

文章标签 css 命名规范前端css 修饰符学习 文章分类 JavaScript 前端开发

©著作权归作者所有：来自51CTO博客作者彭世瑜的原创作品，请联系作者获取转载授权，否则将追究法律责任

BEM - 一种前端CSS命名方法论

全称：

块（Block）
元素（Element）
修饰符（Modifier）

命名规范：

.block__elem--mod

参考
https://www.bemcss.com/

上一篇：js：MobX简单入门

下一篇：MaOS10.14使用PECL安装和编译安装PHP扩展mongodb.os

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

达到学习前端的一种心流状态

我是一名本科应届生，如今在武汉的一家技术公司做前端开发，想必很多人也跟我一样学历不是很高，但是对前端开发有着一腔热血，也可以说是热爱，我没有太多资格来议论关于开发技术上的种种困难点，我分享是对前端学习的一种心境。　　我学习前端已经有三年的时间了，前端主流框架Vue，React，Node也都成为了我生活中的一部分，也一直坚持着以最大的冲劲提升自己的水平，但现实总是残酷的，投的简历总是石沉大海，聊的面

前端开发 Vue HTML
Python下载的11种姿势，一种比一种高级！

今天我们一起学习如何使用不同的Python模块从web下载文件。此外，你将下载常规文件、web页面、Amazon S3和其他资源。最后，你将学习如何克服可能遇到的各种挑战，例如下载重定向的文件、下载大型文件、完成一个多线程下载以及其他策略。1、使用requests你可以使用requests模块从一个URL下载文件。考虑以下代码:你只需使用requests模块的get方法获取URL，并将

下载文件协同程序 Amazon
图片压缩的一种算法

#region 图片与 BASE64字符串相互转换 /// <summary> /// 图片（黑白签名）压缩为BASE64字符串 /// </summary> /// <param name="im">图片</param> /// <returns>BAS

字符串 List 宽高
前端css命名规范----BEM

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

qt
（转）Kano模型：一种产品经理适用的方法论

Kano 模型是狩野纪昭教授发明的

产品经理用户需求需求管理
13种模型及方法论

思维模型方法论

思维模型方法论
向对象方法论，过程方法论，ER关系方法论简介

<1>面向对象方法论在此方法论中一切都是对象，崇尚用对象（类作为蓝图）来划分职责，以抽象来封装变化，

数据库数据结构与算法关系型数据库面向对象方法函数调用
架构方法论

最大的难点永远是两个：一个是逻辑的复杂性，一个是需求的变化性。

架构方法论
职场方法论

成功不是将来才有的，而是从决定去做的那一刻起，持续累积。

职场
原型方法论

1 引子太多了！终于签下合同-->得到了“正式”的客户提供的“需求书”的几片纸-->凭借自己的理解立即投入开发-->“木已成舟”，生米终于熬成粥

项目管理配置管理 prototype 工作迭代
监控方法论

监控
介绍两种 CSS 方法论

前言说起 CSS 命名规范，大家应该都很熟悉，或者应该听说过 BEM 。BEM 是由 Yandex 团队提出的一种 CSS Class 命名方法，旨在帮助开发人员创建更好的且结构一致的 CSS 模块。BEM 将页面的类名分为块（Block）、元素（Element）、修饰符（Modifier）。块（Block）：一个块是视觉上或者语义上的一个整体，它是一个具体且唯一的一个元素，例如，页面上的一个弹窗

CSS
bem命名规范 css bem命名规范

随着CSS的发展，使用CSS有语义化的命名约定和CSS层的分离，将有助于它的可扩展性，性能的提高和代码的组织管理。著作权归作者所有。BEM本质应该是一个css命名方案，最流行的命名规则之一就是BEM，（block：块，Element：元素，Modifier：修饰符），通过给每个元素添加它的父级block模块作为前缀，使得目标的安全性变得更加简单了；BEM还有助于消除页面和body类对嵌套或者附加样

bem命名规范类名 css 下划线
bem命名方式 css bem命名规范

css命名规范1.BEM命名规范BEM是块（block）、元素（element）、修饰符（modifier）的简写，由Yandex团队提出的一种前端css命名方法论。 BEM命名约定的模式是：.block{} or .block-index{}//一级组件或元素（全部是小写字母或数字，名称中的不同单词用单个连字符（-）分隔）.block__element{}//.block的后代（两个下划线）

bem命名方式 css 命名规范 BEM OOCSS
CSS命名规范 BEM

良好的代码结构，HTML和css元素之间的关系，对于项目交付是很重要的！ BEM解释： (1).block 是BEM的区块(B)，包含内容和风格。如bootstrap框架的.container。 (2).block-element 代表自子容器(E)。如bootstrap框架的轮播图，.carous

CSS 命名规范 BEM 轮播图 bootstrap
大数据：作为一种方法论的追溯与质疑

　　近年来，“大数据”成为学术界广泛关注的热点。2018年，“中国知网”收录的中文论文中，题目包含“大数据”的论文数量相较于前一年增长了20%。然而，究竟什么是“大数据方法”、如何理解所谓“大数据方法”，又或者究竟存不存在所谓“大数据方法”?鉴于大数据一词在学术研究中日益增长的影响力，厘清这些问题的必要性日益凸显。只有明确“大数据方法”的本质和“大数据方法”在传播学领域所指代的含义，了解国内外对“

大数据
CSS BEM 命名规范简介

【前言】 BEM 是一个简单又非常有用的命名约定。让你的前端代码更容易阅读和理解，更容易协作，更容易控制，更加健壮和明确，而且更加严密.这篇文章主要介绍了CSS BEM 命名规范简介(推荐)的相关资料,感兴趣的小伙伴们可以参考一下【主体】 1 什么是 BEM 命名规范 Bem 是块（block）、

css 作用域命名约定命名规范属性选择器
方法论

用户要求——>功能分析——>架构制定——>组件开发——>原型集成总体测试<——(系统)功能测试<——架构测试<——组件测试心得体会：1. 组件测试通过(子系统)，不等于在全架构中没有问题，所以需要架构测试。2. 架构测试通过(架构自洽)，不等于满足了所有的系统功能测试。3. 系统功能测试通过(满足了... Read More

功能测试组件开发
css bem哪一年出现的 css bem命名规范

[1]主流命名[2]命名方式[3]命名推荐[4]实践前面的话　　每次写HTML结构涉及到CSS命名时，都要挣扎一番。关于CSS命名的规范，市面上有不少，如OOCSS、SMACSS、BEM和MVCSS等。在这里面最火的应该算BEM了。本文将详细介绍CSS命名主流命名【BEM】　　说起CSS命名，当然要提到BEM。BEM的意思就是B模块(

css bem哪一年出现的选择器类名首字母
架构管控方法论架构方法论

概念解析在文章开始之前需要先理解几个概念：什么是方法论？我们拿到一个输入，然后根据这个输入预期一个输出，把中间这个过程描述出来就是方法论。所以我们本篇讲的架构师方法论就是架构师先拿到经过需求分析出来的输入，然后完成架构设计，这个过程就是架构设计方法论。什么是设计？设计是实现意图的书面表现形式，而非口头的东西；设计是要让实现者能理解设计者的意图，是给别人看而非自己看；设计是要让不同的

架构管控方法论软件架构师用例架构设计领域模型
sykwalking 设置索引保留天数

本节后边通过实际易懂的举例，来说明索引实际的触发，从而优化自己在加索引时使用的策略。一.索引类型1.1 B-tree索引注: 名叫btree索引,大的方面看,都用的平衡树,但具体的实现上,各引擎稍有不同,比如,严格的说,NDB引擎,使用的是T-tree，Myisam,innodb中,默认用B-tree索引但抽象一下---B-tree系统,可理解为”排好序的快速查找结构”.更多分析，见Mysql-索

sykwalking 设置索引保留天数 mysql索引优化的目的 sql 多列字段
Linux 串口拔插监控

串口读函数read是阻塞函数，多路串口接收不太好处理，如果每路串口使用单独的线程接收浪费资源，使用select()函数监听多路串口数据可以把所有接收的数据在一个线程中处理，类似QT中的槽函数功能。1、函数原型介绍:int select(int nfds, fd_set *rdfds, fd_set *wtfds, fd_set *exfds, struct timeval *timeout)入口参

Linux 串口拔插监控 mysql监听串口文件句柄串口句柄
多项赋值python

问题如果一个可迭代对象的元素个数超过变量个数时，会抛出一个 ValueError 。那么怎样才能从这个可迭代对象中解压出 N 个元素出来？解决方案Python 的星号表达式可以用来解决这个问题。比如，你在学习一门课程，在学期末的时候，你想统计下家庭作业的平均成绩，但是排除掉第一个和最后一个分数。如果只有四个分数，你可能就直接去简单的手动赋值，但如果有 24 个呢？这时候星号表达式就派上用场了

多项赋值python 迭代元组数据
java 计算结果显示负数

算术运算符1-知识点整理虽然运算符有很多种，但是本小节只是介绍算术运算符。除了常见的加减乘除外(+, -, *, /)，还介绍了模运算和连接符运算。这里需要主要的是/，模运算%和连接符运算。下面逐一地介绍这三种运算中的知识点，理清脉络。一. /运算知识点这里谈论/运算，不去说+-*，就在于书写的整型在这三者的运算中，绝对不会产生小数。但是在/运算中，会产生小数，例如System.out.print

java 计算结果显示负数模运算字符串 JAVA
Java selenium 规避检测

1.定位一组元素WebDriver提供了8种定位一组元素的方法。 1 driver.find_elements_by_css_selector() 2 driver.find_elements_by_tag_name() 3 driver.find_elements_by_class_name() 4 driver.find_elements_by_xpath() 5 driver.find_e

Java selenium 规避检测 python javascript ViewUI firefox

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯