Shulou(Shulou.com)06/03 Report--

Today, I will talk to you about the example analysis of the programming extension of the annotated part of CSS. Many people may not understand it very well. In order to make you understand better, the editor has summarized the following content for you. I hope you can get something according to this article.

CSS comment

As described in the HTML tutorial, comments also play an important role in CSS documents, which can help us remember the meaning of CSS, where to load in HTML documents, and so on.

Start with / * and end with * / for CSS comments

CSS comment syntax

/ * comment content * /

Example

/ *-start text style-* /

/ * White 12-pixel text in the capital of dreams * /

.dreamduwhite12px

{

Color:white

Font-size:12px

}

/ * Black 16-pixel text in the capital of dreams * /

.dreamdublack16px

{

Color:black

Font-size:16px

}

/ *-end of text style-* /

Style suggestion

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

/ * *

* This is a docBlock style comment

*

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

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

*

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

*

Lorem

*

* We do not prefix lines of code with an asterisk as to do so would inhibit

* copy and paste.

, /

/ * *

* this is a DocBlock style comment.

*

* this starts with a more detailed and longer comment text. Of course, we need to limit the line width to 80 bytes.

*

* We can embed HTML tags in comments, and this is also a good idea:

*

Lorem

*

* if it is an embedded tag in the comment, do not precede it with an asterisk so as not to be copied into it.

, /

The code should be described in as much detail as possible in the comments, because what is clear to you may not be the case for others. Every part of the code is written with comments to explain it in detail.

Extended usage of annotations

Comments have many advanced uses, such as:

Quasi-modified selector (Quasi-qualified selectors)

Code label

Inheritance tag

Quasi-modified selector (Quasi-qualified selectors)

You should avoid overdecorating selectors, for example, if you can write .nav {}, try not to write ul.nav {}. Excessive modification of the selector will affect the performance, affect the class reusability, and increase the privacy of the selector. These are all things you should try your best to avoid.

But sometimes you may want to tell other developers the scope of class. Take the. product-page as an example, this class looks like a root container, which may be a html or body element, but the. product-page alone cannot tell.

We can describe our planned scope of class by adding a quasi-modifier before the selector (that is, commenting out the previous type selector):

/ * html*/.product-page {}

In this way, we can accurately know the scope of the class without affecting reusability.

Other examples include:

/ * ol*/.breadcrumb {}

/ * p*/.intro {}

/ * ul*/.image-thumbs {}

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

Code label

If you have written a new set of styles, you can tag it, for example:

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 locate .nav, .matrix and other related parts by searching ^ lists.

Inheritance tag

If you apply object-oriented thinking to CSS writing, you will often find two parts of CSS that are closely related (one is based on one and the other is extension). 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:

/ * *

* Extend `. Foo` in theme.css

, /

.foo {}

In the extension style of the element:

/ * *

* Extends `. Foo` in base.css

, /

.bar {}

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

After reading the above, do you have any further understanding of the sample analysis extended by programming in the annotated section of CSS? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.