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

View original thread
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.