CSS Optimization

Divide style sheet into the following sections: style reset, typography(fonts and colors), dimensions(width and height), effects, box model(margins, padding, and borders), backgrounds(images and colors), grid(universal line-height and relative widths and heights of divs), and widgets(buttons, tabs, forms, menus)

Put page specific style sheet in separate files that only need to be loaded when needed

Load large style sheets as server side scripts to enable CSS variables

The most widely available fonts are: Trebuchet MS, Georgia, Verdana, Century Gothic, Lucida Sans, Lucida Grande

Always reset margin, padding, fonts, and line height before anything else

Always set font, width, height, color, and display properties for each element

Always group properties for reusable elements and modules like forms, pointers, headers, footers, grid and navigation styles into a single class

Use consistent line height throughout the site

Make sure your margins and paddings are multiples of the line height

Use gzip to compress CSS files and put them on a subdomain

Include all CSS files at once using a server side script instead of multiple link tags

Define the CSS background-image property as well as the source property of the same image tag to overlay a foreground image over a background image

Use display:block as the default for images and hr tags if that will be used more often than not

TrackBack URI

Blog at WordPress.com. | Theme: Pool by Borja Fernandez.
Entries and comments feeds.