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: