CSS注释语法

一个样式表创建完成后，再过几个星期、几个月，甚至几年后，再回过头来进行修改时，你可能怎么也想不明白以前为什么要创建这个样式，以及它到底有什么作用。对于任何项目，都是如此。

因此，在构建网站时，应该提示自己做了什么，以及这么做的原因。庆幸的是，可以通过CSS注释，把这些提示信息嵌入到式表中。

CSS注释，只不过是用“/*”和“*/”包围起来的内容。注释的内容不会被浏览器读取或执行，而它确为你提供了有益的提示。假如你创建了下面的样式，来解决IE的双边距bug：

1. * html .fl {
2.     display: inline;
3. }

在编写这个样式的时候，你很清楚它的作用，但 3 个月后，你还记得清楚吗？添加注释，让你或者需要在这个网站上工作的其他人，了解该样式的作用及创建它的原因。如：

1. /* 修复IE双边距bug */
2. * html .fl {
3.     display: inline;
4. }

注释可以是单行的，如果注释的内容很长，也可以跨越多行。注释可以独占一行，也可以放在声明块或声明语句中。注释可以出现在CSS代码的任何位置，但是，不能把注释放在另一个注释里面，即注释不能嵌套。以下都是合法的注释：

1. /* reset */
2. body, p, img, ul, ol {
3.     margin: 0;
4.     padding: 0;
5. }
6. body {
7. /* width: 90%;
8. height: 100%; */
9. font-size: 14px  /* 62.5% */;  /* 16px * 62.5% = 10px */
10. background: #ccc;
11. }

如果CSS文件非常长，那么寻找特定的样式会很困难。一种改进方法是使用大的注释块，来把CSS文件分隔成多个逻辑部分，并在注释块的头部添加一个标志。这样，搜索这个标志和注释头中的前几个字母，就可以立即找到要寻找的部分。

1. /*------------ @ reset ------------*/
2. /*------------ @ general ----------*/
3. /*------------ @ hack -------------*/

并非所有东西都能够很自然的非常明确的块，这需要开发人员进行判断。总之，代码分隔得越细致、越合理，就越容易理解，而且能够更快地找到要寻找的规则，日后维护起来也越轻松。

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。