Vent: Stop naming your CSS classes after what they look like

I was helping a friend debug his portfolio site and every div was called "red-box" or "big-font" or "left-side". Then he changed the color to blue and the font size to medium and moved it to the right, but the class names still said the old stuff. It took us 30 minutes to figure out which class actually controlled what because the names were lying to us. Has anyone else run into this mess where you name something based on appearance instead of purpose?

2 comments

2 Comments

danieljenkins2d ago

oh man I did this exact thing on my first real project. named a div "big-red-button" and then the designer changed it to a small blue link and I just left the class name because renaming it broke everything else in the stylesheet. now there's a class called "big-red-button" that controls a tiny blue text link and every time I look at it I feel like a fraud. at least your friend has an excuse, I did this to myself and I'm still too scared to clean it up.

-1

veraramirez2d ago

and now it's fossilized code. that class name is basically a historical artifact at this point. I've got one called "sidebar-nav" that hasn't been a sidebar in three years, it's just a sticky footer now. renaming it would take two hours and break twelve other things so I just leave it. every time someone new looks at the code they ask about it and I have to explain the whole stupid story. your "big-red-button" is fine, it's basically a rite of passage at this point.