get candy

My 5 most common CSS mistakes

I edit CSS, you edit CSS, we all edit CSS. Sometimes, every piece of the puzzle just falls into place, and some others, all hell breaks loose and your precious code does everything to strip you from your sanity.

Just to share, here are my 5 most common CSS mistakes:

International Rules

Sometimes I do everything at the same time. Responding to blog comments and CSS editing is only two of them. Most of the times I forget to switch language from greek to english, and tada! I end up with rules like:

#?????? { ????-????? 12??? }

Unless you use the ISO 8859-7 encoding in yout browser, that’s supposed to be:

#header { font-size: 12px; }

So thaaaaat’s why my rule won’t work, hm…

Typos

Typos must be the first and most common reason why some of my rules just don’t work. Some are easy to spot, some are really pesky: imagine my frustration when I was trying to locate the error in this rule:

.parthers { color: #F00; }

Of course, “parthers” was supposed to be “partners”. But just scanning the rule won’t work, you have to look really close to identify the error.

Multiple selectors woes

My code is girl code, so I like neat stuff. When I can sum up two or three rules in one, I will certainly do. For example, with these rules:

.section h1 { background-color: #FFF; }
.section h4 { background-color: #FFF; }

…I will make this one:

.section h1, h4 { background-color: #FFF; }

…right? Wrong, of course. My mind is quicker than my fingers, so I often make this mistake. Just for reference, the right rule is:

.section h1, .section h4 { background-color: #FFF; }

. and # and :, oh my!

I do that all the time, messing my classes with my ids. So, instead of applying

#header { width: 800px; }

to my

…I apply this:

.header { width: 800px; }

…which isn’t what I want. Another common error of mine.

Forgetting to link

No, really. I do that all the time. Craft the first lines of the CSS file, fire up the browser, refresh the page… No styles, why? Well, it’s an easy error to fix, but I still always fall for it.

Do you make similar mistakes when editing CSS? What are your most common mistakes when coding stuff?

, , , ,

leave your comment

sugarenia.com is wearing the Wordpress badge
valid HTML & invalid css

↑ Back to top  |  Grab the feed