开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

css的class命名用数字会混乱

CSS 类命名使用数字的问题

基础概念

CSS 类命名是用于定义和应用样式到 HTML 元素的一种方式。类名应该具有描述性，以便于开发者理解和维护代码。使用数字作为类名可能会导致以下几个问题：

可读性差：数字类名缺乏描述性，难以理解其用途。
命名冲突：数字类名容易与其他类名冲突，尤其是在大型项目中。
维护困难：当需要修改或扩展样式时，数字类名难以快速定位和修改。
CSS 选择器优先级：数字类名可能会与 ID 选择器或其他类选择器产生优先级冲突。

相关优势

使用描述性类名的优势包括：

提高可读性：描述性类名更容易理解，便于团队协作。
减少冲突：描述性类名更不容易与其他类名冲突。
易于维护：描述性类名便于快速定位和修改样式。
更好的选择器优先级管理：描述性类名有助于更好地管理 CSS 选择器的优先级。

类型

CSS 类命名通常有以下几种类型：

描述性命名：如 .header、.footer、.button 等。
功能性命名：如 .error-message、.success-message 等。
结构化命名：如 .container、.row、.column 等。
BEM 命名：Block Element Modifier，如 .block__element--modifier。

应用场景

描述性命名：适用于大多数情况，特别是需要快速理解类名用途的场景。
功能性命名：适用于需要明确表示类名功能的场景，如错误提示或成功提示。
结构化命名：适用于布局相关的类名，如网格系统。
BEM 命名：适用于大型项目，特别是需要严格管理和扩展的项目。

解决问题的方法

