Improving Your Process: CSS Techniques Part 2

Nearly a year ago, I jotted down a few CSS techniques that I use day to day. Some tips included controlling browser defaults, avoiding box model headaches, stylesheet organization, and using a color glossary. I find myself using many of these techniques a year later, but had some updates that might make the lives of some a bit easier.

Better control browser defaults

In part 1, I mentioned that controlling browser default styles can really help cut down your styling time. Using the universal selector, you can clear any default margin, padding, or border with a single line of CSS. While this tends to help out quite a bit with browser defaults, there is quite a bit more you can do.

As I’ve written before, I keep a copy of Eric Meyer’s reset CSS lying around to take care of browser defaults as opposed to using the universal selector. His optimized stylesheet comprehensively controls much more than something like:

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

I’ve found Eric Meyer’s solution to be much more helpful and stable in practice, and I’d suggest that you give it a try to see if it helps you out during your styling process.

Give yourself an applicable head start

A reset stylesheet can be an absolute time-saver. When doing client work, saving yourself some time here and there is becoming more of a necessity. In my personal opinion, when comparing design and development time on a project, development time should be kept to an absolute minimum while design time is maximized.

That doesn’t go to say that I feel development comes secondary to design; on the contrary. The difference between the two resides in the nature of each. Development is something that can be sped with each project. As nuances and speed bumps are overcome, a developer can significantly decrease the time it takes to produce high quality markup and style for each document they’re working on. Efficiency can be increased quite a bit simply by building more websites.

Design is a bit different in the sense that each project brings in a new set of rules. Each project is solving a different problem, circumventing new limitations, and providing quality solutions. Development usually presents itself with a constant set of conditions, which can be learned, expected, and avoided from the start if necessary.

As a result of this difference between design and development, there are ways to decrease development time, allowing for an increase in design time to remain in a limited budget. One way to help yourself to decrease development time is to use a CSS framework.

CSS frameworks were an extremely hot topic late last year, and I think all that needed to be said in their regard has been discussed (at least twice). I think the major difference in opinion rooted from the misunderstanding & assumption (mine included) that CSS framework proponents were pushing a single CSS framework upon others; that wasn’t the case.

I use Eric Meyer’s reset stylesheet on my projects. I use a CSS framework. Although it’s very limited in size, it fits the qualifications of a framework. As I mentioned earlier, reset styles help me to be more efficient at work, and finding a solid starting point for yourself with CSS can help you as well.

Control your clearing

In my experience, the most troubling aspect of CSS to grasp for newcomers is floating elements. When trying to help those new to CSS, trying to explain when to expect certain behavior can be a very frustrating experience for those new to CSS. Keeping that in mind, controlling your floating elements can really help alleviate a headache or two down the line.

Some time ago, Robert Nyman wrote a post explaining a few ways to clear CSS floats without extra markup. The post is great as an overview of some different techniques for clearing your floats. There are some great comments to read as a follow-up as well, and the piece as a whole can really help keep your floating elements under control.

Adding to the recurring theme, building more websites will help the most to learn when to expect a need to clear a float.

Separate page-specific styles

This tip may be less applicable, as it really only comes into play with larger websites with a bigger design budget. Something I’ve found myself doing quite often is physically separating page-specific CSS from the bulk. This involves incorporating both a pagevar as well as a pagegroup for each page of a website, which applies an id and class to the body of every document.

This gives me plenty of control should I want to target a group of pages (or specific page) with CSS. What’s important is to keep things organized; separating page-specific CSS can help significantly with maintenance, especially if your CSS is well commented.

Limit your refresh frequency

When I was first learning CSS, I quickly fell into the habit of refreshing the browser after nearly every selector was given a property and value. Soon enough, I would write a line of CSS, knowing exactly what it was going to look like, yet I’d refresh the browser anyway. Just to make sure I suppose.

Taking a step back to look at things, consistently switching apps and refreshing the browser to see how things are going can slow you down significantly. It’s important to learn to trust yourself as you become more proficient with CSS. Trust that what you’re styling is going to behave as you expect, and limit your refresh frequency as much as you can.

The trouble comes with writing too much and not knowing where to start compensating. This comes with the territory, and will remedy itself as you build more websites.

Refine your selectors

Finding the happy medium with specificity can be of great benefit. While you want to know which elements you’re targeting with CSS, it can really help to take advantage of specificity by keeping your styles to a minimum.

Difficulty may be found earlier in your development career in that you’re not sure why a certain element is improperly rendering. You’re sure of your CSS, sure things are as they should be, yet the browser renders something glaringly different. Chances are you haven’t found a quirky rendering bug (although I’m sure we can all agree we wish we had), but something is going on with your specificity. Styles are inherited when applicable, and this can be taken advantage of to a very high degree. The key is to specify to the proper degree, ensuring your control over the document presentation.

Closing up Part 2

I hope these tips, while a bit simple, helped out. CSS is a fantastic skill to have, but it is a skill which can be constantly refined over time. Keep in mind that the faster you are with development, the more time can be spent on problem solving by way of design. This allows for a wider variety of circumstances under which to fall when developing, as opposed to finding repetition in your work.