全国咨询热线:400-618-9090

首页技术文章正文

前端CSS注释技术基础

创建时间:2018-12-26 15:54:05.0 来源:黑马程序员技术社区

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

在线咨询 我要报名