Introduction to some advanced usage of CSS comments

Some advanced uses of CSS comments

Quasi-qualified selectors

You should avoid over-qualified selectors, for example if you can write .nav{ } Just try not to write ul.nav{}. Excessive modification of selectors will affect performance, affect class reusability, and increase selector privacy. These are things you should try to avoid.

However, sometimes you may want to tell other developers the scope of use of a class. Taking .product-page as an example, this class looks like a root container, which may be an html or body element, but it cannot be determined based on .product-page alone.

We can add quasi-modification before the selector (that is, comment out the previous type selector) to describe the scope of the class we plan:

/*html*/.product-page{}

This way we can accurately know scope of the class without affecting reusability.

Other examples are:

/*ol*/.breadcrumb{}  
    /*p*/.intro{}  
    /*ul*/.image-thumbs{}

In this way we can know the class scope without affecting the privacy of the code.
Code Tags

If you write a new set of styles, you can add tags to it, for example:

/** 
     * ^navigation ^lists 
     */ 
    .nav{}  
     
    /** 
     * ^grids ^lists ^tables 
     */ 
    .matrix{}

These tags can make other developers Find relevant code quickly. If a developer needs to find parts related to lists, he can quickly locate .nav, .matrix and other related parts by searching for ^lists.
Inheritance tags

If you apply object-oriented ideas to CSS writing, you can often find two parts of CSS that are closely related (one is the base, the other is the extension) but divided into two places. We can use inheritance tags to establish a close connection between the original element and the inherited element. These are written as follows in the comments:

In the basic style of the element:

/** 
     * Extend `.foo` in theme.css 
     */ 
     .foo{}

In the extended style of the element:

/** 
     * Extends `.foo` in base.css 
     */ 
     .bar{}

like this In this way we can establish a close connection between two pieces of code that are far apart.