Why do you prefer what you prefer? CSS class names: Hyphenated, camelCase or any other style?
Just wanted to hear opinions of many developers as to why they prefer to write classnames in a particular style. Here are the options:
Hyphenated: .my-first-div
Camel Case: .myFirstDiv
No style: .myfirstdiv
If I have missed any style, please mention it and explain why you use it.
PS: I don't opinions on which is better. The question is why do you prefer a particular style of writing className. :)
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
Director of User Experience Development
.class_name
I never understand why people use -'s. You can't double click on the class name and select the entire thing.
Hyphens work nicely as separators of parts of the name, for example
<namespace>-<block>__<element>--<modified>@<breakpoint>
However you are right, maybe I should give underscores a try for the pure part-names
You made me think. To highlight entire simple selector in CSS on double click, in Sublime Text, I added this:
"word_separators": "/\':,;<>~!@^&*|+{}`~?"
in "Preferences -> Settings - Syntax Specific". How did I live without this before?! :)
Outlaw web developer & padawan designer
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:.cardor.gallery;.{component}-{subcomponent}for subcomponent eg..gallery-itemor.search-filter;.{component}--{variant}for alternatives or states, for example:.card--highlightor.gallery--listor.gallery--gridor.search-filter--active.js-*, for javascript selectors that are not meant to be styled but states for specific behavior (such asdisplay: 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.
Just Write Code
I am a huge fan of BEM since it is very modular. Even though it has the potential to cause bloat in the code, classes are still easily maintainable.
Full Stack Developer | Cloud Native Applications
I personally use .my-first-div
camelcase class names make me little un-comfortable to work with
Executive Product Leader & Mentor for High-End Influencers and Brands @ mevrael.com
Most coding styles and I prefer lisp case .my-first-div
P.S. there are also others like BEM.
PHP Developer
Personally, I like to use Camel case or _style or no style which easier to select on double click! ;)
Software Engineer, Technical Consultant & Mentor
I am a huge Harry-Roberts fan, so BEM+ITCSS+namespaces+extra, hyphenated. Example:
<div class="
o-menu__item / js-menu__item
o-menu__icon@sd
o-menu__item--active
"></div>
Comments (9)