Real CSS Mistakes Beginners Make – A Rebuttal Of Sorts

Real CSS Mistakes Beginners Make – A Rebuttal Of Sorts

I will not concur

NOTE: I am not bashing the article, because I think it is well written. This is my opinion on the mistakes listed. Even though I don’t agree with some, I applaud the author for the piece.

A week or so ago, I read an article called “12 Common CSS Mistakes Web Developers Make“, and after reading it for a second time, I find that I don’t agree with a lot of the article. Frankly, some just are not mistakes, but a person’s preference. As I move along in my web development career, it becomes more apparent that there is less right vs wrong than people would have you believe.

The Zeppelin of Resets

The author’s first listed mistake is not using a proper reset. I agree. See? I’m totally not just bashing. While I find Eric Meyer’s reset CSS incredibly bloated and insane…I use it. Why? Because it is better than the one I had made, and it just plain makes sense. If you don’t know why you would need a reset, or what one is, you will find out in a hurry when you open your site in IE. Man, ul’s and p tags used to drive me insane. Thank you Eric Meyer for your brilliance because it has saved me countless headaches.

Now onto what I disagree with

Ok, here are the ones that I disagree with calling them mistakes. Shorthand CSS. It takes a while to get them down, but once you do, life becomes a little faster. A quick example:

/* Non shorthand */
.myClass {
background-image: url(../images/photo1.jpg);
background-repeat: no-repeat;
background-position: left top;
}
 
/* Shorthand version */
.myClass {
background: url(../images/photo1.jpg) no-repeat left top;
}

See? Much easier…but not the point. I don’t think using long hand is a mistake. To me, the only thing that matters is that you are using the properties correctly. Yes you save file/page weight, but I’m a fan of minifing css which could help that out a lot. Plus, for a majority of people, you are not going to be using the thousand lines or more CSS files that I see every day. I’m just not calling this one bad. I would much rather have a person on my team using longhand rather than just bad css.

Adding ‘px’ after the ’0′ in a property’s value is another of the mistakes listed. Nope. Again, not a mistake. Are you adding small amounts of weight to the page when it is all taken in together? Yes, but I dare you to make a test where you can actually notice the difference. Again, minifing the CSS is going to take care of the major weight killer. I will call this one preference too.

Who the #$%@ types red?

Number 6 in the article baffles me. People using the word ‘red’ instead of a hex number like ‘#ff0000′. Not because it isn’t a mistake…it is, and his reason is correct with how browsers interprets what ‘red’ is, but that he thinks people are actually doing this. I’ve worked with a decent amount of designers and developers not, and the ONLY people I have seen use the color names are programmers. They don’t care. They throw lime, red, yellow, navy and all sorts of god awful colors on the page just so they know what sections are different, not because they think they are pretty. I just can’t believe there are people doing this that are being serious in their design. If you are doing a super rough demo….maaaaaaybe….nope, never mind…still wouldn’t happen. I agree its a mistake…I disagree that people are doing it, and YOU cannot convince me of that. I call bullshit.

Redundancy

I feel redundant just by typing that heading. Anyway, he is saying that creating styles that share the same properties is a mistake. Can’t agree on that either, but this probably has to do with my having to work with content editors that have varying levels of CSS skill. Example of what the author is talking about:

.myClass1 {
color: #fff;
font-size: 14px;
text-align: right;
}
 
.myClass2 {
color: #fff;
font-size: 14px;
text-align: right;
border-bottom: 1px #ff0000 solid;
}

It could be condensed to this:

.myClass1, .myClass2 {
color: #fff;
font-size: 14px;
text-align: right;
}
 
.myClass2 {
border-bottom: 1px #ff0000 solid;
}

This falls more into the “I love writing CSS so much that I repeat things unnecessarily” than an actual mistake.

Others he lists like “too much white space” and “organizing your CSS in a logical way”, and using one stylesheet, not mistakes. Here is some redundancy…minify it (linked to my article about it above)…gets rid of all the white space. And logical way? I know I am sounding testy here, but I am not bashing his points…just don’t agree. Logical to who exactly? Order it any damn way you want, because realistically, we are all addicted to Firebug anyway. I never search through a CSS file, I Firebug what I’m looking for, find the line and use the shortcut in whatever IDE I am using to Go To Line: whatever. I structure my CSS the same way every time, so I usually have a general idea of where something will be. But one developer’s logical is another’s madhouse.

What I consider actual mistakes – Negative Margins

Using negative top margins in an attempt to position something the way you want it. Ever see that? I used to do it when I first got into CSS years ago. Can’t seem to get a div where it needs to go, so you end up with a top margin of like -240px or something. Bad. Get a handle on positioning divs and this will never happen again. IE doesn’t play nice with the whole negative margin thing. Completely horrible idea, and I see it used all the time.

Let’s make everything important so we don’t know what IS important

Not everything is as important as people think. No, I mean that literally. I have seen too many uses of !important on a property, simply because the CSS writer doesn’t know how to overwrite that particular style. With that stupid !important on there, it becomes a real pain in the ass to change later.

Margin and Padding usage

My favorite. Disregard on proper usage of margin or padding. I have seen people use one instead of the other to the point where changing a layout or div position becomes a giant cluster of crap. Don’t mix and match them to suite your needs, use them properly please! Another actual mistake.

Root Beer Floats

I think a lot of newbie web developers/designers do this when they are starting out. They figure out what float does, and then float the hell out of everything. Totally unnecessary and can be hard to change things in a complicated design when everything and its mother is floated. Use it when you need it(and don’t forget to feed it, can you picture that!), not to make root beer floats out of your page.

Conclusion of all this

The author of the original article did a good job at pointing some things out, but I have to disagree on some of the things he calls mistakes. I believe most could be called a preference thing. To me, a mistake is when you are doing something wrong that has the potential to wreck a page, or makes it difficult to change once done.

Anyone out there now any other ‘actual’ mistakes? Let me know!

Coupon Code: webmachine

Tags:

2 Responses to “Real CSS Mistakes Beginners Make – A Rebuttal Of Sorts”

  1. Awesome article Jeremy, and I agree with everything here 100%…though I do admit to occasionally using negative margins!

    • jcDesigns says:

      Everyone has done it, kind of like a right of passage kind of thing. The mistakes the other author was pointing out just didn’t seem like real mistakes. I have done all of the ones I’ve listed when I started out.

Leave a Reply