4. CSS 注释

本节目标：学会写 CSS 注释，知道什么时候该加注释、怎么加。

注释的作用

注释就是给代码加的「说明文字」。浏览器读到注释会直接忽略，不会渲染出来。

注释的真正读者是你自己和同事。好的注释能帮你：

快速理解某段代码的意图
记住当时为什么这样写
方便团队协作和后期维护

CSS 注释的写法

CSS 注释以 /* 开始，以 */ 结束，中间写说明文字：

/* 这是一条 CSS 注释 */
p {
  color: red;
}

注释可以写在一行，也可以跨多行：

/* 单行注释 */

/*
  多行注释
  可以写好几行
  适合较长的说明
*/

注释放在哪里

注释可以出现在代码中的任何位置，常见的有这几种：

1. 在规则前面，说明整段代码的作用：

/* 页面头部样式 */
.header {
  height: 60px;
  background-color: #333;
}

2. 在属性后面，说明单个属性：

.container {
  width: 1200px;    /* 内容区固定宽度 */
  margin: 0 auto;   /* 水平居中 */
}

3. 在声明块内部，分组说明：

.card {
  /* 尺寸 */
  width: 300px;
  padding: 20px;

  /* 外观 */
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

用注释临时禁用代码

注释还有一个实用功能：临时「关闭」某条声明，方便调试：

.box {
  width: 200px;
  /* height: 100px;  暂时禁用高度 */
  background: lightblue;
}

把声明用注释包起来，浏览器就会跳过它。调试完删掉注释就能恢复。

Tip

这招在排查样式问题时特别好用。一条条注释掉属性，可以快速定位是哪个属性导致的问题。

HTML 注释 vs CSS 注释

HTML 和 CSS 的注释语法不一样，别搞混了：

<!-- 这是 HTML 注释 -->

<style>
  /* 这是 CSS 注释 */
  p { color: red; }
</style>

在 <style> 标签里只能用 CSS 注释 /* */，不能用 HTML 注释 。

注释的最佳实践

该加注释的场景：

页面主要区块的划分（头部、主体、底部）
不直观的数值（比如某个间距为什么是 17px 而不是 16px）
兼容某些浏览器的 hack 写法
复杂布局的实现思路

不该加注释的场景：

显而易见的代码（color: red; /* 红色 */ 就是废话）
过时的信息（代码改了注释也要跟着改）
到处都加注释（注释太多反而干扰阅读）

完整示例

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>CSS 注释示例</title>
  <style>
    /* ========== 全局重置 ========== */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    /* ========== 页面布局 ========== */
    .wrapper {
      width: 1200px;
      margin: 0 auto;  /* 水平居中 */
    }

    /* 主内容区 */
    .main {
      padding: 20px;
      background: #fff;
    }

    /* 侧边栏 */
    .sidebar {
      width: 280px;
      float: right;
      /* TODO: 响应式适配待补充 */
    }
  </style>
</head>
<body>
  <div class="wrapper">
    <div class="main">主内容</div>
    <div class="sidebar">侧边栏</div>
  </div>
</body>
</html>

学完这章你应该知道

CSS 注释用 /* */，浏览器会忽略
注释可以放在代码任何位置
用注释可以临时禁用某条声明来调试
注释写给未来的自己看，别写废话

下一章开始进入选择器，这是 CSS 最核心的能力之一。