使用描述性类名：确保每个类名都具有描述性，能够清晰地表达其用途。
遵循命名规范：如 BEM 命名规范，确保类名的唯一性和可维护性。
使用工具：如 CSS 预处理器（Sass、Less 等）或 CSS 模块化工具（CSS Modules），帮助管理类名。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 类命名示例</title>
    <style>
        .header {
            background-color: #f1f1f1;
            padding: 20px;
            text-align: center;
        }
        .footer {
            background-color: #333;
            color: #fff;
            text-align: center;
            padding: 10px;
        }
        .button {
            background-color: #4CAF50;
            border: none;
            color: white;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>Welcome to My Website</h1>
    </div>
    <button class="button">Click Me</button>
    <div class="footer">
        <p>© 2023 My Website. All rights reserved.</p>
    </div>
</body>
</html>

参考链接

通过以上方法和建议，可以有效避免使用数字类名带来的混乱问题，提高代码的可读性和可维护性。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

CSS-in-JS，向Web组件化再迈一大步 | 洞见

命名混乱 - 因为怕全局污染，所以日常起class名称时会尽量加长，这样不容易重复，但当项目由多人维护时，很容易导致命名风格不统一。...但是对于命名混乱问题的效果不大。...BEM (.block__element--modifier) - 比较流行的class命名规则，部分解决了命名混乱和全局污染的问题，但class定义起来还是不太方便，比较冗长，而且和第三方库的命名还是有可能冲突...可以看一个简单的CSS Modules例子了解一下：生成的dom结构如下图，基于css文件中的class名称生成了唯一的class名称，样式会定义到生成的class上。...优劣势总结看了这些框架后，可以发现CSS-in-JS的优势还是挺多的：因为有了生成的唯一class名称，避免了全局污染的问题唯一的class名称也解决了命名规则混乱的问题 JavaScript和CSS

1K8 0

React 进阶 - 模块化 CSS

# 模块化 CSS 的作用随着 React 项目日益复杂化、繁重化，React 中 css 面临很多问题，比如样式类名全局污染、命名混乱、样式覆盖等。这时， css 模块化就显得格外重要。...important 或者行内样式来解决 Web Components 标准中的 Shadow DOM 能彻底解决这个问题，但它的做法有点极端，样式彻底局部化，造成外部无法重写样式，损失了灵活性解决命名混乱...，有很多相似的样式代码，如果没有用到 css 模块化，构建打包上线的时候全部打包在一起，那么无疑会增加项目的体积 React 使用 css 模块化的思路： css module ，依赖于 webpack...js 模块一样加载 css ，本质上通过一定自定义的命名规则生成唯一性的 css 类名，从根本上解决 css 全局污染，样式覆盖的问题。...Modules 的类名都有自己的私有域的，可以避免类名重复/覆盖，全局污染问题引入 css 更加灵活，css 模块之间可以互相组合 class 类名生成规则配置灵活，方便压缩 class 名注意事项

2K1 0

CSS编写规范

2、目前我司在编写CSS样式时存在编写混乱、多页面的样式写在同一CSS文件、不方便阅读等几乎毫无原则的现象，产生诸多弊端，罗列如下： 1）多个页面的样式写在同一个CSS文件中：加载一个页面同时把其他页面的...4、每一个页面都应用一个独立的CSS文件，常用页面应该做成CSS文件模板每一个页面都应用一个独立的CSS文件，而不能出现多个页面的样式放到同一个CSS文件中，这样会延长加载时间，也会使得命名更加困难。...10、用于编写js选择用的class名称应与一般的样式class名称有所区别例如一般的样式类名：.content-wrapper；而用于js选择用的类名：.content_wrapper_hook。...输入的时候少按一个shift键；浏览器兼容问题（比如使用_tips的选择器命名，在IE6 是无效的）能良好区分JavaScript变量命名（JS变量命名是用“_”） ③用字母、_号、-号、数字组成...，必须以字母开头，不能为纯数字。

2.7K3 0

Web 前端开发代码规范

：回复框，.replyBox{…}，禁止用拼音缩写命名，如.hfk{…}。...7、清除浮动时用.clearfix，禁止用无语义的清除。...—— 不要使用eval() 只用于解析序列化串 (如: 解析 RPC 响应) eval() 会让程序执行的比较混乱, 当 eval() 里面包含用户输入的话就更加危险....所有文件（.html、.css、.js、图片）命名，如需要两个单词表示的，使用””下划线连接符（如：indexinfo.html）。...所有素材图片应将文件名第一个单词命名为图片分类，第二个单词为图片名称，第三个单词可以是数字或其它内容，以下为图片命名细则： icon_xxx.gif //图标文件名 btn_xxx.gif

3.2K1 0

CSS Modules使用详解

CSS Modules CSS 模块化不管是用jquery还是react开发，都会遇到的一系列 CSS 的问题：全局污染命名混乱依赖引入复杂无法共享变量代码冗余通过 JS 来管理 CSS..., } CSS Modules 对 CSS 中的 class 名都做了处理，使用对象来保存原 class 和定制处理后的 class 的对应关系。...Modules时定义的规则localIdentName=[name]__[local]-[hash:base64:5]会控制对class名的处理， [hash:base64:5]定义的hash计算能保证类名的唯一性...当类名经过编译生成新的随机类名后，可以解决命名冲突，但因为无法预知最终 class 名，不能通过一般选择器覆盖。...现在一般给出的项目中的实践是可以给组件关键节点加上 data-role 属性，然后通过属性选择器来覆盖样式。前端项目不可避免会引入 normalize.css 或其它一类全局 css 文件。

1.7K5 0

CSS Modules使用详解

CSS Modules CSS 模块化不管是用jquery还是react开发，都会遇到的一系列 CSS 的问题：全局污染命名混乱依赖引入复杂无法共享变量代码冗余通过 JS 来管理 CSS..., } CSS Modules 对 CSS 中的 class 名都做了处理，使用对象来保存原 class 和定制处理后的 class 的对应关系。...Modules时定义的规则localIdentName=[name]__[local]-[hash:base64:5]会控制对class名的处理， [hash:base64:5]定义的hash计算能保证类名的唯一性...当类名经过编译生成新的随机类名后，可以解决命名冲突，但因为无法预知最终 class 名，不能通过一般选择器覆盖。...现在一般给出的项目中的实践是可以给组件关键节点加上 data-role 属性，然后通过属性选择器来覆盖样式。前端项目不可避免会引入 normalize.css 或其它一类全局 css 文件。

1.9K1 0

前端代码标准最佳实践：HTML篇

