Some advanced usages of CSS annotations

Quasi-Modified selector (quasi-qualified selectors)

You should avoid overly modifying selectors, for example if you can write. nav{} try not to write ul.nav{}. Overly-modified selectors will affect performance, affect class reusability, and increase the picker's private degree. These are the things that you should be trying to avoid.

But sometimes you might want to tell other developers how to use the class. In the case of. Product-page, this class looks like a root container, possibly an HTML or a BODY element, but only. Product-page cannot be judged.

We can describe our planned class scope by adding a quasi-modifier to the selector (which will be commented out on the previous type selector):

CSS code copy content to clipboard

/*html*/.product-page{}

This allows us to accurately understand the scope of the class without affecting reusability.

Other examples are as follows:

CSS code copy content to clipboard

/*ol*/.breadcrumb{}

/*p*/.intro{}

/*ul*/.image-thumbs{}

This allows us to learn about class scope without affecting code privacy.

Code label

If you write a new set of styles, you can add a label to it, such as:

CSS code copy content to clipboard

/**

* ^navigation ^lists

*/

. nav{}

/**

* ^grids ^lists ^tables

*/

. matrix{}

These tags allow other developers to quickly find the relevant code. If a developer needs to find parts related to the list, he can quickly navigate to the. Nav,.matrix and other related parts as long as he searches for ^lists.

Inheritance Tags

Use object-oriented ideas for CSS writing, you can often find two parts of CSS closely related (one of the basis, the first one for expansion) but two. We can use inheritance tags to establish a close relationship between the original element and the inherited element. These are written in the comments as follows:

In the basic style of the element:

CSS code copy content to clipboard

/**

* Extend '. Foo ' in Theme.css

*/

. foo{}

In the extension style of the element:

CSS code copy content to clipboard

/**

* Extends '. Foo ' in Base.css

*/

. bar{}

So we can establish a close relationship between two very remote codes.