CSS3 has changed how web pages are styled. Instead of having styling code with every element of your web page, you can now have your styling defined in one location and applied to all the elements of your web page. This enables having consistent styling which can be changed by making changes at one location and having it reflect across your page. However, there are a few best practices associated with using CSS3.

 

One CSS to rule them all

As software engineers, it seems brain-dead simple to have separate CSSs for various styles – footer.css, header.css, about.css, etc. to allow them to be changed independently. However, downloading each file means a separate HTTP call to the endpoint to download it. The biggest overhead is establishing a connection – downloading the bytes isn’t a costly operation compared to establishing an end point.

In that light, it is recommended to have a single CSS file which can over the styling definitions for all the elements of the page. Today’s browsers are smart enough to not download the file if it has been downloaded previously pushing the cost of downloading the stylesheet the first time a user visit the site.

 

Define stylesheets externally

As the title states, and can be inferred from the above, define the style externally to the code of your web page. Having an external definition allows to keep the content separate from presentation. It also supports evolving the presentation separately from content, reducing the opportunity for introduction of bugs when code change happens.

One additional benefits is that since the stylesheet is downloaded on the first visit, subsequent visits to the same page or other pages using the same CSS does not result in additional HTTP requests.

Use reset or normalizer CSS to handle variation in browser behavior

Browsers have their own stylesheets. This can cause a few elements to display inconsistently across different browsers.

As a best practice, you can use reset or normalizer CSS to make all browsers behave normally. This will remove or normalize a lot of default styles and bring a uniform styling for all browsers.

You can normalized by beginning the stylesheet with a low specificity setting of baseline styles which removes cross-browser differences in user agent stylesheets. Check out Yahoo’s reset CSS file http://yuilibrary.com/yui/docs/cssreset/ for a great implementation.

 

Define styling on elements and classes

While CSS3 supports styling on individual IDs (element identifiers), it is recommended that the styling be defined on elements and classes. That will reduce specificity which in turn will reduce the number of selectors you would need to override (in case you wanted to).

Since IDs are associated with individual elements, associating styles with IDs will limit the re-usability of a style if you have a lot of similar elements for which styling is needed.

 

 

!important and CSS do not match

The !important keyword is a big no-no with CSS3. !important overrides the cascading ability for the property for which it is declared, especially it is declared at a lower specificity.

It is strongly recommended to not use !important in your stylesheet definition.

 

Be consistent

The last tip I want to share is to be consistent. A lot of how your web page looks depends on the CSS you have defined. You want your buttons to match the theme of your header/footer/etc… It will be extremely important that your layout appeals to the user and they don’t seem surprised by the look and feel of a particular section of your website. Be consistent and your reader will be pleased.

 

Summary

In this article, we learned about some of the best practices with using CSS3 in your HTML web pages. If you have some things you swear by, please add them as comments below.

 

About the author

Vipul Patel is a Program Manager currently working at Amazon Corporation. He has formerly worked at Microsoft in the Lync team and in the .NET team (in the Base Class libraries and the Debugging and Profiling team). He can be reached at vipul.patel@hotmail.com