It works. All is well, right?
See where I’m going with this?
Separation of Concerns
Honestly, I never even really thought about it until I came across this article on CSS-Tricks.
For example, I recently started a new job. When working through a page template, I found a class that I deemed unnecessary because it was just there. Maybe it was part of an old iteration, right?
The concerns were separated, yes, as the class had no styling value. However, it was named just like a styling class. Same naming convention. There was nothing there to differentiate it.
That is just one example in the endless amount of possible problems that could arise.
There are many different examples out there about how to deal with this problem. One example that’s interesting, as given in the CSS-Tricks article, is to use data attributes.
I quite like this approach as I find myself using data attributes mostly for dynamic data anyway. It seems like an appropriate fit to me.
Of course, there is another popular way that seems to be emerging. If you scroll down to the comments of the CSS-Tricks article, you will notice it. The idea is that it’s okay to use class names, but prefix them with something like “js-” in order to signify what they are going to be used for.
A little thing like that certainly goes a long way.
Why Do This?
Right about now you may be thinking to yourself, “Well I know this part of the site isn’t going to change, so it’ll be fine” or “I’m the only one working on this project, so it doesn’t matter”.
Well, you don’t know the definite answer to either of those.
Whenever I code a website I always think to myself, “oh, this will never change,” and then the next week, there I am, changing it. A website is a never ending project. Code rots. It needs updating.
So your easy decision to use the same selector when initially coding the website just made the maintenance that much more difficult.
Make it easier on yourself, and others.
Of course, this is all up for debate and people are going to code the way they feel comfortable coding. But, it’s something to think about!