掌握 CSS 注释的正确语法与书写方式
理解注释在代码可读性与团队协作中的作用
区分过时的注释方法与现代标准
能够合理使用单行与多行注释提升代码维护性
CSS 注释是开发者在样式表中添加的说明性文字，用于解释代码逻辑、标记功能模块或记录修改信息。浏览器会完全忽略注释内容，因此它们不会影响网页的显示效果或性能。
注释是良好编码习惯的重要组成部分，尤其在大型项目或多人协作中至关重要。
CSS 使用 /* ... */ 语法来定义注释，支持单行和多行形式：
/* 这是一个单行注释 */
/*
这是一个
多行注释
可以跨越多行
*/<!DOCTYPE html>
<html>
<head>
<title>单行注释示例</title>
<style>
h1 {
color: green;
}
/* 设置主标题样式 */
</style>
</head>
<body>
<h1>学习平台</h1>
<p>面向计算机科学学生的在线学习门户</p>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title>多行注释示例</title>
<style>
h1 {
color: green;
}
/*
本模块用于：
- 定义首页标题样式
- 统一配色方案（绿色主题）
最后更新：2025 年 10 月
*/
</style>
</head>
<body>
<h1>学习平台</h1>
<p>计算机科学学习门户</p>
</body>
</html>解释“为什么”而非“是什么”
避免写 /* 设置颜色为绿色 */，而应写 /* 使用品牌主色以保持视觉一致性 */。
在复杂逻辑前添加注释
例如媒体查询、动画关键帧或特殊布局技巧。
用注释划分代码区块
/* =============
导航栏样式
============= */
#nav { ... }
/* =============
页脚区域
============= */
footer { ... }不要使用 HTML 风格的 <!-- --> 注释
虽然早期为兼容旧版 Netscape 浏览器曾使用此方法隐藏 CSS，但现代开发中已完全过时且不推荐。
所有现代浏览器（Chrome、Firefox、Safari、Edge 等）均完全支持 /* ... */ 注释语法。
注释在解析阶段即被忽略，不影响渲染性能。
无需为注释进行跨浏览器测试。
在生产环境中，可通过构建工具（如 Webpack、Vite）自动移除注释以减小文件体积。
核心原则：写代码是为了让机器执行，写注释是为了让人理解。
为什么说“好的注释解释‘为什么’而不是‘做什么’”？请结合实际开发场景举例说明。
在一个包含响应式布局、动画和自定义字体的 CSS 文件中，你认为哪些部分最需要添加注释？为什么？
如果你在审查他人代码时发现大量类似 /* color is red */ 的注释，你会给出什么改进建议？