百科问答小站 logo   百科问答小站
问题

如何规范 CSS 的命名和书写？

回答
好的，我们来聊聊 CSS 的命名和书写规范，这事儿可不是小事儿，规范起来，能让你的代码活像一个思路清晰、有条理的工程师写出来的，而不是一团乱麻。

一、 CSS 命名规范：给自己和他人留条活路

名字起得好，事半功倍。CSS 命名就像给你的组件、模块、元素起个响亮又好记的名字，一眼就能看出它是干啥的。

1. 围绕“意义”而非“样式”来命名：
错例： `.redbutton`、`.bigtext`、`.floatleft`
为啥错？ 这些名字描述的是“看起来是什么样子”，而不是“它是什么”。如果有一天设计师说：“这个按钮颜色要改成蓝色了，而且得更小一点”，你就得改名字了，多麻烦！
正例： `.primarybutton`、`.articletitle`、`.mediaobject`
解释： `.primarybutton` 告诉我们这是主要的按钮，无论它是红色还是蓝色，它都扮演着“主按钮”的角色。`.articletitle` 明确了它是一个文章的标题。`.mediaobject` 通常用于描述包含图片、标题、描述等媒体元素的一整块内容。

2. BEM 模型是个好朋友 (Block, Element, Modifier)：
这是目前非常流行且实用的命名规范，它能帮你清晰地划分结构，避免 CSS 权重混乱。

Block (块): 一个独立的、可复用的组件，它拥有自己的含义，比如一个导航栏、一个卡片、一个按钮。
命名：使用一个有意义的单词或短语，全小写，单词间用短横线 `` 连接。
例子：`.card`, `.navbar`, `.button`

Element (元素): 块的内部组成部分，它没有独立的意义，必须依附于块才能存在。
命名：`block__element` (双下划线)
例子：`.card__title`, `.navbar__link`, `.button__icon`
注意： Element 的命名要明确它在 Block 中的作用。

Modifier (修饰符): 用来改变块或元素的样式或行为，比如改变颜色、大小、状态（激活、禁用）等。
命名：`blockmodifier` (双短横线) 或 `block__elementmodifier`
例子：
`.cardfeatured` (表示一个特别的、突出的卡片)
`.buttonprimary` (表示一个主要的按钮)
`.buttondisabled` (表示一个禁用的按钮)
`.navbar__linkactive` (表示一个激活状态的导航链接)

为什么 BEM 好？

可读性强： 一眼就能看出组件的结构和关系。
避免命名冲突： 通过前缀和双下划线、双短横线，大大降低了命名冲突的可能性。
可维护性高： 当你需要修改一个组件时，很容易找到相关的 CSS。
易于团队协作： 大家遵循同一套规则，沟通成本降低。

3. 一些通用的命名建议：

有意义的缩写： 比如 `nav` 代替 `navigation`，`btn` 代替 `button`。但别为了缩写而缩写，容易让人看不懂。
避免使用元素标签名作为类名： 比如 `.div`、`.span`。
避免过深的嵌套命名： BEM 已经解决了这个问题，但即使不用 BEM，也要尽量保持命名简洁。
使用有意义的类名，而不是 ID： ID 通常用于 JavaScript 交互或页面锚点，类名更适合用于样式化，且类名可以复用。除非是全局唯一的元素，否则尽量避免使用 ID 来控制样式。
前缀（可选但推荐）： 在大型项目中，为你的组件添加一个项目前缀可以进一步避免命名冲突。例如，如果你在开发一个名为“AwesomeProject”的网站，你的组件命名可以是 `apcard`，`apnav`。
状态类名： 使用 `is` 或 `has` 作为状态修饰符，例如：`.isactive`, `.ishidden`, `.haserror`。

二、 CSS 书写规范：让代码像艺术品一样整洁

命名定了，书写也得讲究。好的书写规范能让你的 CSS 文件像一本有条理的书，易于阅读和查找。

1. 组织结构：

文件拆分：
全局样式： `reset.css` (或 `normalize.css`)、`variables.css` (变量、主题色)、`base.css` (全局字体、字号、颜色设置)
布局样式： `layout.css` (网格、定位等基础布局)
组件样式： 每个组件一个 CSS 文件，比如 `card.css`, `button.css`, `navbar.css`。或者按功能模块组织，如 `components/card.css`, `components/button.css`。
页面特定样式： `pages/home.css`, `pages/about.css`。
工具类/辅助类： `.textcenter`, `.marginbottom10` (建议谨慎使用，避免过度依赖)。

导入顺序：
一般来说，导入顺序遵循“从大到小，从基础到具体”的原则：
1. 重置/标准化样式 (`reset.css` 或 `normalize.css`)
2. 变量/主题样式 (`variables.css`)
3. 基础全局样式 (`base.css`)
4. 布局样式 (`layout.css`)
5. 公共组件样式 (`components/button.css`, `components/card.css`...)
6. 页面特定样式 (`pages/home.css`)
7. 工具类/辅助类 (最后，或者放在一个独立区域)

