Some advanced usage of CSS annotations

Some advanced uses of CSS annotations

Quasi-modifier selector (quasi-qualified selectors)

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

But sometimes you might want to tell other developers what class to use. In. Product-page, for example, this class looks like a root container, possibly an HTML or BODY element, but it cannot be judged by the. Product-page.

We can describe our planned class scope by adding a quasi-modifier (which will comment out the preceding type selector) before the selector:

/*html*/.product-page{}

This allows us to accurately know the scope of the class without compromising reusability.

Other examples are as follows:

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

This allows us to know the scope of the class without compromising the private degree 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 enable other developers to quickly find the relevant code. If a developer needs to find and list related parts, he can quickly navigate to the. Nav,.matrix and other relevant sections by searching ^lists.
Inheritance Tags

Using the object-oriented approach to CSS authoring, you can often find two parts of CSS closely related (one for the foundation, the first to expand) but two. We can use inheritance tags to establish a close connection between the original element and the inherited element. These are spelled in the comments as follows:

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{}

In this way, we can build a close relationship between two pieces of code that are far apart.

