前端CSS注释技术基础

更新时间:2018-12-26 来源:黑马程序员技术社区浏览量:

前端与移动开发中有很多会特别注意了解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;

}

文章来源：
作者：黑马程序员前端与移动开发培训学院
首发：http://web.itheima.com/?v2