Why do you prefer what you prefer? CSS class names: Hyphenated, camelCase or any other style?

View other answers to this thread
Start a personal dev blog on your domain for free and grow your readership.

3.4K+ developers have started their personal blogs on Hashnode in the last one month.

Write in Markdown ยท Publish articles on custom domain ยท Gain readership on day zero ยท Automatic GitHub backup and more

Adrien N.'s photo

Tough one. ๐Ÿ‘ฝ

There's a lot of writing on that and many things appeared: BEM, SMACSS, ITCSS, OCSS, Atomic CSS, ACSS...

tl;dr I don't like the BEM mixing dashes and underscores so I stick with dashes (kebab-case ๐Ÿ’ช) and have short one word component name.

In the end, that's basically mixing all good ideas up and do something like:

  • .{component} that's my basic thing & I try to have short classes names. For example: .card or .gallery ;
  • .{component}-{subcomponent} for subcomponent eg. .gallery-item or .search-filter ;
  • .{component}--{variant} for alternatives or states, for example: .card--highlight or .gallery--list or .gallery--grid or .search-filter--active
  • .js-*, for javascript selectors that are not meant to be styled but states for specific behavior (such as display: none;)

All of this, following Brad Frost's Atomic Design ๐Ÿ”ฒ which is awesome.

Also,

I know that there's a trend called "styled component" too, using style attribute and javascript and ditch almost completely css whatsoever; see the heated topic on hashnode about CSS in JS / Styled Components.