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

This article introduces the relevant knowledge of "how to index CSS files". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

1. Decomposition of CSS style files

For small projects, divide the code into pieces and comment them according to the page structure or page content before writing the code. For example, you can divide global styles, layouts, font styles, forms, comments, and others into several different blocks to continue to work.

For larger projects, this obviously will not have any effect. At this point, you need to decompose the style into several different stylesheet files. The following master stylesheet is an example of this approach, and its main job is to import other style files. Using this method can not only optimize the style structure, but also help to reduce some unnecessary server requests. There are many ways to decompose files, and master stylesheet uses the most common one.

@ import "reset.css"

@ import "layout.css"

@ import "colors.css"

@ import "typography.css"

@ import "flash.css"

/ * @ import "debugging.css"; * /

At the same time, for large projects, you can also add CSS file upgrade logo or some diagnostics and other measures, which are not detailed here. Everyone should pay attention to summing up and thinking in the implementation work.

Second, index the CSS file

In order to quickly understand the structure of the entire CSS file, it is a good choice to index the file at the beginning of the file.

One feasible way is to build a tree index, and both id and class in structure can become a branch of the tree.

[Layout]

* body

+ Header / # header

+ Content / # content

-Left column / # leftcolumn

-Right column / # rightcolumn

-Sidebar / # sidebar

-RSS / # rss

-Search / # search

-Boxes / .box

-Sideblog / # sideblog

+ Footer / # footer

Navigation # navbar

Advertisements .ads

Content header h3

Or it could be like this:

[Contents]

1. Body

2. Header / # header

2.1. Navigation / # navbar

3. Content / # content

3.1. Left column / # leftcolumn

3.2. Right column / # rightcolumn

3.3. Sidebar / # sidebar

3.3.1. RSS / # rss

3.3.2. Search / # search

3.3.3. Boxes / .box

3.3.4. Sideblog / # sideblog

3.3.5. Advertisements / .ads

4. Footer / # footer

Another way is to simply list the content first without indentation. In the following example, if you need to skip to the RSS section, you only need a simple search.

[Contents]

1. Body

2. Header / # header

3. Navigation / # navbar

4. Content / # content

5. Left column / # leftcolumn

6. Right column / # rightcolumn

7. Sidebar / # sidebar

8. RSS / # rss

9. Search / # search

10. Boxes / .box

11. Sideblog / # sideblog

12. Advertisements / .ads

13. Footer / # footer

/ *-[8. RSS / # rss]-- * /

# rss {...}

# rss img {...}

Defining such a style search can effectively make it easy for others to read and learn your code. When working on a large project, you can also print out the search so that it is easy to refer to when you read the code.

Formatting CSS attributes

When we write code, using some special coding styles will be of great help to improve the readability of CSS code. Many people have different coding styles. Some people are used to putting color and font codes first, while others prefer more "important" attributes such as floating and positioning. Similarly, page elements can be sorted according to their structure in the layout:

Body,h2, h3, h4, p, ul, li,form {margin: 0; padding: 0; border: 0;}

Some developers use a more interesting approach: they arrange attributes in alphabetical order. It is worth noting that such an approach may cause problems for some browsers. Regardless of your own format, make sure that you have clearly defined these formatting methods. In this way, your colleagues will thank you for your efforts when reading your code.

IV. Rational use of indentation

To make your code feel more intuitive, you can use a line to define the style of the outline element. This approach can cause confusion when there are more than three attributes in the specified selector. However, by using this method in moderation, you can clearly distinguish the differences between the same kind.

# main-column {display: inline; float: left; width: 300px;} # main-column H2 {margin-bottom: 20px;} # main-column p {color: # 333;}

At the same time, the maintenance of style modification is also a troublesome problem. Many people forget after changing the style, and later found that the modified style caused the page error and had to look for it. Therefore, it is necessary to build a special format for the modified style. One simple way is to indent the modified style, and you can also use some annotations (such as "@ new") to make a logo.

# sidebar ul li a {display: block;background-color: # ccc;border-bottom: 1px solid # 999; / * @ new * / margin: 3px 0 3px 0 role padding: 3px; / * @ new * /} that's all for indexing CSS files. Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.