By Andy Harris

The CSS language is flexible, powerful, and consistent. However, it’s not perfect. Two ideas are floating around in the CSS/web development community that you might find interesting.

The first concept is called the CSS reset styles. This is a special CSS document that explicitly sets layout specifications for each element, overriding browser defaults. The idea is to embed the reset style first, and then to add your own CSS style sheet. Doing so theoretically eliminates the browser defaults, making all browsers render the same way.

The most commonly used CSS reset was released into the public domain by Eric Meyer, and can be found at meyerweb.com.

A number of other CSS reset tools are available online, and are often included in web frameworks. CSS resets were very popular for a time, but they aren’t used universally. There are two main reasons for this. Modern browsers are generally doing a much better job of displaying content consistently than they used to.

Also, there’s now a greater consensus among developers that pixel-perfect duplication isn’t really an important goal, and that browsers should have some flexibility when it comes to displaying content.

CSS resets are a good idea when you really want to be certain that a CSS style looks the same across multiple browsers, again, that may not be an important goal to you.

The other trend you sometimes see in CSS is CSS preprocessors. These are special interpreters that allow you to add features not present in CSS. For example, you could define a variable called bgColor and use it throughout your CSS style. Then you could change every reference to the background color one time. For example:

$bgColor: blue;
body {
  background-color: $bgColor;
}
h1 {
  background-color: white;
  color: $bgColor;
}

This is very useful when you’re using the same color in many places, especially if you may need to change the color many times.

In addition to variables, most preprocessors offer other features common to full-blown programming languages, like mixins (named code blocks) and functions (a series of code instructions with a name and input and output features).

The preprocessor is a little programming language which converts the special code into CSS. The converter is often written in a language such as JavaScript or PHP. Typically the developer either compiles the instructions into plain CSS or invokes client-side code to automatically convert the code to plain CSS before the browser tries to render the page.

The most popular preprocessors are SASS (Syntactically Awesome StyleSheets) and LESS (which seems to stand for CSS preprocessor without an acronym).

CSS preprocessors are normally found in larger web frameworks and content management systems. They can be used without these tools, but they may be more trouble than they are worth except for larger projects.

CSS preprocessors are a good idea, and they are becoming very popular among professional developers, especially for large applications. However, they might not be worth the effort for a beginner.