前端CSS注釋技術基礎

更新時間:2018-12-26 來源:黑馬程序員技術社區(qū) 瀏覽量:

前端與移動開發(fā)中有很多會特別注意了解CSS注釋，注釋分為快捷注釋，要么就是沒有注釋，只有很少的一些開發(fā)人員會注重CSS注釋，這里也要看BAT系的css注釋，有規(guī)范，但無風格。

國外的開發(fā)人員對注釋就有著比較好的思考，值得我們國內的開發(fā)者去學習。
從CSS注釋當中可以看出開發(fā)人員的編碼風格與習慣，進而判斷出個人或者團隊行事風格。對于有完美主義的開發(fā)者，對于自己的代碼注釋不重視，那是相當難受的。

主要內容：基本注釋、變量注釋(可選)、塊級注釋、群組注釋、具體樣式注釋、繼承注釋、mixin注釋(可選)、函數(shù)注釋(可選)
其他注釋待補充。如果未使用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

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

塊級注釋：集中存放某個功能關聯(lián)的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;

}

文章來源：
作者：黑馬程序員前端與移動開發(fā)培訓學院
首發(fā)：http://web.itheima.com/?v2