更新時間:2018-12-26 來源:黑馬程序員技術(shù)社區(qū) 瀏覽量:
前端與移動開發(fā)中有很多會特別注意了解CSS注釋,注釋分為快捷注釋,要么就是沒有注釋,只有很少的一些開發(fā)人員會注重CSS注釋,這里也要看BAT系的css注釋,有規(guī)范,但無風(fēng)格。
國外的開發(fā)人員對注釋就有著比較好的思考,值得我們國內(nèi)的開發(fā)者去學(xué)習(xí)。
從CSS注釋當(dāng)中可以看出開發(fā)人員的編碼風(fēng)格與習(xí)慣,進(jìn)而判斷出個人或者團(tuán)隊行事風(fēng)格。對于有完美主義的開發(fā)者,對于自己的代碼注釋不重視,那是相當(dāng)難受的。
主要內(nèi)容:基本注釋、變量注釋(可選)、塊級注釋、群組注釋、具體樣式注釋、繼承注釋、mixin注釋(可選)、函數(shù)注釋(可選)
其他注釋待補(bǔ)充。如果未使用sass,less的可以忽略可選。
css注釋風(fēng)格參考
下面的注釋參考了Bootstrap源碼的風(fēng)格、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
// --------------------------------------------------
塊級注釋:集中存放某個功能關(guān)聯(lián)的css代碼
/* 塊級注釋
==========================================================================
*/
群組注釋:即類似的樣式應(yīng)該聲明在一組相關(guān)的注釋下面,以便及時調(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;
}
文章來源 :
作者:黑馬程序員前端與移動開發(fā)培訓(xùn)學(xué)院
首發(fā):http://web.itheima.com/?v2