热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

css中BEM命名规范是什么

CSS教程:本文为大家介绍了css中BEM命名规范的相关知识,具有一定的参考价值,希望可以帮助到大家。
_ 单下划线:单下划线用来描述一个块或者块的子元素的一种状态

BEM 是一个简单又非常有用的命名约定。让你的前端代码更容易阅读和理解,更容易协作,更容易控制,更加健壮和明确,而且更加严密。

1. BEM 命名模式

BEM 命名约定的模式是:

.block {}
.block__element {}
.block--modifier {}

每一个块(block)名应该有一个命名空间(前缀)
block 代表了更高级别的抽象或组件。
block__element 代表 .block 的后代,用于形成一个完整的 .block 的整体。
block--modifier 代表 .block 的不同状态或不同版本

使用两个连字符和下划线而不是一个,是为了让你自己的块可以用单个连字符来界定。如:

.sub-block__element {}
.sub-block--modifier {}

2. BEM 命名法的好处

BEM的关键是,可以获得更多的描述和更加清晰的结构,从其名字可以知道某个标记的含义。于是,通过查看 HTML 代码中的 class 属性,就能知道元素之间的关联。

常规的命名法示例:


推荐阅读
  • 本文介绍了JSP的基本概念、常用标签及其功能,并通过示例详细说明了如何在JSP页面中使用Java代码。 ... [详细]
  • 多用户密码验证与加密登录系统
    本文介绍了一种基于多用户密码文件的加密登录方法,通过读取用户密码文件并使用简单的加密算法实现安全登录。文中详细描述了程序的设计思路及其实现过程。 ... [详细]
  • 本文详细介绍了一种实现PopupWindow全屏显示且能有效隐藏虚拟按键的技术方案,适用于Android开发。此方法经过实际测试,表现良好,兼容性优秀。 ... [详细]
  • 本文详细介绍了Java Web项目的开发流程,从环境搭建到项目部署,为初学者和开发者提供了一套完整的指南。 ... [详细]
  • Python游戏开发实战:外星人入侵项目详解
    本文详细介绍了使用Python进行《外星人入侵》游戏开发的全过程,包括环境搭建、游戏逻辑设计及代码实现等关键步骤,适合对游戏开发感兴趣的朋友参考。 ... [详细]
  • BeautifulSoup4 是一个功能强大的HTML和XML解析库,它能够帮助开发者轻松地从网页中提取信息。本文将介绍BeautifulSoup4的基本功能、安装方法、与其他解析工具的对比以及简单的使用示例。 ... [详细]
  • 本文介绍了如何使用Maven命令对Spring Boot项目中的子模块进行独立打包,包括依赖树的查看、项目的运行和打包等基本操作。 ... [详细]
  • 系统:MacOS10.15.2,XCode11.3,swift5.0写作时间:2020-01-09说明Swift中的闭包(Closur ... [详细]
  • 深入理解异步多线程编程模型
    现代计算机系统中的CPU通过并行处理提高效率,但所谓的并发处理实际上是一种基于轮询的模拟并行。本文探讨了现代处理器如何通过虚拟化技术实现更高的并发性能,以及在.NET框架中如何有效利用线程和异步编程模式。 ... [详细]
  • 本文探讨了 Boost 库中的 Program Options 组件,这是一个强大的工具,用于解析命令行参数和配置文件。文章介绍了如何正确设置和使用该组件,包括处理复杂选项和负数值的方法。 ... [详细]
  • 本文通过具体示例详细介绍了 Python 中的装饰器和装饰类的使用方法,包括带参数的装饰器和装饰类的应用场景。 ... [详细]
  • 集群与负载均衡技术解析
    本文探讨了集群(Cluster)的概念,即通过网络连接的一组计算机系统,它们作为一个整体提供服务,实现分布式计算。文章还详细介绍了负载均衡技术,旨在提高网络服务的效率和可靠性。 ... [详细]
  • 深入理解Java反射机制
    本文将详细介绍Java反射的基础知识,包括如何获取Class对象、反射的基本过程、构造器、字段和方法的反射操作,以及内省机制的应用。同时,通过实例代码加深对反射的理解,并探讨其在实际开发中的应用。 ... [详细]
  • 本文介绍了如何在ThinkPHP5框架中使用htmlspecialchars_decode函数将HTML内容正确解码,并安全地显示在网页上。 ... [详细]
  • 解决 Pytest 运行时出现 FileNotFoundError 的方法
    在使用 Pytest 进行测试时,可能会遇到 FileNotFoundError 错误,提示无法找到指定的文件或目录。本文将探讨该错误的原因及解决方案。 ... [详细]
author-avatar
水月琴轩_452
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有