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.
