CSS中的类命名

CSS类名在开发中一般都是简单的命名一下,例如 nav、title、menu 等等,但是这也带来了问题,出现命名冲突的时候不知道是哪里引起的,加上 CSS 本身权重的问题就更加棘手。如果是小项目,代码不多、开发人员较少还可以控制,一旦项目的代码增多、人员增多,查问题就很耗时,同时即使查到问题也改不动,不知道是不是会影响项目的其他页面或者功能。有时为了尽快解决问题,尤其是交付类项目,就会用!important或者行内样式进行妥协,这就为以后的维护带来了更大的隐患。
CSS 中有一种命名方式叫 BEM,我的理解就是模块化或者说是命名空间,块–元素–状态,很好理解可以看以下例子,__(双下划线)代表子元素,–代表状态或者修饰:

<form class="site-search  full"><input type="text" class="field"><input type="Submit" value ="搜索" class="button">
</form>

用了 BEM 后

<form class="site-search  site-search--full"><input type="text" class="site-search__field"><input type="Submit" value ="搜索" class="site-search__button">
</form>

显而易见,用了 BEM 后,对于开发人员,通过类名就可以确定该类的具体作用。但是同样也会带来问题,就是命名太过复杂,每次起名字就要很多时间,可能在项目开发中很难落地。有一种方式是可以通过 BEM 对组件进行命名,例如site-search__button,利用工具类实现状态效果,例如 bg-blue。工具类也可以选用比较成熟的库,例如Bootstrap 或者 Tailwind。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/802205.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

plasmo开发浏览器插件动态setIcon修改插件图标和setBadgeText显示徽标

动态修改图标和设置徽标主要用到action这个api&#xff0c;官网地址&#xff1a;https://developer.chrome.com/docs/extensions/reference/api/action?hlzh-cn#method-setIcon 如果你使用官方原生的方式开发&#xff0c;加载和修改图标应该是比较简单的&#xff0c;但是如果…

2024.4.7力扣每日一题——王位继承顺序

2024.4.7 题目来源我的题解方法一 哈希表多叉树的前序遍历 题目来源 力扣每日一题&#xff1b;题序&#xff1a;1600 我的题解 方法一 哈希表多叉树的前序遍历 发现继承顺序的生成与多叉树的前序遍历一致&#xff0c;只需要在遍历过程中将已经去世的给排除就可以了。 如何存…

Ubuntu系统中,使用`nohup`命令启动Java程序。nohup参数说明、验证启动、停止程序详细教程

在Ubuntu系统中&#xff0c;使用nohup命令启动Java程序可以实现在后台运行程序&#xff0c;即使终端关闭或用户注销&#xff0c;程序也会继续运行。以下是使用nohup启动Java程序的步骤&#xff1a; 打开终端。 进入到你的Java程序所在的目录&#xff0c;或者确保JAVA_HOME环境…

valgrind 是个啥?

最近在看PG代码时&#xff0c;看到许多VALGRIND相关的宏&#xff0c;例如 VALGRIND_MAKE_MEM_DEFINED、 VALGRIND_MAKE_MEM_NOACCESS&#xff0c;特别是移植PG的某模块到OG时&#xff0c;由于OG中没有定义这些宏&#xff0c;遇到这些宏&#xff0c;一开始我也不知道该怎么办了。…

C语言面试题之合并排序的数组

合并排序的数组 实例要求 1、给定两个排序后的数组 A 和 B&#xff0c;其中 A 的末端有足够的缓冲空间容纳 B&#xff1b; 2、编写一个方法&#xff0c;将 B 合并入 A 并排序&#xff1b; 3、初始化 A 和 B 的元素数量分别为 m 和 n&#xff1b; 示例: 输入: A [1,2,3,0…

小剧场短剧剧集收费短剧小程序APP

1. 内容展现 付费、免费、任务解锁&#xff1a;用户可以通过付费直接观看短剧&#xff0c;也可以通过完成平台任务&#xff08;如签到、分享等&#xff09;获得免费观看的机会。这种灵活的解锁方式既满足了用户的多种需求&#xff0c;也促进了平台的活跃度。主流展现形式&…

蓝桥杯简单模板

目录 最大公约数 两个数的最大公约数 多个数的最大公约数 最小公倍数 两个数的最小公倍数 多个数的最小公倍数 素数 ​编辑 位数分离 正写 ​编辑 反写 闰年 最大公约数 两个数的最大公约数 之前看见的是辗转相除法&#xff0c;例如现在让算一个49&#xff0c;21…

libVLC 提取视频帧使用OpenGL渲染

在上一节中&#xff0c;我们讲解了如何使用QWidget渲染每一帧视频数据。 由于我们不停的生成的是QImage对象&#xff0c;因此对 CPU 负荷较高。其实在绘制这块我们可以使用 OpenGL去绘制&#xff0c;利用 GPU 减轻 CPU 计算负荷&#xff0c;本节讲解使用OpenGL来绘制每一帧视频…

