4

I've noticed that some popular naming conventions have been given names to make it easier to communicate about them. Two examples are Pascal Case and Camel Case.

I would like to know if there is a common name for a convention I have seen used in CSS. In this naming convention, all letters are lower-case and words are separated by hyphens. I don't know if this convention is CSS-specific.

Examples of names with this convention:

  • red-car
  • ticket
  • xml-code
Jens Piegsa
  • 7,399
  • 5
  • 58
  • 106
Sam
  • 40,644
  • 36
  • 176
  • 219

3 Answers3

3

I've seen the term 'spinal-case' used in the AngularJS documentation to describe this naming convention.

Having done no further investigation I can't confirm if this name has been widely adopted though...

Neil Hibbert
  • 852
  • 5
  • 10
  • I can get behind that. What's even crazier is: its 10:40 PM on a Friday night, I'm half-drunk, had this very same question, and it turns out another person somewhere out there in the world also had the same exact question as me, and other people answered it. What world, what a world... – smeeb Jul 30 '16 at 02:40
1

I think there is no (commonly used) special term for this naming convention. So, just use a self-describing name for it, like:

  • lower-case with dashes / hyphens
  • hyphenated lower-case
  • hyphen-separated-lowercase-words
Jens Piegsa
  • 7,399
  • 5
  • 58
  • 106
0

Taken from this great article 'namespacing' CSS classes is a good way to keep them self-contained and modular. It also helps minimising the likelihood that existing classes will conflict and lowers specificity. Example below:

/* High risk of style cross-contamination */
.widget { }
.widget .title { }

/* Low risk of style cross-contamination */
.widget { }
.widget-title { }

While I think it's a great article about CSS architecture, the things mentioned are definitely not naming conventions, but best practices of using them in your CSS.

philip
  • 216
  • 1
  • 10