CSS DO’s and DON’Ts

Posted on June 6, 2008 in Blog

Welcome to the first installment of CSS DO’s and DONT’s, a monthly blog series designed to provide useful, time-saving CSS tips while making note of some bad habits website developers tend to repeat in their code, despite the negative impact on workflow.

Today’s DO’s and DONT’s:

DO Create a reset.css file and DON’T use Inline CSS Styling in Your Markup.
DO Create a reset.css File

Cross-browser compatibility is a well-known term and largely-discussed topic among web developers and programmers. For the non-developer and average internet user, the term means absolutely nothing until the day they decide to switch (or upgrade, as some might argue!) their internet browser from Internet Explorer (IE) to Mozilla, only to discover that their favorite website or blog looks vastly different in the new browser.

As long as the differences weren’t evident enough to hinder the usability of the site, such as shifting the navigation menu outside the browser viewing area, the user would probably just chalk it up to a design update and continue on with their daily read. Developers and programmers, however, would immediately recognize these layout shifts as the result of inconsistencies among internet browsers’ default property values.

The World Wide Web Consortium (W3C), an “international consortium where Member organizations, a full-time staff, and the public work together to develop Web standards,” has been encouraging software companies to produce standards-compliant web browsers since 1994. The idea behind the W3C mission is solid; if they can convince browser vendors to adhere to a specific set of default value standards, the layout issues associated with inconsistent default styling values are resolved. However, with 100+ web browsers available to the public, the major players being IE, Firefox, Safari and Opera, the W3C has a lot of people to convince!

With no immediate relief in sight, web developers and programmers are forced to find alternative solutions to combat these never ending cross-browser compatibility issues to ensure that the websites they publish remain consistent in appearance across all browsers.

One effective and time-saving solution is to implement a set of CSS styles that imitate full cross-browser compatibility by setting the default property values of all browsers to a matching state. This allows the developer to begin their markup without having to battle initial styling discrepancies. It should be noted that in using this solution, developers will not be able to rely on any default values—even your <li> margin values will need to be specifically declared in proceeding styles.

Eric Meyer, author of “Eric Meyer on CSS”, has developed a set of reset styles that are free for public download or copy at Reset Reloaded. The list is quite extensive and absolutely thorough; however, feel free to add or remove reset styles to suit your personal development needs.

DON’T Use Inline CSS Styling in Your Markup

Imagine a situation in which your boss or client requests a universal color change on their 100+ page website—with a two-day turnaround. Back in the day when <font> tags were a developer’s only styling option, this would have been an impossible request to fulfill—unless, of course, you fully trust the Find and Replace tool. Today, however, this seemingly impossible task can be completed in five minutes or less, as long as the website is utilizing CSS to its full potential.

There are three ways to apply CSS styles to your markup: inline, embedded, and external. Inline styles are wrapped around your markup, no differently than the way <font> tags were applied in the early 90’s. In order to style all of your paragraphs consistently using inline CSS styling, you will need to apply the same code around or within every <p> tag in your markup. This is simply an impractical and cumbersome method for styling your markup.

Embedded CSS styles are placed between the <head> tags of your document and, although this method is a slight step above inline styling as it keeps the CSS code out of your markup, these styles need to be included between the <head> tags of every page within your website file structure. If you are dealing with a 100 page website, you will need to open, edit, save AND upload each and every file in order to implement a universal styling change. Again, impractical and cumbersome.

External style sheets are files that are completely independent of your (x)HTML files, and can reside anywhere within your website structure as long as the file path is properly referenced from your (x)HTML files. The use of external style sheets allows a developer universal control over their website—and this control goes beyond basic color and font changes. If the CSS is properly structured and the markup is clean, a complete redesign within a day or two isn’t completely out of the question! Additionally, calling your CSS externally means less code for a search engine’s web crawler to process.

So before you apply that inline style, consider this: Even though you’re under deadline and need a quick fix, the number of applied quick fixes will add up in a hurry and greatly hinder your ability to implement universal styling changes in the future.

The Bottom Line: Inline styling will inevitably create unnecessary work for the developer at some point down the road—and who has time for that?

Up Next Month: DO Comment a Style Reference Guide into Your CSS File and DON’T Forget to Validate Your Code.