（1）HTML代码的基本规范 1. HTML的命名和格式任何代码的混乱都是从命名和格式的混乱开始的，所以一定要有统一和规范的命名和格式，以下是一些基本的规范。...给所有的关键元素定义元素的id和class，便于和CSS，JavaScript的交互；id名称中的关键词用下划线（_）连接，class的关键词用中划线（-）连接，根据实际的意义和Dom树的层级关系定义合适的名称... class="container-bottom"> 2 CSS代码和HTML代码分离样式可以直接写在标签的style属性里面，也可以写在页面...CSS文件在前，JavaScript文件在后，JavaScript代码放到页面底部 JavaScript文件的下载和解析会阻塞页面的加载，所以在head部分，CSS的引用写在前面，而JavaScript...谨慎使用iframe iframe有两个缺点：1，iframe会阻塞主页面的Onload事件；2，iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。

1.7K9 0

CSS Modules入门教程

针对以往我写网页样式的经验，具体来说可以归纳为以下几点：全局样式冲突过程是这样的：你现在有两个模块，分别为A、B,你可能会单独针对这两个模块编写自己的样式，例如a.css、b.css，看一下代码 /...增加了不必要的字节开销语义混乱，当文档中出现过多的content、title以及item这些通用的类名时，你可能要花上老半天才知道它们到底是用在哪个元素上可扩展性不好，约束越多，扩展性越差【注】CSS...的渲染规则可以参看这篇文章探究 CSS 解析原理会带来代码的冗余由于CSS不能使用类似于js的模块化的功能，可能你在一个css文件中写了一个公共的样式类，而你在另外一个css也需要这样一个样式，这时候...CSS预处理器最大的好处就是可以支持模块引入，用js的方式来编写CSS，解决了部分scope混乱以及代码冗余的问题，但是也不能完全避免。...BEM解决了模块复用、全局命名冲突等问题，配合预处理CSS使用时，也能得到一定程度的扩展，但是它依然有它的问题：对于嵌套过深的层次在命名上会给需要语义化体现的元素造成很大的困难对于多人协作上，需要统一命名规范

2.6K4 0

Web前端开发代码规范（基础）

，如：回复框，.replyBox{…}，禁止用拼音缩写命名，如.hfk{…}。...6、清除浮动时用.clearfix，禁止用无语义的清除。...return false; } // 推荐 function() { return false; } —— 不要使用eval() 只用于解析序列化串 (如: 解析 RPC 响应) eval() 会让程序执行的比较混乱...2、所有文件（.html、.css、.js、图片）命名，如需要两个单词表示的，使用"_"下划线连接符（如：index_info.html）。...3、所有素材图片应将文件名第一个单词命名为图片分类，第二个单词为图片名称，第三个单词可以是数字或其它内容，以下为图片命名细则： icon_xxx.gif //图标文件名 btn_xxx.gif

2K2 1

GOGO-前端开发规范

.replyBox{…}，禁止用拼音缩写命名，如.hfk{…}。...6、清除浮动时用.clearfix，禁止用无语义的清除。...function() { return false; }// 推荐function() { return false;}复制—— 不要使用eval()只用于解析序列化串 (如: 解析 RPC 响应)eval() 会让程序执行的比较混乱...2、所有文件（.html、.css、.js、图片）命名，如需要两个单词表示的，使用"_"下划线连接符（如：index_info.html）。...3、所有素材图片应将文件名第一个单词命名为图片分类，第二个单词为图片名称，第三个单词可以是数字或其它内容，以下为图片命名细则：icon_xxx.gif //图标文件名btn_xxx.gif /

2402 0

精读《css-in-js 杀鸡用牛刀》

本期精读的文章是：css-in-js 杀鸡用牛刀 1 引言继精读《请停止 css-in-js 的行为》这篇文章之后，我们又读了一篇抵制 css-in-js 的文章，虽然大部分观点都有道理，但部分存在可商榷之处...，让我们分析一下这篇文章，了解 css 还做了哪些努力，以及 css-in-js 会如何发展。...这样的好处在于避免了 class 之间的冗余，让我们更容易创建可复用的 class，也不会在命名上纠结。...，即便产生了样式冲突、混乱的问题，但我们仍要记住，在模块化开发的今天，仍要保持网站风格的整体性，即便使用了 css-in-js 的开发方式。...是个不错的选择 :p 讨论地址是：精读《css-in-js 杀鸡用牛刀》 · Issue #38 · dt-fe/weekly

7482 0

Facebook 重构：抛弃 Sass u002F Less ，迎接原子化 CSS 时代

