CSS Naming Conventions that Will Save You Hours of Debugging

Use Hyphen Delimited Strings

If you write a lot of JavaScript, then writing variables in the camel case is common practice.

var redBox = document.getElementById('...')

Great, right?

The problem is that this form of naming isn’t well-suited to CSS.

Do not do this:

.redBox {  border: 1px solid red;}

Instead, do this:

.red-box {   border: 1px solid red;}

This is a pretty standard CSS naming convention. It is arguably more readable.

Also, it is consistent with the CSS property names.

// Correct

.some-class {   font-weight: 10em}

// Wrong

.some-class {   fontWeight: 10em}