DevGrow - Design, Develop, Grow.

Best Bet CSS Practices

CSS is powerful in styling HTML documents and making things look the way you want. When writing CSS, there are a few factors to consider that can impact the way you write your code and structure your files. The following are some best bet practices to clean, effective styling with CSS.

Organizing Your Files

Your file structure can largely depend on the number of documents you will be dealing with and how well you want to organize them.  For a small site, having a single style.css file in the root directory can suffice.  For a larger site that requires complex styling, especially blogs such as Jason Santa Maria and Dustin Curtis, it can be very helpful to split up your CSS into multiple files.  This can help increase load times by allowing you to load only the CSS that you will use on a single page but make life easier for you, giving you the ability to quickly find relevant styles and easily make changes.

Pick a directory and file structure you’re comfortable with, and one that gives you options.  My preferred structure is:

• css
  • reset.css
  • grid.css
  • layout.css
  • section-name.css
• images
• js
• index.php
• header.php
• etc..

There are obviously many ways to go about structuring your files, just try to maintain consistency with whichever format do end up using.

The Reset

Resetting your CSS should be the first thing you do when styling your website.  Doing this puts you on a level playing field with all browsers, removing all unnecessary margins, padding and default styling.  You can reset the common styles yourself or save time by using an existing reset file, such as:

• Yahoo! UI CSS Reset
• Meyer’s CSS Reset Reloaded
• Tripoli
• Kyle Neath’s CSS Global Reset

A best bet is to start with one of the existing CSS resets and add your own base styles to it over time, creating a simple framework to build your styles on.

Formatting Your Code

Like with any other form of coding, semantics and proper formatting can go a long way in providing organization and increased readability.  This is especially important with CSS, where you will often find yourself returning to your code to make small adjustments and corrections as you tweak your design.  A great resource that lists most of the many ways to format CSS can be found at CSSTricks.com.  I found myself agreeing with the author, Chris Coyer, in using single-line format with indenting for longer CSS stylesheets and more descriptive, multi-line format with indenting for shorter stylesheets.

An example of the single-line format with indenting:

An example of the same styles in multi-line format with indenting:

As you can see, while the multi-line format is easier to read, it does take up a lot more space than the alternative.

Commenting

This one is a no-brainer for most developers, however many designers seem to overlook this simple but useful advice. Commenting frequently helps keep your code organized and will save you time when you inevitably revisit it, allowing you to easily find your way around. A best bet practice is to take this advice to the next level, using a numerical hierarchy and a simple table of contents for your styles:

Loading Your Styles

The CSS styles you write can be stored in an individual file or embedded in the HTML itself.  The best bet practice is certainly to load an external stylesheet that has all of your styles within it, allowing you to reuse the same stylesheet in multiple documents.  This reduces code redundancy and allows you to change a style and see it reflected in all documents that load that particular stylesheet.

You can load a single stylesheet by linking to the file in your HTML header:

You can also import multiple stylesheets at once too:

A best bet in loading multiple CSS files is to use a PHP or JavaScript compressor to pack them into one file. This allows you to maintain your internal organization by having multiple files while reducing HTTP requests for the visitor, who probably doesn’t care too much about how well organized your code is and would rather have a faster website. Some resources on how to compress your CSS code:

• 3 ways to compress CSS files using PHP
• On-the-fly CSS Compression Script in PHP
• jscsscomp: JavaScript and CSS files compressor
• Huge list of compressors by Robert Nyman

Conclusion

CSS is a major part of making your website look the way you want, taking the time to make sure your code is well organized and follows the best bet practices can make life easier for you in the long run. Keep your code clean and organized, comment frequently and compress your files to keep not only your visitors happy but your whole design process painless and dare I say… fun!