CSS Best Practice

Below are the few css best practice which we should fallow.

Avoid using inline styles in page.

Declare your most generic items first, then the not-so-generic and so on.

Organize the Stylesheet with a Top-down Structure

If you don’t have to reference specific object, it is strongly recommended to use class instead of id selectors

Use Useful Naming Conventions: Use lowercase characters to define your class.  Use always presentational naming example. When assigning a class or id, ask yourself “What is this element for? Avoid using names that rely on location

CSS Shorthand makes development much easier and keeps your CSS clean, short & accessible.

Use Multiple Classes

Avoid Extra Selectors

Optimize CSS code creating only the main classes and reusing HTML standard tags for child elements

If  layout is not so complex in order to justify multiple files then it is better to have one large css file rather than multiple small files because that way you reduce http requests.

Giving precise and clear class names to your elements is a key. This will seriously avoid confusion & let you understand your CSS better and faster.

Combining all background images into one single image and displaying them using background positions is all we call CSS Sprites. CSS Sprites reduces the number of HTTP requests, saves bandwidth and loads faster.

Global Reset ensures almost an identical presentation of a site across all the browsers. There are many different resets from simple to complex ones.

CSS frameworks good for rapidly speed up our development time and creating clean grid structure. Some popular frameworks are:

960 CSS Framework, Blueprint CSS Framework, YAML, Yahoo YUI Grids CSS etc.

Using a CSS Frameworks is not always recommended but a CSS Reset is all you need.

Always use em instead of pt, px, cm

Optimize your css with CSS Compressors

Its always important to validate your CSS when you build it. This is to make sure that your CSS is error free and is interpreted in the right way in all the browsers. The W3C Validator has been a very popular online tool that validates CSS.

Share this nice post:

One thought on “CSS Best Practice

Comments are closed.