Some advanced usage of CSS annotations

Source: Internet
Author: User
Tags new set
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:


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.

  • Related Article

    Contact Us

    The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

    If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.