> 用海量的实用工具类（utility classes）组成的样式表，让我们可以在网页里大显身手。...一个专案或计划至少失去若干关键成员的参与（“被巴士撞了”，指代职业和生活方式变动、婚育、意外伤亡等任意导致缺席的缘由）即导致专案陷入混乱、瘫痪而无法存续时，这些成员的数量即为巴士系数。...Facebook 分享了具体数字: 旧的网站仅仅首页就用了 413Kb 的 CSS 新的网站整个站点只用了 74Kb，包括暗黑模式源码和输出这两个库的 API 看起来很相似，但也很难说，因为我们对...; } 可以看出，虽然标签上的类名变多了，但是 CSS 的输出体积会随着功能的增多而减缓增长，因为出现过一次的 CSS Rule 就不会再重复出现了。...甚至可以用 TS 来避免错别字。结论这就是我要说的关于原子 CSS-in-JS 所有内容。我从来没有在任何大型生产部署中使用过原子 CSS、原子 CSS-in-JS 或 Tailwind。

3.5K5 0

CSS团队协作规范

class class name 禁止在非特殊情况下写！important CSS本身有权重设计，任意地使用 !important 会造成权重混乱而无法维护。...不可轻易限定宽高用户可以自行设定自己的浏览器，例如 Android 手机可以设定显示字体大小，写死的高度会让字体相互重叠。 RWD失效移动设备的高度是无限的，宽度是有限的。请不要把宽写死。...不可直接 over write 或在原本框架的 class 增加内容 class class 设计RWD网站，请遵循移动设备优先原则 HTML/CSS 手机开启网页很吃手机效能和网络状况，前端工程师一开始就以手机版为优先...定位，例如 position: absolute; 不要随意 none 掉画面上的 tag 或行为 none reset.css class reset.css 常见的 a tag 不要有 underline...list 消除原有样式请在 reset.css 上定义，并且设为第一载入次序有JavaScript行为的 class 可以为命名加入 name space #js-project-show {}

5903 0

HTML5 & CSS3初学者指南(2) – 样式化第一个网页

不要以数字开头一个 ID 名称 ID 名称应该是一个页面内唯一的如果想要对页面中的单个元素使用样式时，可以使用 ID 选择器类选择器类似地，每个 HTML 标签都有一个class属性...，这种在 HTML 标签中内嵌 CSS 也导致了内容呈现的混乱，不利于 CSS 的引进。...样式表的优先级不难想象，一个 HTML 元素具有内联、内部和外部样式这三种样式的情形。在这种情况下，其风格应该是混乱的。...CSS属性在前面的例子中，我们已经使用了“color”和“ text-align" 属性。它们只是众多 CSS 属性中的2个。CSS 属性的名称是相当直观的，也就是说，它们会起到它们名称的作用。...以下是常见的几种 font-family 属性的风格名称。字体列表用逗号分隔。

2.2K7 0

Facebook 重构：抛弃 Sass Less ，迎接原子化 CSS 时代

> 复制代码用海量的实用工具类（utility classes）组成的样式表，让我们可以在网页里大显身手。...一个专案或计划至少失去若干关键成员的参与（“被巴士撞了”，指代职业和生活方式变动、婚育、意外伤亡等任意导致缺席的缘由）即导致专案陷入混乱、瘫痪而无法存续时，这些成员的数量即为巴士系数。...Facebook 分享了具体数字: 旧的网站仅仅首页就用了 413Kb 的 CSS 新的网站整个站点只用了 74Kb，包括暗黑模式 ?...以这张图为例，我们期望的是书写在后的 blue 类覆盖前面的类，但实际上 CSS 会以样式表中的顺序来决定优先级，最后我们看到的是红色的文字。...甚至可以用 TS 来避免错别字。结论这就是我要说的关于原子 CSS-in-JS 所有内容。我从来没有在任何大型生产部署中使用过原子 CSS、原子 CSS-in-JS 或 Tailwind。

3K1 0

css模块化及CSS Modules使用详解

命名混乱由于全局污染的问题，多人协同开发时为了避免样式冲突，选择器越来越复杂，容易形成不同的命名风格，很难统一。样式变多后，命名将更加混乱。...; /* ... */ } 但直接使用这两个关键字编程太麻烦，实际项目中很少会直接使用它们，我们需要的是用 JS 来管理 CSS 的能力。...通过这些简单的处理，CSS Modules 实现了以下几点：所有样式都是 local 的，解决了命名冲突和全局污染问题 class 名生成规则配置灵活，可以此来压缩 class 名只需引用组件的 JS...class 命名技巧 CSS Modules 的命名规范是从 BEM 扩展而来。...外部如何覆盖局部样式当生成混淆的 class 名后，可以解决命名冲突，但因为无法预知最终 class 名，不能通过一般选择器覆盖。

