CSS skills-how to organize and annotate CSS files

There are many ways to organize and comment out CSS files, but there is no answer to which method is the best. It depends on your work. if you have a better method, please let us share it with you .....

When our style sheets become very complex, it is very important to organize them in a neat and easy-to-understand structure. organizing style sheets allows us to write more efficient CSS and make it easy for others to understand and edit CSS styles. of course, every designer has his/her favorite method.

1. Organize by location

Some designers like to use blocks to organize their style rules. All # branding in one group and all # content in another group.

Copy to ClipboardReference: [www.bkjia.com]/* = content_main */
Div # content_main {width: 70% ;}
Div # content_main p {font-size: 100% ;}
Div # content_main P> a {text-decoration: underline ;}

/* = Content_sub */

Div # contetn_sub {width: 30% ;}
Div # contetn_sub p {color: #666 ;}
Div # contetn_sub p> strong {font-weight: normal ;}

2. Separate CSS parts

By combining CSS comments, part of the tag and the break as the separator can easily divide different parts of CSS. this helps you and future Developers find a rule and understand which part of the rule is applied to the design.

Copy to ClipboardReference content: [www.bkjia.com]/* main content
--------------------------------------*/

After writing CSS for a few months at first, if you have trouble returning to the project, this method will prompt you where to start each part. This will save us time.

3. Organize with elements

Others prefer to use elements to organize rules, group and combine all elements by title, paragraph, and list.

Copy to ClipboardReference: [www.bkjia.com]/* p */
P {line-height: 110% ;}
Blockquote p {padding-left: 1em ;}
Div # site_info p {text-align: center ;}

/* Ul */

Ul {line-height: 110% ;}
Div # nav_main ul {list-style-type: none ;}
Div # content_sub ul {border: 1px solid # ccc ;}

4. CSS Markup

Simply adding a simple mark before marking the text in the comments section, such as the character "=", makes it easier for us to locate and jump to that section.

Copy to ClipboardReference: [www.bkjia.com]/* = p */

Use the SEARCH Command in our text editor to search for "= p". You can ignore the ineffective list-style-type or padding and directly jump to the Section section.

5. Divide CSS into multiple files.

It is controversial whether a linked or imported CSS file is easier to manage than multiple independent files in the final product, you can analyze the specific situation to get the best answer. it is clear that multiple files have obvious advantages when creating an interactive prototype.

For example, you can split the design prototype into the following independent files.

The 1 Layout pattern includes the display ((((css CSS ).

The 2) (color.css ).

The 3rd edition information includes the font and font size, height, interval, and trim (type.css ).

To simplify and reduce the number of style sheets linked to tags or from tags, we can choose to link a file and use the @ import @ rule to import the additional style sheets in this file.

The referenced style sheet must appear in the style sheet header before other rules, so as to ensure normal results.

Copy to ClipboardReference: [www.bkjia.com] @ import url(color.css );
@ Imporp url(type.css );

[Remaining layout.css rules]

So far, we have learned to use ideographic labels and CSS to create interactive prototypes to help complete lightweight, ideographic code, easy-to-understand content, and flexible design, it also helps us communicate with colleagues and customers more efficiently. ----- from: <beyond CSS: the essence of Web Design Art>