CSS Bad Practices

We’ve all been there – Not sure if we should or shouldn’t use id, used unnecessary classes to fix bugs that we have caused by using unnecessary classes, tempted to use !important as the due date arrive just to make it work without really knowing what the consequences are…
The list below represents the practices that I hate the most in CSS. Some of the categories are very bad and some of them are just me being petty. Let’s begin:

Misuse of !important

Using !important is basically breaking the rules of your stylesheet. if you use !important out of laziness, you’ll find out soon enough that it will be a lot harder to maintain your stylesheet. You should only use !important only when you know in advance that you want a certain style to take precedence. For example, if I know that I want all buttons to have round corners:

.button{
    border-radius: 40px !important;
}

Negative margins and paddings

I know this pick is a bit controversial and a lot of people don’t see a problem with negative margins and paddings. My problem with negative margins and paddings is that they’re don’t exist in real life. That’s it. I think that code should reflect real objects and although sometimes using negative margin can be practical, I’ll suggest to try to avoid it as it just doesn’t feel right.

Redundant properties

Repeating the same style for different properties is not recommended and you should now and then clean your code and remove redundant styles.
For example, you should turn this:

.description {
    margin-top: 20px;
    height: 200px;
    color: #333333;
    overflow: hidden;
  }
.categories {
    margin-top: 20px;
    height: 200px;
    color: #333333;
    overflow: hidden;
  }

into this:

.description, .categories {
    margin-top: 20px;
    height: 200px;
    color: #333333;
    overflow: hidden;
  }

Long CSS selectors

Have a look on this CSS selector:

div.content div.shop-container div.shops-field-name a.shop-name { 
    font-weight: bolder; 
    text-decoration: underline; 
}

This selector is way too overly specific. Making a style this specific makes your stylesheet to be not maintainable and not flexible, and it’s quite the opposite from the css purpose. If you’re having problems to figure out if your CSS selector is too long, remember that the rule of thumb says that you should not nest further than 3 levels deep. If you need to go further then 3 level deep, I’d suggest you to reorganize your rules.

Not using shorthand properties

This one is pretty clear. Use shorthand properties whenever you can. This can shrink your css considerably. For example, instead of using these styles:

.title {
    margin-top: 20px,
    margin-bottom: 15px,
    margin-left: 40px
}

You can combine those properties to one line:

.title { margin: 20px 0 15px 40px }

For further reading about shorthand properties you can read this guide

Undoing styles

Undoing styles is a bad. It means that rules have been set too early in the inheritance level. You should only inherit rules, not undoing them. For example:

h3 {
   color: #e2e2e2,
   margin: 10px 0 0 15px,
   padding-bottom: 5px
}
.no-margin-padding {
    margin: none,
    padding: none
}

Instead of unsetting our own rules and using a bad name for a class, we should do this:

h3 {
   color: #e2e2e2,   
}
.title {
   margin: 10px 0 0 15px,
   padding-bottom: 5px
}

That’s much better. Less code, no undoing styles and no bad class name.

Location based class name

This one can cause you a lot of trouble. When you name a class based on it location, you’re limiting the use of it to a specific location. For example:

    user-page-button {
        height: 60px;
    }

That works, but it isn’t extendable. What if tomorrow I’ll want to use this type of button in “About” page? I have 2 options and both of them are bad:
1. Use user-page-button as class in “About” page and it will cause a lot of confusion.
2. Add a new class like this:

    user-page-button about-page-button{
        height: 60px;
    }

Best practice is to avoid this situation by giving the class a more generic name in the first place, like “button-large”.

What do you think? Do you agree? Do you think I’m wrong? What bad practice CSS can drive you off the wall? Please leave a comment and let me know!

Happy Coding! 🙂

image_size_500x75including_panda_css

Leave a Reply

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