一张图看懂BEM命名规范

最新推荐文章于 2024-08-14 22:24:56 发布

kurushii

最新推荐文章于 2024-08-14 22:24:56 发布

阅读量53

点赞数

文章标签： css3

本文链接：https://blog.csdn.net/zzzihanlin/article/details/130348310

版权

BEM是一种流行的CSS命名方法，旨在提高代码可读性和可维护性。Block代表独立的UI组件，Element是Block的组成部分，而Modifier用于描述Block或Element的不同状态或变体。这种命名策略有助于大型项目中的代码组织和重用。

摘要由CSDN通过智能技术生成

B: Block

E: Element

M: Modifier

Block

Block--Modifier

Block__Element

Block__Element--Modifier

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

kurushii

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
一张图看懂BEM命名规范

Block__Element--Modifier
复制链接

扫一扫

CSS BEM 命名规范简介(推荐)

12-14

1 什么是 BEM 命名规范 Bem 是块（block）、元素（element）、修饰符（modifier）的简写，由 Yandex 团队提出的一种前端 CSS 命名方法论。 BEM 是一个简单又非常有用的命名约定。让你的前端代码更容易阅读和理解，更...

CSS BEM 命名规范的实现

04-21

具体来说，BEM的命名规则如下：块（Block）：一个独立的、可重用的页面组件，例如header、footer、menu等。块的命名应该简短、清晰、有意义，并且应该使用单词或短语的形式。元素（Element）：块的组成部分，...

2 条评论您还未登录，请先登录后发表或查看评论

各种软件系统架构图解析

热门推荐

CHL521的博客

01-09

1万+

发布一企业技术架构图，供大家参考。 &amp;nbsp; &amp;nbsp; 该技术架构图是本人根据多年企业技术架构经验而制定，是企业技术的总架构图，希望对CTO们有所借鉴。 &amp;nbsp;简单说明： 1.中间件基础运行环境是经过统一规划的以WebLogic、JBOSS为主的集群环境&amp;nbsp;&amp;nb

软件各种架构图收集

sandy_hmily的专栏

07-25

1万+

该技术架构图是本人根据多年企业技术架构经验而制定，是企业技术的总架构图，希望对CTO们有所借鉴。简单说明： 1.中间件基础运行环境是经过统一规划的以WebLogic、JBOSS为主的集群环境 2.企业集成平台是以基础业务应用为基础服务于上层平台和基础业务应用的高度集成平台 3.数据中心是企业公共数...

嵌入式知识图谱WiKi（嵌入式开发/研发入门教程和路线图）

qq582880551的博客

02-19

5963

嵌入式知识图谱WiKi 作者将狼才鲸时间 2022-02-18 Gitee文档源文件仓库网址才鲸 / 嵌入式知识图谱WiKi CSDN有图的文档阅读网址嵌入式知识图谱WiKi Bilibili视频讲解网址（待完成）才鲸嵌入式主页一、概述 1. 模块框图备注：gitee暂不支持mermaid框图和流程图显示。可以下载本git仓库并用Typora等软件打开本.md文件查看。也可以点击该CSDN同名文章查看能正常显示图片的版本。备注：因为mermaid subgrap

code-review之前端代码规范及优化

我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。

07-12

461

作者：lzg9527来源：https://segmentfault.com/a/1190000023104631所谓无规矩不成方圆，前段时间在团队 code-review 中发现，不同时...

前端性能优化

CaraYQ的博客

10-30

600

目录图像优化矢量图和位图分辨率压缩的有损和无损图像格式JPEG压缩模式GIFPNG 图像优化图像优化的思想：压缩压缩的两个思路：（1）减少对某种颜色的编码数来减小文件的大小（2）损失部分源文件信息以达到近似的效果使得压缩后的文件尺寸更小能不用图像就不用图像若一定要用图像：（1）如果在不同的页面或不同的交互状态下图像需要呈现不同的的效果（边角的裁切、渐变、阴影等）可以用CSS来将同一张图片处理成所需的不同效果（2）如果图像上要显示字用代码的形式把字加到图片上面而不是传递一张带字的图

Vue.js2最佳实践(持续更新至Vue.js3出来)

天下布武

08-07

1748

写在开头文档较长，可按需耐心反复阅读。其中带（官）的是直接引用了Vue官方的风格指南。针对Vue性能优化相关内容，单独在内容后进行了标注，可通过搜索“性能优化”四个字查找。 Vue.js2模板工程说明目的封装常用功能和配置，规范代码编写，保证输出的一致性，方便前端人员在此基础上快速开发新项目的业务模块。下载模板项目（Boilerplate）分为JavaScript和TypeScript两个版本。 JS： git clone https://github.com/THS-FE/vue2-starte

CSS及布局

Duan_Super的博客

02-27

533

一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不由得感觉眼前一亮，顺理成章的联想到 Word 文档排版中用到的的左对齐、右对齐和居中对齐，然而很快就失望的发现 CSS 中并不存…响应式图片“响应式（Responsive）”这个词我想大家没有听过一千遍，也有一百遍了。响...