Leetcode面试经典150_Q169多数元素

题目&#xff1a; 给定一个大小为 n 的数组 nums &#xff0c;返回其中的多数元素。多数元素是指在数组中出现次数 大于 ⌊n/2⌋ 的元素。 你可以假设数组是非空的&#xff0c;并且给定的数组总是存在多数元素。 解题思路&#xff1a; 1. 注意“大于 ⌊n/2⌋”&#xff0c;…

【每日一题】2529. 正整数和负整数的最大计数-2024.4.9

题目&#xff1a; 2529. 正整数和负整数的最大计数 给你一个按 非递减顺序 排列的数组 nums &#xff0c;返回正整数数目和负整数数目中的最大值。 换句话讲&#xff0c;如果 nums 中正整数的数目是 pos &#xff0c;而负整数的数目是 neg &#xff0c;返回 pos 和 neg二者中…

A Survey for LLM

一、背景介绍 我们关注大模型中的两个主流&#xff1a;大语言模型和预训练的基础模型。01 大语言模型&#xff08;LLMs&#xff09; 语言建模是许多自然语言处理任务的基础&#xff0c;而大语言模型&#xff08;LLMs&#xff09;的初衷是为了提高语言建模的性能。与传统的神经语…

STM32之HAL开发——串行FLASH文件系统FatFs

文件系统 文件系统是为了存储和管理数据&#xff0c;而在存储介质建立的一种组织结构&#xff0c;这些结构包括操作系统引导区、目录和文件。 常见的 windows 下的文件系统格式包括 FAT32、 NTFS、exFAT。 在使用文件系统前&#xff0c;要先对存储介质进行格式化。格式化先擦除…

React 状态管理:高效处理数组数据的5种方法

1.原因 为什么在 React 中,状态(state)如果是数组类型,需要单独处理&#xff1f;主要有以下几个原因: 不可变性(Immutability): React 中的状态是不可变的,意味着我们不能直接修改状态,而是要创建一个新的状态对象。对于数组来说,直接修改数组元素是不符合 React 的设计原则的…

[LeetCode][LCR133]位 1 的个数——快速从右边消去1

题目 LCR 133. 位 1 的个数 编写一个函数&#xff0c;输入是一个无符号整数&#xff08;以二进制串的形式&#xff09;&#xff0c;返回其二进制表达式中数字位数为 ‘1’ 的个数&#xff08;也被称为 汉明重量).&#xff09;。 提示&#xff1a; 请注意&#xff0c;在某些语言…

多个代理proxy配置——日志查看代理后的地址

一个项目接口有两个域名&#xff0c;需要配置两个代理复制一个axios封装文件&#xff0c;修改baseUrl为新的标识 ququ新接口文件引入新的request1即可 proxy: {// 新接口采用 /ququ前缀/ququ: {target: http://192.168.2.82:8888, //鑫哥 changeOrigin: true,logLevel: debug, …

【Python】RocketMQ 基础使用

目录 1. 介绍 2. 实践 2.1. 启动消费者 2.2. 启动生产者 1. 介绍 RocketMQ是一个开源的分布式消息传递系统&#xff0c;最初由阿里巴巴集团开发并于2012年开源。它旨在解决高可靠性、高吞吐量、低延迟和可伸缩性等大规模分布式系统下的消息通信需求。 RocketMQ的设计目标…

vue对比react18

1.模板语法-——>jsx JSX表达式用{}包裹&#xff0c;vue模板表达式用{{}}包裹&#xff0c;其余一致。 注意:if语句、switch语句、变量声明属于语句&#xff0c;不是表达式&#xff0c;不能出现在{}或{{}}中 <!--vue--> <template><div><p>I have…

Java开发面试题分享

目录 1、简述MyISAM和InnoDB的区别 2、简述Hash和B树索引的区别 3、简述MyBatis的实现逻辑 4、#{}和${}的区别 5、简述Mybatis的优缺点 6、当实体类中的属性名和表中的字段名不一样时怎么办&#xff1f; 7、resultType与resultMap的区别 8、如何执行批量插入 9、Mybat…

Unity自己实现的中英文的切换(简单好抄)

关键技术&#xff08;读取文件的方法&#xff0c;Split()分割字符串&#xff09; 1.搭建一个这样的场景&#xff0c;场景中有3个文本&#xff08;用新版的&#xff09;&#xff0c;一个空对象&#xff0c;一个按钮 2.编写翻译文本&#xff08;编写一个txt文本&#xff0c;在文…

jq命令简易教程——Linux中处理JSON数据的利器

在shell脚本中&#xff0c;当我们需要对JSON数据&#xff08;例如ceph、kubernetes等一些命令的输出&#xff0c;或是调用API获得的响应&#xff09;进行处理和提取时&#xff0c;如果使用传统的文本三剑客sed、awk和grep&#xff0c;命令将会非常臃肿不可读。虽然这三个命令在…