当前位置：首页 > news >正文

CSS 命名规范：从混乱到有序的代码艺术

news 2026/5/12 17:32:44

CSS 命名规范：从混乱到有序的代码艺术

CSS 是流动的韵律，JS 是叙事的节奏。

一、命名规范：代码的语言

上周，我在重构一个遗留项目的样式时，发现了一个严重的问题：CSS 类名混乱不堪，有btn-primary、button-blue、submit-btn等各种不同的命名方式。这让我意识到：好的命名规范不仅仅是代码风格的问题，更是代码可维护性的关键。

作为一个追求像素级还原的 UI 匠人，我一直相信：好的代码应该像散文一样清晰、流畅。而好的命名规范，正是这种清晰性的重要体现。

二、BEM：块、元素、修饰符

/* BEM 命名规范 */ /* 块 */ .header { background-color: #ffffff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); padding: 20px; } /* 元素 */ .header__logo { font-size: 24px; font-weight: bold; color: #3498db; } .header__nav { display: flex; gap: 20px; } /* 修饰符 */ .header--dark { background-color: #212529; color: #ffffff; } .header__nav--vertical { flex-direction: column; gap: 10px; }

BEM（Block, Element, Modifier）是一种流行的 CSS 命名规范。它通过清晰的命名结构，将 CSS 类名分为块、元素和修饰符，使代码更加模块化、可维护。BEM 的命名规则是：block__element--modifier，其中块是独立的组件，元素是块的组成部分，修饰符是块或元素的变体。

三、OOCSS：面向对象的 CSS

/* OOCSS 命名规范 */ /* 结构类 */ .box { padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); background-color: #ffffff; } /* 皮肤类 */ .box--primary { border-left: 4px solid #3498db; } .box--secondary { border-left: 4px solid #e74c3c; } /* 大小类 */ .box--small { padding: 10px; } .box--large { padding: 30px; }

OOCSS（Object-Oriented CSS）是一种面向对象的 CSS 命名规范。它将 CSS 类分为结构类和皮肤类，通过组合不同的类来创建复杂的组件。OOCSS 的核心思想是分离结构和表现，提高代码的复用性。

四、ITCSS：倒三角形 CSS

/* ITCSS 命名规范 */ /* 1. 设置层 */ :root { --color-primary: #3498db; --color-secondary: #e74c3c; --spacing-unit: 8px; } /* 2. 工具层 */ .u-mt-1 { margin-top: var(--spacing-unit); } .u-mt-2 { margin-top: calc(var(--spacing-unit) * 2); } .u-mt-3 { margin-top: calc(var(--spacing-unit) * 3); } /* 3. 通用层 */ body { font-family: 'Inter', sans-serif; font-size: 16px; line-height: 1.5; color: #333333; background-color: #f8f9fa; } /* 4. 组件层 */ .button { padding: 10px 20px; border-radius: 4px; font-size: 16px; cursor: pointer; } /* 5. 截断层 */ .header { /* 特定于页面的样式 */ }

ITCSS（Inverted Triangle CSS）是一种基于优先级的 CSS 命名规范。它将 CSS 代码分为不同的层，从通用到具体，形成一个倒三角形的结构。ITCSS 的核心思想是按照特异性从低到高组织 CSS 代码，减少样式冲突。