CSS Annotation Part programming extension

CSS Annotations

As described in the HTML tutorial, annotations in CSS documents also play an important role in helping us remember the meaning of CSS, loading the location of HTML documents, and so on.

Start of CSS comments/*, end use/

CSS annotation Syntax

CSS code copy content to clipboard

/* Comment Content * *

Example

/*----------Text style starts----------* *

* * Dream is white 12 pixel text * *

. dreamduwhite12px

{

Color:white;

font-size:12px;

}

* * Dream All Black 16 pixel text * *

. dreamdublack16px

{

Color:black;

font-size:16px;

}

/*----------Text style End----------* *

Style advice

I use a document block style annotation with a line width of no more than 80 bytes:

CSS code copy content to clipboard

/**

* This is a docblock style comment

*

* This is a longer description of the comment, describing the "code in"

* detail. We limit these lines to a maximum characters in length.

*

* We can have markup in the comments, and are encouraged Todo so:

*

　　

　　

Lorem

　　

*

* We do not prefix lines of the code with a asterisk as to does so would inhibit

* Copy and paste.

*/

/**

* This is a document block (DocBlock) style annotation.

*

* This begins with a more detailed, lengthy annotation body. Of course, we have to control the line width within 80 bytes.

*

* We can embed HTML tags in comments, and that's a good idea:

*

　　

　　

Lorem

　　

*

* If the tag is embedded in the annotation, do not precede it with an asterisk, lest it be copied.

*/

You should try to describe the code in the comments as much as possible, because what's clear and understandable to you may not be the case with others. Each part of the code must be written specifically to explain the comments.

Extended usage of annotations

Annotations have many very advanced uses, such as:

Quasi-Modified selector (quasi-qualified selectors)

Code label

Inheritance Tags

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:

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.