It's time to ditch Medium for good! 🌈⚑️

Introducing Devblog by Hashnode. Blog on your domain for FREE. Highly customizable and optimized for developers.

Learn more

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

RE:

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.

Reply to this…

(7 answers) Take me to the question