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.
