Let’s talk about CSS comments

Very few people pay special attention to CSS comments, either with shortcuts or without comments, and only a few developers pay special attention to CSS comments. Look at the BAT system CSS comments, there are norms, but no style. Foreign developers have better thinking about annotations, which is worth learning by our domestic developers. CSS comments can reveal the coding style and habits of the developer, which can be used to determine individual or team behavior. For perfectionist developers, it can be hard not to pay attention to their code comments.

Main contents: Basic comment, variable comment (optional), block-level comment, group comment, specific style comment, inheritance comment, mixin comment (optional), function comment (optional) Other comments need to be added. If sASS is not used,less is optional.

Take time: 1 minute to finish reading.

CSS comment style reference

The following comments refer to Bootstrap source code style, normalize and other comments for your reference.

The basic annotation

** Adjust the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in * IE on Windows Phone and in iOS. */Copy the code

Variable annotation

//
// Variables
// --------------------------------------------------



Copy the code

Block-level comments: Centralized storage of CSS code associated with a function

/ * block-level comment = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = * /Copy the code

Group comments: that is, similar styles should be declared under a set of related comments for immediate adjustment

//== color // //## Range of usesCopy the code

Specific style comments

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

Inheritance annotation

/** * Extend '.foo 'in theme. CSS */Copy the code

Mixins annotation

The bootstrap style

// 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.tex-hide () 'and deprecated'.hide-text() '. // // Source: HTTP: / / https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757 / / Deprecated as of v3.0.1 (has had been removed in v4) @ mixins  hide-text() { font: 0/0 a; color: transparent; text-shadow: none; background-color: transparent; border: 0; }Copy the code

Js series


/**  
 * mixin name and use
 * @param
 * @return 
 */  

@mixin hide-text() {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

Copy the code

Other styles of comments…