CSS Experience Sharing: How to Write maintenance CSS code

Source: Internet
Author: User

1. Add a comment block at the beginning of the style sheet to describe the creation date, creator, tag, and other remarks of the style sheet.

Example source code:
/*
---------------------------------
Site: site name
Author: 52css.com
Updated: Date and Time
Updated by: Name
---------------------------------
*/

Ii. Public color tags

Example source code:
/*
---------------------------------
Colors
Body Background: # def455
Container Background: # fff
Main text: #333.
Links: # 00600f
Visited links: #098761
Hover links: # aaf433
H1, H2, H3: #960
H4, H5, H6: #000
---------------------------------
*/

3. Give meaningful names to IDS and Classes

The following naming method is not recommended:

Example source code:
. Green-box {...}
# Big-text {...}

Recommended naming methods:

Example source code:
. Pullquote {...}
# Introduction {...}

4. Integrate associated style rules

Example source code:
# Header {...}
# Header H1 {...}
# Header H1 IMG {...}
# Header FORM {...}
# Header A # Skip {...}
# Navigation {...}
# Navigation ul {...}
# Navigation ul Li {...}
# Navigation ul Li {...}
# Navigation ul Li A: hover {...}
# Content {...}
# Content H2 {...}
# Content P {...}
# Content ul {...}
# Content ul Li {...}

5. Add clear comments to the style

Example source code:
/*
---------------------------------
Header styles
---------------------------------
*/
# Header {...}
# Header H1 {...}
# Header H1 IMG {...}
# Header FORM {...}
/*
---------------------------------
Navigation styles
---------------------------------
*/
# Navigation {...}

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: info-contact@alibabacloud.com 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.