Can Css Classes Have Underscores

CSS Programming

Yes, CSS classes can indeed have underscores! As a web developer, I often come across this question, and I’m here to shed some light on the topic for you.

Underscores in CSS class names are perfectly valid and widely used in the industry. In fact, they have been an accepted convention for naming classes for many years. However, it’s important to note that class names in CSS are case-sensitive, so make sure to use consistent casing when working with underscores.

Underscores can be quite handy when creating long class names or when you want to improve the readability of your code. They act as visual separators, making it easier to understand the purpose of a class at a glance. For example, let’s say you have a class name like “header_section” – using an underscore helps differentiate the words and improves clarity.

Another benefit of using underscores in class names is that it makes your code more compatible with other programming languages and frameworks. Many programming languages, like Python, use underscores in variable and function names. By following similar naming conventions, you can maintain consistency across your codebase and make it easier for other developers to understand and work with your CSS.

However, it’s important to follow a few guidelines when using underscores in CSS class names:

  1. Avoid starting or ending a class name with an underscore, as it can cause confusion and lead to errors.
  2. Don’t overuse underscores. It’s best to use them sparingly and only when necessary for clarity.
  3. When using multiple words in a class name, consider using camel case or kebab case as alternatives to underscores. This helps improve readability and maintain consistency across your codebase.

It’s worth noting that while underscores are widely accepted in CSS class names, there are alternative naming conventions you can choose from. One popular alternative is using hyphens (-) instead of underscores. This convention, known as kebab case, is often favored by developers working with JavaScript and HTML. Both conventions have their merits, so choose the one that best suits your coding style and the requirements of your project.

Overall, the use of underscores in CSS class names is not only valid but also provides a clean and readable way to separate words and improve code organization. Remember to use them sensibly and consistently throughout your codebase to make your CSS more maintainable and understandable to both yourself and other developers.


In conclusion, CSS classes can indeed include underscores. They serve as visual separators and improve the clarity and readability of your code. However, it’s important to use them sensibly, follow consistent casing, and consider alternative naming conventions like camel case or kebab case. So go ahead and embrace the use of underscores in your CSS class names, and enjoy the benefits they bring to your web development projects!