Improving Your Process: CSS Techniques Part 1

This article is the first of an upcoming series that will be scattered throughout the life of Monday By Noon. The posts will attempt to provide some tips and tricks as far as design and development is concerned. The contents are purely my opinion, and take into account what helps me do my job.

Improve your document styling process

This first group of tips revolves around some CSS techniques I find myself using constantly. I’m sure you’ve heard of some, if not all, but hopefully something comes across as new and possibly helpful. This list consists of just a few ideas I keep in mind while developing, and there are more to come in future articles.

Try to control browser defaults

Each and every one of my style sheets begins with:

* { margin:0; padding:0; border:0; }

It’s a simple technique that many designers/developers use to ensure that no strange browser defaults are added to the design. It allows you to work from a common starting point and I find it very helpful to use.

When possible, avoid Box model inconsistencies

The Box model seems to be the root of many frustrations for upcoming designers/developers. Various user agents misinterpret the standard Box model, causing large amounts of structural style headaches. The Box Model Hack became popular as a way to avoid rendering issues when dealing with Box model inconsistencies. I admired the hack for it’s ingenuity from the first time I came upon it, and used it for some time. It was early in my process of discovering CSS, and turned out to be one of the smaller curve balls various browsers threw at me. As time went on, it was one of the many hacks I had adopted to use. There had to be a better way.

From then on, I elected to stay away from using a hack, and instead write my CSS in a way which avoided any associated problems. Basically it consisted of never applying margins and/or padding when a width or height was defined. Naturally I would want to achieve the same effect of having a functional box model, which required piecing together various widths, heights, margins and padding using each element available. For example:

#sidebar { width:200px; float:right; padding:10px 15px; }

Could instead be written as:

#sidebar { width:200px; float:right; }
#sidebar ul { padding:10px 15px; }

Applying the padding to the unordered list as opposed to #sidebar avoids any related headaches you could run into when testing cross browser. The success of using this technique will vary from case to case, and it’s very important not to let things get out of hand. Trying to avoid Box model issues will make it very tempting to give something an extra wrapper div, or insert another element for the single sake of helping your CSS. It’s important that your markup remains semantic.

Comment your style sheets properly

As with any programming or markup, it’s important to keep your style sheet well documented (especially if the project is collaborative). I find that labeling sections of the style sheet works very well, but from time to time it helps to write down a quick note just as a reminder if not for anything else.

Organize your style sheets by section

I find it really helpful to organize my style sheets by section. It may seem like common sense to do so, but sometimes new designers/developers will append things towards the end of their style sheet and work in a slightly random fashion. Not only will that make maintenance very difficult, it’s very likely you’ll re-declare properties on selectors which can bloat your CSS significantly.

Use a color glossary

Just about every client project I work on involves a significant probability that a co-worker will need to review the CSS for the site either as a reference, or to make an adjustment. Along with keeping the styles properly organized and documented, I’ve found that it really helps to include a color glossary at the top of any style sheet in order to not only make it easier on other designers, but also ensure that colors remain constant throughout the site.

Name only that which needs naming

Your naming convention is very important in both the longevity of a document as well as its organization. It’s important that a happy medium is found in the frequency of class and id given to various elements throughout the design. Having too few will result in an ineffective style sheet, while having too many will result in degraded readability as well as bloated markup. Naming parent elements with an appropriate class and/or id can often remove the need for specifically identifying any children.

While monitoring the frequency of class and id, it’s also very important to use meaningful identifiers. A meaningful identifier will describe what is being named. Giving a div id="sidebar" is much more meaningful than giving a heading class="red". If the design were updated, and that heading is no longer red, the class you gave it is completely worthless, not to mention it wasn’t very helpful to begin with. Don’t name your elements based on their visual representation, give meaningful identifiers to your id and class.

Begin with a static file, and then port to your template

Turning your design into a template can speed development exponentially. On the other hand, I’ve found that working with a static file initially also helps to speed up my process. Part of my process involves writing all of the XHTML before starting the CSS. I’ll put together a static file containing all of the site markup, and from there, piece together the CSS. After that, the functional design is ported to the template and the project continues down our development checklist. Doing all of the initial work inside a single static file is much faster than working in headers, footers, and trying to put your template together at the same time.

Don’t stop reading

I’m constantly hearing designers and developers ask whether or not it even makes sense to read or write about what can be accomplished with CSS. It’s really disappointing because that thought process leads to a stagnant industry. It may seem like everything has come and gone and the full extent of CSS has reached saturation, but it’s important not to write anything off. Changes will continue to be made, and innovators will continue to document their findings for a long time to come. Thinking that everything has been discovered will do nothing but hinder your skill set.

How do you improve your styling process?

Again, this is just a small list of a few things that I feel could be really helpful to those designers/developers who may not have read about them before. I’m a firm believer in that the Web is constantly changing, that there could be an even better way of doing something. It would be great to get some feedback from everyone regarding their favorite tips, tricks, and techniques as far as styling is concerned.