How to be consistent when naming CSS classes

When you are just starting out with the web and software development, it can be really scary. You might not even know what you need to know. Trust me, I know, I have been there. That is why I don’t expect my students to learn BEM, ACSS and other buzz words of the css world. What I would like them to do in their code, though, is to be consistent when naming classes. For example, if there is blue-background class, then all of classes should be named in the same naming convention, using dash and lowercased words. I have seen lots of code like black-background and then, a few lines later, blue_background or orangeBackground or purple-bg. Some are named with dashes, some are camel cased.

1
2
3
4
5
6
7
8
9
10
11
.purple-background {
background-color: purple;
}

.orangeBackground {
background-color: orange;
}

.green_bg {
background-color: green;
}

But instead we can be consistent and just pick one:

1
2
3
4
5
6
7
8
9
10
11
.purple-background {
background-color: purple;
}

.orange-background {
background-color: orange;
}

.green-background {
background-color: green;
}

For those interested more in some CSS methodologies that also solve problem of how to name a class, take a look at these links:

My two cents are to just pick one way of naming your classes and be consistent.