2. 选择器规范：

避免使用低效的选择器：
万能选择器 ``： 尽量少用，它会影响到页面上所有元素。
后代选择器嵌套过深： `.nav ul li a` 这种太长了，BEM 能很好地避免这种情况。
通用选择器 `[attribute]`： 除非有必要，否则尽量避免。
属性选择器 `[type="text"]`： 除非确实需要区分同种元素的多种状态，否则不如直接给元素加上类名。

为组件添加根类名： 即使一个组件只有一个元素，也最好给它一个类名，而不是直接用标签名。例如，而不是 ``，而是 ``。

3. 属性书写顺序：
保持属性顺序一致，方便查找和合并。一个常用的顺序是：

1. 定位属性： `position`, `top`, `right`, `bottom`, `left`, `zindex`
2. 盒模型属性： `display`, `flex`, `grid`, `float`, `clear`, `width`, `height`, `maxwidth`, `maxheight`, `minwidth`, `minheight`, `padding`, `margin`, `border`, `boxsizing`
3. 排版属性： `font`, `fontfamily`, `fontsize`, `fontweight`, `lineheight`, `textalign`, `textdecoration`, `color`, `letterspacing`, `wordspacing`
4. 视觉属性： `background`, `backgroundcolor`, `backgroundimage`, `opacity`, `filter`, `boxshadow`, `textshadow`
5. 其他： `cursor`, `transition`, `animation`, `transform`, `overflow`

记住这个顺序不是绝对的，关键是形成一套你团队都认可的规则。

4. 缩进与格式化：

缩进： 使用 两个空格 作为缩进（这是前端社区普遍接受的标准，避免使用 Tab，因为 Tab 宽度可能因编辑器设置而异）。
属性值前加空格： `property: value;` (冒号后面加空格)
声明块后留空行：
```css
.selector {
property: value;
property: value;
} / 声明块结束后加一个空行 /

.anotherselector {
/ ... /
}
```
每行一个属性：
```css
.selector {
property: value;
anotherproperty: anothervalue;
}
```
长属性值换行：
```css
.selector {
backgroundimage: url('path/to/long/image.jpg');
backgroundrepeat: norepeat;
backgroundposition: center center;
}
```

5. 注释：

解释复杂的样式： 对于那些不容易理解的样式，或者有特殊原因这样写的，一定要加上注释。
模块头注释： 在每个大模块或组件的 CSS 文件开头，写上文件的作用，作者，创建日期等信息。
```css
/
File: components/_card.scss
Author: Your Name
Date: 20231027
Description: A reusable card component with image, title, and description.
/
```
重要声明的注释：
```css
/
NOTE: This CSS is for IE11 compatibility.
It overrides the default styling for .button.
/
.button {
/ ... /
}
```

6. 使用 Preprocessors (Sass/Less/Stylus)：
预处理器可以极大地提高 CSS 开发效率和规范性。

变量 (Variables)： 统一管理颜色、字体、间距等，方便修改。
```scss
$primarycolor: 007bff;
$fontstack: 'Helvetica Neue', sansserif;

.button {
backgroundcolor: $primarycolor;
fontfamily: $fontstack;
}
```
嵌套 (Nesting)： 保持结构清晰，但要避免过度嵌套。
```scss
.navbar {
ul {
margin: 0;
padding: 0;
liststyle: none;

li {
display: inlineblock;
marginright: 10px;

a {
textdecoration: none;
color: 333;
}
}
}
}
```
编译后是：
```css
.navbar ul { / ... / }
.navbar ul li { / ... / }
.navbar ul li a { / ... / }
```
注意： 嵌套层级不宜超过三层，否则会生成过长的选择器。BEM 的写法在这里依然很有帮助。

Mixins (混合)： 复用样式块，参数化，提高代码复用性。
```scss
@mixin borderradius($radius) {
webkitborderradius: $radius;
borderradius: $radius;
}

.card {
@include borderradius(5px);
}
```
继承 (Extend)： 共享一套 CSS 属性。
```scss
.message {
border: 1px solid ccc;
padding: 10px;
color: 333;
}

.success {
@extend .message;
bordercolor: green;
color: green;
}
```
编译后是：
```css
.message, .success {
border: 1px solid ccc;
padding: 10px;
color: 333;
}

.success {
bordercolor: green;
color: green;
}
```
注意： `extend` 生成的 CSS 可能比直接复制一份要长，需要权衡。

Import： 模块化导入，组织代码结构。

总结一下，为什么要做规范？

提高可读性： 让别人（包括未来的你）能快速理解代码。
提高可维护性： 修改和调试 Bug 更容易。
降低出错率： 规范的命名和结构能减少很多潜在问题。
促进团队协作： 大家遵循同一套规则，沟通更顺畅。
提升开发效率： 找到所需样式更快，减少重复劳动。

最后，规范不是一成不变的教条，而是为了更好地开发和维护。选择一套适合你团队和项目的规范，并且坚持下去，这才是最重要的。你可以参考一些流行的 CSS 方法论（如 BEM, SMACSS, ITCSS）和行业标准，然后根据实际情况进行调整。

别忘了，写 CSS 的时候，就像在和电脑对话，也像在给你的队友写信。清晰、有条理、有礼貌的表达，总能收到更好的反馈。

网友意见

user avatar

CSS 书写顺序

　　1.位置属性(position, top, right, z-index, display, float等)

　　2.大小(width, height, padding, margin)

　　3.文字系列(font, line-height, letter-spacing, color- text-align等)

　　4.背景(background, border等)

　　5.其他(animation, transition等)


CSS 书写规范使用 CSS 缩写属性

　　CSS有些属性是可以缩写的，比如padding,margin,font等等，这样精简代码同时又能提高用户的阅读体验。


　　去掉小数点前的“0”


　　简写命名

　　很多用户都喜欢简写类名，但前提是要让人看懂你的命名才能简写哦!


　　16进制颜色代码缩写

　　有些颜色代码是可以缩写的，我们就尽量缩写吧，提高用户体验为主。


　　连字符CSS选择器命名规范

　　1.长名称或词组可以使用中横线来为选择器命名。

　　2.不建议使用“_”下划线来命名CSS选择器，为什么呢?

　　输入的时候少按一个shift键;

　　浏览器兼容问题 (比如使用_tips的选择器命名，在IE6是无效的)

　　能良好区分JavaScript变量命名(JS变量命名是用“_”)



　　不要随意使用Id

　　id在JS是唯一的，不能多次使用，而使用class类选择器却可以重复使用，另外id的优先级优先与class，所以id应该按需使用，而不能滥用。　


　　为选择器添加状态前缀

　　有时候可以给选择器添加一个表示状态的前缀，让语义更明了，比如下图是添加了“.is-”前缀。


　　CSS命名规范(规则)常用的CSS命名规则

　　头：header

　　内容：content/container

　　尾：footer

　　导航：nav

　　侧栏：sidebar

　　栏目：column

　　页面外围控制整体佈局宽度：wrapper

　　左右中：left right center

　　登录条：loginbar

　　标志：logo

　　广告：banner

　　页面主体：main

　　热点：hot

　　新闻：news

　　下载：download

　　子导航：subnav

　　菜单：menu

　　子菜单：submenu

　　搜索：search

　　友情链接：friendlink

　　页脚：footer

　　版权：copyright

　　滚动：scroll

　　内容：content

　　标签：tags

　　文章列表：list

　　提示信息：msg

　　小技巧：tips

　　栏目标题：title

　　加入：joinus

　　指南：guide

　　服务：service

　　注册：regsiter

　　状态：status

　　投票：vote

　　合作伙伴：partner

注释的写法 :

　　/* Header */

　　内容区

　　/* End Header */

Id 的命名 :

　　1)页面结构

　　容器: container

　　页头：header

　　内容：content/container

　　页面主体：main

　　页尾：footer

　　导航：nav

　　侧栏：sidebar

　　栏目：column

　　页面外围控制整体佈局宽度：wrapper

　　左右中：left right center

(2) 导航

　　导航：nav

　　主导航：mainnav

　　子导航：subnav

　　顶导航：topnav

　　边导航：sidebar

　　左导航：leftsidebar

　　右导航：rightsidebar

　　菜单：menu

　　子菜单：submenu

　　标题: title

　　摘要: summary

(3) 功能

　　标志：logo

　　广告：banner

　　登陆：login

　　登录条：loginbar

　　注册：register

　　搜索：search

　　功能区：shop

　　标题：title

　　加入：joinus

　　状态：status

　　按钮：btn

　　滚动：scroll

　　标籤页：tab

　　文章列表：list

　　提示信息：msg

　　当前的: current

　　小技巧：tips

　　图标: icon

　　注释：note

　　指南：guild

　　服务：service

　　热点：hot

　　新闻：news

　　下载：download

　　投票：vote

　　合作伙伴：partner

　　友情链接：link

　　版权：copyright

注意事项 ::

　　1.一律小写;

　　2.尽量用英文;

　　3.不加中槓和下划线;

　　4.尽量不缩写，除非一看就明白的单词。

CSS 样式表文件命名

　　主要的 master.css

　　模块 module.css

　　基本共用 base.css

　　布局、版面 layout.css

　　主题 themes.css

　　专栏 columns.css

　　文字 font.css

　　表单 forms.css

　　补丁 mend.css

　　打印 print.css

类似的话题

本站所有内容均为互联网搜索引擎提供的公开搜索信息，本站不存储任何数据与内容，任何内容与数据均与本站无关，如有需要请联系相关搜索引擎包括但不限于百度，google,bing,sogou 等

© 2025 tinynews.org All Rights Reserved. 百科问答小站 版权所有

服务条款
联系我们
关于我们
隐私政策
友情链接
知乎
百度问答
搜狐
新浪