Account services

Bad habits 2: Improper reuse of CSS classes

As time progresses, the original purpose of a class in a CSS stylesheet can become lost to the webmasters. For instance a very commonly abused class is the .barfont in the EIONET portal stylesheet that has been around since the beginning. It was originally meant to be for only the breadcrumb texts in the orange bar. But as we see, whenever an author needs a small text, he chooses the .barfont class, as it already has the wanted properties. Those being the right font, colour etc. And it is already in the stylesheet, so it must be a condoned class, right?

Wrong. The barfont class is only for the breadcrumbs. If we decide to redesign the breadcrumbs - to make them more legible with a different colour - then we can't touch the .barfont class because it might have undesirable sideeffects elsewhere on the website.

How did we get into this pickle? Most importantly, the wrong name was chosen for the class; "barfont". It should have been called "breadcrumb". Secondly, There wasn't any comment in the stylesheet describing what the class was to be used for. Remember you can include comments in CSS with the /* ... */ construct.

Don't let it happen to you.