Write CSS that is lighter, faster, and less likely to give you headaches

Source: Internet
Author: User

Web page Production WEBJX article introduction: write CSS that is lighter, faster, and less likely to give you headaches.

Why is our CSS so messed up-we're really easy to get caught up in this confusion.

Sometimes this is the result of sloppy programming at first, sometimes because of late multiple additional code (hacks) and modifications.

Either way, it's not inevitable. Write clean, super manageable CSS is simple, as long as you go the right way, your code will be more convenient for future maintenance and editing.

Write more lightweight, faster, and less annoying CSS, and these 10 tips will improve your ability to do this.

1. Keep the bar rational

Like anything else, it is worthwhile to keep yourself rational (organized). Adopt a clear structure, rather than organizing IDs and classes at will (don't write what you think).

This will help you keep in mind the cascading nature of CSS and allow your stylesheet to take advantage of style inheritance.

First declare the most common item (ID class or HTML element), and the next is slightly less common ... So This allows your CSS to properly inherit attributes, and it's easier to rewrite a particular style when needed. It will also be quicker to edit CSS in the future because it follows a logical structure that is easy to read.

Use a structure that is best for you, while thinking about future editors and other developers.

    • Resetting and overriding
    • Links and Fonts
    • Master Layout
    • Second-level layout structure
    • Form elements
    • Other miscellaneous

      2. Title, date and signature

      Let others know who wrote your CSS, when it was written, and who to contact if there were any questions. This is useful when designing a template or theme.

      Wait a moment ... What's the color-mark number? Over the years, I've found that it's really helpful to have a simple list of colors that I use in my style sheet for the initial development and later editing.

      This saves you from opening Photoshop to suck a color from the design, or to look up the color in the site's style guide (if it exists). If you need that particular blue HTML code, just flip it to the comment and copy it.

      3. Get a template Library

      Once you've chosen to use a structure, peel off all the generic and save the file as a CSS template for future use.

      You can save multiple versions for a variety of purposes: two-column layouts, blog layouts, printing, moving, and so on ... Coda (OS X's editor) has an excellent Clips feature that makes it easy for you to do this. Many other editors have similar features, but even a simple batch of text files works well.

      It's crazy to rewrite every style sheet from scratch each time, especially if each one uses the same conventions and methods.

[1] [2] Next page



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.