Improving Your Process: CSS Techniques Part 2

Published 6 years 3 months ago on January 14, 2008 — 6 min read

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.

There's a conversation brewing

  1. I would recommend Andy Clarke’s Specificity Wars [http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html] to learn all about CSS Specificity. It’s how I first learned and after taking a look at other explanations, I’m glad that’s the one I read first.

  2. I really enjoy working in CSS, even with all those browser quirks. I believe I have a good understanding of CSS and how to get a page to look the way I want, and I’m always looking for ways to improve.

    One thing I have a problem with and still do is refreshing my browser, as stated above. It is because I am curious as to how the page is turning out. That I will have to work on. You kinda have to “think” the way a browser would think and picture how your page will look. I think that would help.

    Ever since I started using Eric Meyer’s reset stylesheet, I think my development process has move much quicker. I used to never use a reset stylesheet, and when I first began CSS I didn’t really understand the box model problems. That has definitely changed for the better though. I use the reset stylesheet in every site I make, it has helped me a lot.

    Well, thats all for now. This has been very helpful.

  3. @Wes: Thank you for linking that wonderful resource — it truly is a great article to read.

    @JR Tashjian: Forcing myself to not refresh too often is no small task. The more experience you’ve got, the easier it gets, and that just comes with time. I agree, Eric Meyer’s Reset is a great starting point. Ironically enough, he’s just updated it again.

  4. Well, I stumbled upon your article through another site. I must say what you have said isn’t necessarily new if one has CSS experience. However, it’s good to be refreshed with all these techniques. However, I will agree with some hesistation that REFRESHING browswer after every CSS insertion isn’t an easy habit to expunge. I still do it because it limits for the possible of creating an browser specific style-sheet. I am sure testing for say Firefox, then IE and the rest is the move but if you think about it, in the long run it still boils down to the same development time. (I think).

  5. I was wondering if I should try Eric Meyer’s reset CSS… After you remembered me about it, maybe it’s time to test :)

By all means, contribute

Leave a comment

Powered by Fusion

This article is so meta

Published January 14th, 2008

Random article

css.php