Use Hyphens in Your CSS Naming Conventions

Why does this matter?

Consistency is one of the most important factors of writing maintainable, easy-to-use CSS. Not just for yourself but for the future saps who will have to dig into your code after you. Using hyphens is a great way to improve consistency, and to also take advantage of some the following benefits that you don’t receive through with camelCase or underscores.

  1. CSS is already a hyphen-happy syntax

    margin-left, padding-top, font-size, etc. We already write CSS with hyphens. It's natural and consistent to use hyphens for our CSS declarations and our HTML class names and IDs. It is inconsistent to make our class names and IDs camelCase while making our declarations with hyphens.

  2. It is easier to scan

    Single line CSS makes it much easier to scan our CSS. Class names and IDs with hyphens further improve this “readabilty” and “scannablity”. Of the following, the bottom with hyphens is easier to read. 1

    .navHome a { ... }
.navAbout a { ... }
.navPortfolio a { ... }
.navContact a { ... }

.nav-home a { ... }
.nav-about a { ... }
.nav-portfolio a { ... }
.nav-contact a { ... }

  3. Using hyphens allows you to easily take advantage of CSS attribute selectors

    Hyphens are such an industry standard now that the CSS spec has certain patterns to select hyphen-separated-attributes. See The CSS2 “pipe” pattern [class|="col"] and the CSS3 “star” pattern [class*="col-"]

    Currently you should normally avoid attribute selectors due to selector speed. At times though they may extremely come in handy, such as for form elements. input[type="text"] or input[disabled]

    Another place they could be used is in our grid.css. Each grid column currently has to have 2 classes. ancCol to make it be a column and a width declaration like w50. Rather than having to putting 2 classes onto the column element, we could simply put one class (such as col-50) and then use the attribute selector [class*="col-"] to apply the necessary styles. This is how Chris Coyier recommends on his grid.

  4. Everybody is doing it

    Mock if you will. Lots of the major companies and web gurus both use hypens themselves as well as recommend to others to do the same. True, you shouldn’t always “follow the crowd” in all aspects of life, but guess what - that is exactly how the web industry works. Enough people start doing something, it eventually becomes a standard.

  5. Lastly, transitioning is possible

    Currently the majority of Ancestry uses camelCase class names and IDs with some underscores and hyphens sporadically mixed in, and it would be a daunting task to try to transition all of our current pages from camelCase into future-happy-hyphenation in a single sprint. Luckily though, we are already setup with a versioning system so we don’t have to do this all at once.

    We would setup new versions of each of the global files (which we are already partially doing anyway with the latest changes to the standards). New pages would point to the new styles. Old pages will point to the old files until an update is needed on that page. At that time we would transition out the old styles just like we are currently doing with the deprecated files. Within 6-12 months, 90% of the old pages are transitioned, and more importantly, all new pages are using one standard syntax.

Conclusion

Use hyphens in your class names and IDs to improve readability, take advantage of CSS attribute selectors, and help out future Ancestry developers.

Underscores were not allowed in class names or IDs in very old, NS4-type browsers. That’s why hyphens have become more of an industry standard over underscores. Also undescores are harder to type and read.

Recommended by the “Big Guys”

Other “Big Guys” who use hyphens: