Code Smells in CSS Revisited

Harry Roberts:

Way back in 2012, I wrote a post about potential CSS anti-patterns called Code Smells in CSS. Looking back on that piece, I still agree with all of it even four years later, but I do have some new things to add to the list. Again, these aren’t necessarily always bad things, hence referring to them as code smells: they might be perfectly acceptable in your use case, but they still smell kinda funny.

Lots to learn here. I feel horrible saying this, but I’m guilty. I’m guilty of at least two of these. I know, embarrassing. But hey! Can’t let it get me down, we’re all trying to improve.

A real easy one to get better with is minimizing the amount of shorthand syntax you use. Harry focuses on background, but margin and padding should be avoided too unless you’re doing it intentionally.

// Don't do this!
.class-name {
  background: #fff;
  margin: 0 0 10px;
  padding: 0 0 0 5px;

// Do this!
.class-name {
  background-color: #fff;
  margin-bottom: 10px;
  padding: 5px 10px; // You're doing something specific with this one.

Something small like this can save so much time. Really though, all of Harry’s tips will save you, your co-workers, or whoever else maintains the code you write, a lot of time.

By Timmmmy

A human hoping to be empathetic and kind with all. I'm a geek, coffee drinker, stoner, maker of things, and forever an optimist. Brightly-colored clothes weren't enough, so I dye my hair too (he/him)

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s