CSS Best Practices for Modern Designs

cssbestpractice2-copy
In 2001, I discovered CSS and it changed my life.

Previously, I had used FrontPage before switching to Dreamweaver2 and both software packages required me to update the entire website every time a graphical element wasn’t working for me. For a 2-page site, this process was relatively quick and simple; but when I had more than 100, it started to become a hassle. CSS solved this problem by separating design from content.

Like many developers, when I started programming, I coded in a linear way: the header, the content and the footer. Looking back at some of my older projects, that was almost certainly the worst practice possible: each section of the site was treated as if it were standalone, creating huge inefficiencies. It also tended to make your code look like it was dumped from a WYSIWYG editor.

This article presents advice to help shift your thinking from linear code to CSS. Keep in mind that there are a lot of ways to develop in CSS— feel free to try this one and feel welcome to adopt it!

Survey the Challenge

The first step is to take a look at the design. You’ll have to standardize and:

  • Estimate the recurrent elements.
  • Examine the different sections of the design and determine how they are organized (principally header, content, sidebar, footer).
  • Bucket elements: Which fonts are used and where? Which sizes are used?

Enhance your Browser with an Inspector

Depending on which browser you’re using, enable the web inspector for Safari or download a plug-in such as Firebug for Firefox. The benefit of these tools is being able to directly add, edit and remove properties of your style sheet.

Using these tools is the foundation of following best practices.  I recommend playing around with the tools to familiarize yourself and see what they can do.

Avoid Repetitions & Condense Your Code

The best practice in CSS is to keep your code free of repetition. Avoiding them makes your code clean, neat, and easy to read.

For example, if you are designing a page with text in different positions, you may use position:absolute.  Then, write the property only once and set it for several selectors.

div#header {
       position:absolute;
       top:100px;
       left:25px;
}
div#content {
       position:absolute;
       top:150px;
       right:10px;
}
div#footer {
       position:absolute;
       bottom:1px;
       left:250px;
}

Should be:

div#header, div#content, div#footer {
       position:absolute;
}
div#header {
       top:100px;
       left:25px;
}
div#content {
       top:150px;
       right:10px;
}
div#footer {
       bottom:1px;
       left:250px;
}

You should also use shorthand as much as possible.

For example:

       margin-top:10px;
       margin-left:auto;
       margin-bottom:10px;
       margin-right:auto;

Should be:

       margin:10px auto;

Organize Your Code

When starting with a design, instead of programming each design element one by one, act like you’re building a house: first create the structure to avoid all IE6 issues, then define the fonts, and finally, add the colors and backgrounds.  These sections will naturally divide your stylesheet and, at the same time, will remove code repetitions.

My personal preference is to write all the CSS in one page so I can quickly access elements I’m looking for.  It is mostly a question of preference, though. Here is my skeleton:

/**
  * CSS Stylesheet
  * Date:
  */
/**
  * @struct
  */
/**
  * @fonts
  */
/**
  * @colors
  */
/**
  * @CSS3
  */
/**
  * @IE6
  */

Structure (@struct)

This section defines the global structure of your document. For the most part, it contains the following properties: position, overflow, float, padding, margin, top, bottom, left, right, width, height, display. A good practice: take an image of the design; apply it in the background and use it to set positions with the inspector.

This section is really useful for two key reasons:

  • You can see immediately if you have layout issues, particularly under IE6. This way, you can fix them before working on the fonts and the colors.
  • You can define the usual resets up front (more on resets below).

Fonts (@fonts)

Here you’ll put all font and text properties, such as font-weight, line-height, text-indent, text-transform, word-spacing, and letter-spacing.

Colors and Backgrounds (@colors)

Similarly to fonts, here you’ll put all the properties related to colors and background. If you are using a transparent PNG as a background, you can add it directly the using the IE filter.

Example:

div {
    background:transparent url(img.png) no-repeat !important;
   /** IE 6 **/
    background:none;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img.png', sizingMethod='scale');
}

CSS3 and IE6 (@CSS3 and @IE6)

All CSS3 properties such as border-radius and IE6 fixes should be here. It allows fast access to all legacy fixes, so when something changes (i.e. when –moz-opacity became opacity), you have to look only in this section and make the updates.

Others Sections?

Depending on what kind of project you are working on, you may have some other sections such as @Transitions if you are making a webkit website.

Pages: 1 2