Common Mistakes and Expert Ideas For Better CSS Coding


Use a Reset File or CSS Tool-kits

The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. Here are CSS Resets and Toolkit lists.

CSS Resets
CSS Tool-kits

Over Qualifying Selectors

Being overly specific when selecting elements to style is not good practice. The following selector is a perfect example of what I’m talking about:

ul#navigation li a { ... }

Be simple like this!

#navigation a { ... }

Not Using Short-hand Properties

Take a look at the following property list This is common mistake when we are defining values.

  margin-top: 50px;
  margin-right: 0;
  margin-bottom: 50px;
  margin-left 0;

Fortunately, there is a solution, and it’s using CSS shorthand properties. The following has the same effect as the above style declaration, but we’ve reduced our code by three lines.

  margin: 50px 0;

When you use value 0px instead of 0

Say you want to add a 20px margin to the bottom of an element. You might use something like this:

#selector { margin: 50px 0px 50px 0px; }

Don’t. This is excessive. There’s no need to include the px after 0. While this may seem like I’m nitpicking and that it may not seem like much, when you’re working with a huge file, removing all those superfluous px can reduce the size of your file (which is never a bad thing).

Pretty simple code!

#selector { margin: 50px 0 50px 0; }

Adding Properties Redundantly

Here is another mistake that most of us do, we tend to commit this over and over again when we are rushing that we often leave the multiple selectors with the same properties. Here is a familiar example.

.contentLink {
    font-style: italic;
    color: #e7e7e7;
    margin: 5px;
    padding: 20px
.sidebarLink {
    font-style: italic;
    color: #e7e7e7;
    margin: 5px;
    padding: 20px;

Why not combine, it is not that time consuming. Now we have eliminated extra lines.

.contentLink , .sidebarLink {
    font-style: italic;
    color: #eee;
    margin: 5px;
    padding: 10px;

No Fallback Fonts, Why?

In a perfect world, every computer would always have every font you would ever want to use installed. Unfortunately, we don’t live in a perfect world. @font-face aside, web designers are pretty much limited to the few so called web-safe fonts (e.g. Arial, Georgia, serif, etc.).

There is a plus side, though. You can still use fonts like Helvetica that aren’t necessarily installed on every computer. The secret lies in font stacks.

Font stacks are a way for developers to provide fallback fonts for the browser to display if the user doesn’t have the preferred font installed.

For example:

#selector {
  font-family: Helvetica;

Can be expanded with fallback fonts as such:

#selector {
  font-family: Helvetica, Arial, sans-serif;

Use Multiple Classes

Sometimes it’s beneficial to add multiple classes to an element. Let’s say that you have a div “box” that you want to float right, and you’ve already got a class .right in your CSS that floats everything to the right. You can simply add an extra class in the declaration, like so:

<div class="box right"></div>

Comment your CSS

Just like any other language, it’s a great idea to comment your code in sections. To add a comment, simply add /* behind the comment, and */ to close it.

Hack Less

Avoid using as little browser-specific hacks if at all possible. There is a tremendous pressure to make sure that designs look consistent across all browsers, but using hacks only makes your designs harder to maintain in the future.

Use CSS Compressors

CSS compressors help shrink CSS file size by removing line breaks, white spaces, and combining elements. This combination can greatly reduce the the file size, which speeds up browser loading. CSS Optimizer and CSS Compressor are two excellent online tools that can shrink CSS.

It should be noted that shrinking your CSS can provide gains in performance, but you lose some of the readability of your CSS.

Use Firebug

If you haven’t downloaded Firebug yet, stop and go do it. Seriously. This little tool is a must have for any web developer. Among the many features that come bundled with the Firefox extension (debug JavaScript, inspect HTML, find errors), you can also visually inspect, modify, and edit CSS in real-time. You can learn more about what Firebug does on the official Firebug website.

Leave a Reply

Your email address will not be published. Required fields are marked *