写CSS的姿势

W3cplus

08-29

467

前两天去帝都参加第三届FEDay前端开发者大会，见了很多老朋友，也认识了很多新朋友。最主要的是听了很多大神的分享，涨了不少的姿势。想写这篇文章的出发点是PostCSS作者@Andrey Sitnik分享完之后有些同学提问，让我有感而发。希望这篇文章对一些同学有所帮助。写CSS的姿势对于前端而言，会写CSS并不难，因为这是基础之一，但能写好CSS那就不一定了。在整个社区也经常会碰到类似这

HTML-CSS-JS

weixin_34110749的博客

12-26

136

CSS 样式书写规范最佳实践本文的所列是实践当中得出的一套比较不错的 CSS 书写规范，可以结合自身团队发展出一套适合自己业务的规范。 CSS中的字体与排版本文介绍了CSS中字体排版相关的小技巧 [[译] 148 个资源让你成为 CSS 专家](https://juejin.im/entry/57bc3... 信息量真心…… 很大！...

CSS使用BEM命名规范实践

01-18

BEM（块，元素，修饰符）是基于组件的Web开发的一种前端命名方法论，主要针对CSS。其背后的想法是将用户界面分为独立的块。即使使用复杂的UI，这也使界面开发变得容易和快速，并且允许重用现有代码而无需复制和粘贴...

微信小程序遇到的一些问题，地图的使用，BEM 命名规范

03-29

一：遇到的一些问题分享者：tearfc，原文地址　最近，接触了一段时间的微信小程序，在小程序的开发过程中，遇到了不少坑，再次总结一下：　1.... 　比如：在小程序后台设置时无端口号，调用时再加入，会出现本地...

display:flex布局，最简单的案例

有问题可关注公众号：前端研究院后台输入问题回复

08-12

212

【代码】display:flex布局，最简单的案例。

前端css线性渐变

weixin_58694594的博客

08-14

241

【代码】前端css线性渐变。

超市管理系统，基于javaweb.zip

最新发布

08-15

项目工程资源经过严格测试可直接运行成功且功能正常的情况才上传，可轻松copy复刻，拿到资料包后可轻松复现出一样的项目，本人系统开发经验充足（全栈开发），有任何使用问题欢迎随时与我联系，我会及时为您解惑，提供帮助【资源内容】：项目具体内容可查看/点击本页面下方的*资源详情*，包含完整源码+工程文件+说明（若有）等。【若无积分，此资源可私信获取】【本人专注IT领域】：有任何使用问题欢迎随时与我联系，我会及时解答，第一时间为您提供帮助【附带帮助】：若还需要相关开发工具、学习资料等，我会提供帮助，提供资料，鼓励学习进步【适合场景】：相关项目设计中，皆可应用在项目开发、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面中可借鉴此优质项目实现复刻，也可基于此项目来扩展开发出更多功能 #注 1. 本资源仅用于开源学习和技术交流。不可商用等，一切后果由使用者承担 2. 部分字体及插图等来自网络，若是侵权请联系删除，本人不对所涉及的版权问题或内容负法律责任。收取的费用仅用于收集和整理资料耗费时间的酬劳

vue3面试题2023,84页，几十道vue面试题，准备vue的面试，这么一份文件就够了

08-15

vue3面试题2023： Vue 的优缺点优点 1.创建单页面应用的轻量级Web应用框架 2.简单易用 3.双向数据绑定 4.组件化的思想 5.虚拟DOM 6.数据驱动视图缺点不支持IE8

【雷达跟踪】基于matlab雷达目标生成与跟踪【含Matlab源码 7220期】.zip

08-15

CSDN海神之光上传的代码均可运行，亲测可用，直接替换数据即可，适合小白； 1、代码压缩包内容主函数：main.m；调用函数：其他m文件；无需运行运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，私信博主； 3、运行操作步骤步骤一：将所有文件放到Matlab的当前文件夹中；步骤二：双击打开main.m文件；步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询如需其他服务，可私信博主或扫描博客文章底部QQ名片； 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作功率谱估计：故障诊断分析：雷达通信：雷达LFM、MIMO、成像、定位、干扰、检测、信号分析、脉冲压缩滤波估计：SOC估计目标定位：WSN定位、滤波跟踪、目标定位生物电信号：肌电信号EMG、脑电信号EEG、心电信号ECG 通信系统：DOA估计、编码译码、变分模态分解、管道泄漏、滤波器、数字信号处理+传输+分析+去噪（CEEMDAN）、数字信号调制、误码率、信号估计、DTMF、信号检测识别融合、LEACH协议、信号检测、水声通信

前端开发BEM命名规范与HTML/CSS/JS标准指南

JavaScript规范部分涵盖了代码风格、命名规则、注释等多个方面，强调了文件结构、缩进、空格、换行、语句的处理，以及命名约定，包括单行和多行注释、文档化注释等，以确保代码的清晰性和一致性。这份规范教程详细...