6.9K10 0

被尤雨溪diss的Native CSS Modules是什么

CSS Modules是一套开源的规范，用以解决CSS的以下问题：命名冲突没有模块化依赖关系不明（样式覆盖问题）该规范需要打包工具实现。...我们用一个例子来简要了解他的实现细节：将CSS文件style.css引入为style对象后，通过style.title的方式使用title class： import style from '....首选，通过对比可以发现：该标准命名与现有开源方案冲突标准的语法与现有开源方案语法相同第一点，假设在未来一个初学者搜索CSS Modules，那么结果可能会让他困惑，我搜到的是谁？...如果未来需要实现Native CSS Modules的polyfill，轻则造成重复工作、重则遇到两种方案更迭造成的混乱（想想社区从CJS过渡到ES Modules遇到多少问题）。...并且，由于Native CSS Modules需要在所属JS模块加载后再异步加载，可能会产生很多碎片化的CSS文件请求。

5462 0

CSS基础-CSS选择器：ID、Class、Tag

本文将深入浅出地探讨三种基本CSS选择器——ID选择器、Class选择器、Tag（标签）选择器，分析它们的使用场景、常见问题、易错点以及如何避免这些问题，并提供实用的代码示例。 1. ...当对一个通用标签应用样式时，可能会无意中改变页面中所有该类型的元素。避免：尽量减少使用Tag选择器，除非你想对页面中所有相同类型的元素应用相同的样式。...常见问题与避免策略问题：命名不规范，难以维护。随意命名class可能导致代码难以阅读和维护。...过多的嵌套和复合class选择器可能导致优先级混乱。避免：尽量保持选择器简洁，合理使用组合选择器和伪类，避免不必要的权重增加。...由于ID的唯一性，过度使用会降低代码的灵活性。避免：仅在确实需要唯一标识符时使用ID，如页面布局的主要区域。对于样式，优先考虑使用Class选择器。问题：ID选择器权重过高，影响样式覆盖。

1.1K1 0

大型项目中的结构化CSS

Peergrade.io处理CSS的方式规则1: 使用前缀 (class类名) 在Peergrade.io中我们在所有样式名中使用前缀 .pg。在你的CSS代码中如果不使用前缀可能会带来些麻烦。...在很长一段时间内字体是不会在类名中用前缀的，那意味着你经常会遇到.icon-*之类为前缀的命名冲突（现在他们用 .fa前缀）。...当你写它的时候，你也许会想这里仅有一个.profile-description的列表命名，但一两个月后，你必须要增改另一个列表时，混乱的结构已经超出你能想到的范围。...规则3: 构建组件时用边界元法（BEM）命名尽可能试着用BEM命名去创建独立的组件，我们不必完全按照BEM的规范 - 只是用命名组合，这意味着类名以如下的方式命名： .block__element--...（事后我们碰到类似的CSS时，自然会提及到Harry的这个命名体系）向前看看来没有人真正找到CSS最好的解决方案，并且当看到Hacker News最新文章 -- 那些差点要变成（替代）CSS的语言

1.2K4 0

推荐的CSS书写顺序、规范

写了这么一些时间的CSS，有时候觉得有些混乱，尤其是做样式修改的时候。后来觉得遵循一些书写规范和顺序来的话，一来会让自己的思路很清晰，二来修改的时候很明确，不容易被冗余的样式影响。...定位属性的修改会导致reflow，改变文字颜色、背景等会使得浏览器repaint，都会影响浏览器渲染性能。...简写命名简写命名也要让别人能读懂连字符CSS选择器命名规范输入的时候少按一个shift键；浏览器兼容问题（比如使用_tips的选择器命名，在IE6是无效的); 能良好区分...JavaScript变量命名（JS变量命名是用“_”）....css命名规范常用的CSS命名规则头：header 内容：content/container 尾：footer 导航：nav 侧栏：sidebar 栏目：column 页面外围控制整体佈局宽度

7141 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