前端CSS注釋技術(shù)基礎(chǔ)

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

前端與移動(dòng)開(kāi)發(fā)中有很多會(huì)特別注意了解CSS注釋?zhuān)⑨尫譃榭旖葑⑨專(zhuān)淳褪菦](méi)有注釋?zhuān)挥泻苌俚囊恍╅_(kāi)發(fā)人員會(huì)注重CSS注釋?zhuān)@里也要看BAT系的css注釋?zhuān)幸?guī)范，但無(wú)風(fēng)格。

國(guó)外的開(kāi)發(fā)人員對(duì)注釋就有著比較好的思考，值得我們國(guó)內(nèi)的開(kāi)發(fā)者去學(xué)習(xí)。
從CSS注釋當(dāng)中可以看出開(kāi)發(fā)人員的編碼風(fēng)格與習(xí)慣，進(jìn)而判斷出個(gè)人或者團(tuán)隊(duì)行事風(fēng)格。對(duì)于有完美主義的開(kāi)發(fā)者，對(duì)于自己的代碼注釋不重視，那是相當(dāng)難受的。

主要內(nèi)容：基本注釋、變量注釋(可選)、塊級(jí)注釋、群組注釋、具體樣式注釋、繼承注釋、mixin注釋(可選)、函數(shù)注釋(可選)
其他注釋待補(bǔ)充。如果未使用sass,less的可以忽略可選。

css注釋風(fēng)格參考

下面的注釋參考了Bootstrap源碼的風(fēng)格、normalize等的注釋?zhuān)o大家參考。

基本注釋

/* 單行注釋 */

/**

* 多行注釋 *

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

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

塊級(jí)注釋?zhuān)杭写娣拍硞€(gè)功能關(guān)聯(lián)的css代碼

/* 塊級(jí)注釋

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

群組注釋?zhuān)杭搭?lèi)似的樣式應(yīng)該聲明在一組相關(guān)的注釋下面，以便及時(shí)調(diào)整

//== 顏色

//## 用途范圍

具體樣式注釋

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

繼承注釋

/** * 繼承注釋 * Extend `.foo` in theme.css */

mixins注釋

bootstrap風(fēng)格

// 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;

}

文章來(lái)源：
作者：黑馬程序員前端與移動(dòng)開(kāi)發(fā)培訓(xùn)學(xué)院
首發(fā)：http://web.itheima.com/?v2