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

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