CSS註釋瞭解一下

純潔的程式碼發表於2019-12-26
聊一聊css的註釋
很少會有人會特別注意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;

}


相關文章