聊一聊css的註釋
很少會有人會特別注意CSS的註釋,要麼就快捷鍵註釋,要麼就沒有註釋,只有少部分的開發人員會特別留意CSS註釋。看了BAT系的css註釋,有規範,但無風格。
國外的開發人員對註釋就有著比較好的思考,值得我們國內的開發者去學習。
從CSS註釋當中可以看出開發人員的編碼風格與習慣,進而判斷出個人或者團隊行事風格。對於有完美主義的開發者,對於自己的程式碼註釋不重視,那是相當難受的。
國外的開發人員對註釋就有著比較好的思考,值得我們國內的開發者去學習。
從CSS註釋當中可以看出開發人員的編碼風格與習慣,進而判斷出個人或者團隊行事風格。對於有完美主義的開發者,對於自己的程式碼註釋不重視,那是相當難受的。
主要內容:基本註釋、變數註釋(可選)、塊級註釋、群組註釋、具體樣式註釋、繼承註釋、mixin註釋(可選)、函式註釋(可選)
其他註釋待補充。如果未使用sass,less的可以忽略可選。
其他註釋待補充。如果未使用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;
}