7.2　为样式规则添加注释

在CSS中添加注释是个好主意，这样就可以标注样式表的主要区域，或者只是对某条规则或声明的说明。注释不仅对你有用，对阅读代码的其他人也有好处。当你过几个月再看你写的代码时，会庆幸自己留下了这些注释。

为样式规则添加注释

  • 在样式表中，输入/*开始注释。

  • 输入注释。

  • 输入*/结束注释。

提示　注释可以包含回车，因此可以跨越多行（参见图7.2.1）。

  1. /*这是一段CSS注释。它可以只有一行，也可以 跨越多行。这个注释比大多数注释都长。CSS注 释不会同网站HTML内容一起显示在浏览器中。 下面一条注释更合乎注释的常规用法。 */
  2.  
  3. /*为旧的浏览器设置特定HTML5元素的默认呈现样式。*/
  4.  
  5. article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  6.      display: block;
  7. }

图7.2.1　注释可长可短，但它们通常较短。可以根据你的想法，用它们描述样式规则或一组相关的规则的目的。注释做得好可以让样式表更易于维护

提示　不能将注释放在另一个注释里。换句话说，注释中不能包含*/。

　

提示　可以将注释放在单独的行上（参见图7.2.1），也可以放在声明块里（参见图7.2.2），也可以放在规则后面（参见图7.2.2）。

  1. /* Add rounded corners in supporting browsers */
  2. .box {
  3.      -webkit-border-radius: 12px; /* Safari 3-4 */
  4.      -moz-border-radius: 12px; /* Firefox 3.6 及以下 */
  5.      border-radius: 12px; /* 现代浏览器 */
  6. } /* 再写一条注释*/

图7.2.2　也可以在声明块里或规则后面插入注释

提示　注释是很有用的组织工具。样式表很快就会变得很长，因此，对样式表进行组织对于保持CSS易于维护是至关重要的。通常，将相关的规则放在一起，形成分组，并在每组前面放置一段描述性的注释，参见图7.2.3。

  1. /* GLOBAL NAVIGATION（全站导航）
  2. ------------------------------- */
  3. ……全站导航的样式规则……
  4.  
  5. /* MAIN CONTENT（主体内容）
  6. ------------------------------- */
  7. ……主体内容的样式规则……
  8.  
  9. /* SIGN-UP FORM（注册表单）
  10. ------------------------------- */
  11. ……注册表单的样式规则……
  12.  
  13. /* PAGE FOOTER（页脚）
  14. ------------------------------- */
  15. ……页脚的样式规则……

图7.2.3　注释可以让样式表管理变得很轻松。对样式表中的主要区域添加注释，就可以保持样式表井然有序。下面的格式（使用大写字母和一条下划线）可以很清楚地标识分组的开始位置。这种做法可以很清晰地将它们与其他注释（如图7.2.1和图7.2.2中的注释）区分开来

提示　无论你采用怎样的注释格式，推荐你定下一种并坚持使用，特别是在团队协作的时候。

　

提示　可以将注释放在样式规则的周围或里面，从而对浏览器隐藏样式规则（参见图7.2.4）。这是对样式表进行测试的一种好方法，不必永久性地删除注释部分，直到你认为可以删除它们了。这也是很有用的调试工具，可以将你认为可能引起问题的地方“注释掉”，再在浏览器中刷新页面，查看问题是不是解决了。

  1. img {
  2.     border: 4px solid red;
  3.     /* margin-right: 12px; */
  4. }

图7.2.4　可以将你不希望对页面产生影响的声明“注释掉”。这里，所有的图像都会拥有一条4像素宽的红色实线边框，但不会有右侧外边距，因为margin-right: 12px;位于一条注释里面。注释也可以包围整个规则，只要这个注释里面没有任何注释

提示　出于演示的目的，这些例子都使用了很多注释，但不要因此认为要对所有内容添加注释。如果样式表里的注释过多，反而会难以阅读。要根据需要混合使用组织性注释和描述性注释。要针对你和团队里的其他成员，找到一个平衡点。