CSS注释了解一下

240 阅读2分钟
聊一聊css的注释
很少会有人会特别注意CSS的注释,要么就快捷键注释,要么就没有注释,只有少部分的开发人员会特别留意CSS注释。看了BAT系的css注释,有规范,但无风格。
国外的开发人员对注释就有着比较好的思考,值得我们国内的开发者去学习。
从CSS注释当中可以看出开发人员的编码风格与习惯,进而判断出个人或者团队行事风格。对于有完美主义的开发者,对于自己的代码注释不重视,那是相当难受的。
主要内容:基本注释、变量注释(可选)、块级注释、群组注释、具体样式注释、继承注释、mixin注释(可选)、函数注释(可选)
其他注释待补充。如果未使用sass,less的可以忽略可选。

css注释风格参考

下面的注释参考了Bootstrap源码的风格、normalize等的注释,给大家参考。
基本注释

/* 单行注释 */
/**
* 多行注释 *

1. Correct the line height in all browsers. *

2. Prevent adjustments of font size after orientation changes in *

IE on Windows Phone and in iOS.

*/


变量注释

//

// Variables

// --------------------------------------------------


块级注释:集中存放某个功能关联的css代码

/* 块级注释

==========================================================================

*/


群组注释:即类似的样式应该声明在一组相关的注释下面,以便及时调整

//== 颜色

//

//## 用途范围


具体样式注释

//** Background color for `<body>`.$body-bg: #fff !default;

继承注释

/** * 继承注释 * Extend `.foo` in theme.css */

mixins注释

bootstrap风格
// CSS image replacement//

// Heads up! v3 launched with only `.hide-text()`, but per our pattern for

// mixins being reused as classes with the same name, this doesn't hold up. As// of v3.0.1 we have added `.text-hide()` and deprecated `.hide-text()`.//// Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757// Deprecated as of v3.0.1 (has been removed in v4)@mixin hide-text() { font: 0/0 a; color: transparent; text-shadow: none; background-color: transparent; border: 0;}

js系
/**

* mixin name and use

* @param * @return

*/

@mixin hide-text() {

font: 0/0 a;

color: transparent;

text-shadow: none;

background-color: transparent;

border: 0;

}