全国咨询/投诉热线:400-618-9090

首页技术文章正文

前端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

javaee

python

web

ui

cloud

test

c

netmarket

pm

Linux

movies

robot

http://www.itcast.cn/subject/uizly/index.shtml?seozxuids

14天免费试学

基础班入门课程限时免费

申请试学名额

15天免费试学

基础班入门课程限时免费

申请试学名额

15天免费试学

基础班入门课程限时免费

申请试学名额

15天免费试学

基础班入门课程限时免费

申请试学名额

20天免费试学

基础班入门课程限时免费

申请试学名额

8天免费试学

基础班入门课程限时免费

申请试学名额

20天免费试学

基础班入门课程限时免费

申请试学名额

5天免费试学

基础班入门课程限时免费

申请试学名额

0天免费试学

基础班入门课程限时免费

申请试学名额

12天免费试学

基础班入门课程限时免费

申请试学名额

5天免费试学

基础班入门课程限时免费

申请试学名额

5天免费试学

基础班入门课程限时免费

申请试学名额

10天免费试学

基础班入门课程限时免费

申请试学名额
在线咨询 我要报名