While gone through some of the CSS files included with some websites and some other widely used plugins and frameworks, found that they are widely using hyphen separated words as class names. Actually what is the advantage of using such class names.
For example: In jquery UI CSS,
.ui-helper-reset { // CSS properties here... }
It is very easy to choose a valid class name or selectors in CSS just follow the rule. A valid name should start with an underscore (_), a hyphen (-) or a letter (a-z)/(A-Z) which is followed by any numbers, hyphens, underscores, letters.
A custom property is any property whose name starts with two dashes (U+002D HYPHEN-MINUS), like --foo . The <custom-property-name> production corresponds to this: it's defined as any valid identifier that starts with two dashes.
The hyphens CSS property specifies how words should be hyphenated when text wraps across multiple lines. It can prevent hyphenation entirely, hyphenate at manually-specified points within the text, or let the browser automatically insert hyphens where appropriate.
hyphens: manual Words are only broken at line breaks where there are characters inside the word that suggest line break opportunities. There are two characters that suggest line break opportunity: U+2010 (HYPHEN): the βhardβ hyphen character indicates a visible line break opportunity.
ui-helper-reset
readable,uiHelperReset
unreadable.
When using attribute selectors like [class^="icon-"], [class*=" icon-"]
to specifically and safely target the specific classname styles by prefix, while preventing i.e: .iconography
to be matched.
In every decent code editor, if you use -
to separate combined-class-name you can easily highlight a desired portion by double-clicking it like: col-md
-3, and replace it (or even document globally) to col-sm
-3. On the other hand, if you use underscore _
like class_name_here, if you double-click it you'll end up highlighting the whole class-name like: class_name_here
. Such will force you to manually drag-select the desired portion instead.
You can adopt a CSS naming concept like:
They all help a team speak "the same language", by adopting a stricter "Naming things" such as:
/* Block */ .Chat{} /* -element (child) */ .Chat-message{} /* --modifier */ .Chat-message--me{} /* Style my messages differently from other messages */ /* .is-state */ .Chat.is-active{} /* Multiple chats - active state handled by JS */
or
/* block */ .chat{} /* __element (child) */ .chat__message{} /* --modifier */ .chat__message--me{} /* Style my messages differently from other messages */ .chat--js-active{} /* Multiple chats - active state handled by JS */
If your .chat
is part of the page you're viewing, you could use general Block classes like .btn
and Modifier .btn--big
like <a class="btn btn--big">Post</a>
, otherwise if your buttons need a stricter styling specific to your chat application than you'd use .chat__btn
and .chat__btn--big
classes. Such classnames can also be preprocessed.
I.e: by using Sass SCSS, a superset of CSS3 sintax you can do stuff like:
(Example using SUIT CSS)
.Chat { font: 14px/1.4 sans-serif; position: relative; overflow-y: scroll; width: 300px; height: 360px; &-message { // refers to .Chat-message padding: 16px; background: #eee; &--me { // refers to .Chat-message--me background: #eef; // Style my messages differently from other messages */ text-align: right; } } &.is-active { // refers to .Chat.is-active (JS) outline: 3px solid lightblue; } }
HTML:
<div class="Chat is-active"> <div class="Chat-message">Hi π</div> <div class="Chat-message Chat-message--me">Ciao!<br>How are you? π</div> <div class="Chat-message">Fine thx! Up for a β?</div> </div>
jsFiddle example
Adopting a stricter naming format among a team is important. Prevents and minimizes dead legacy classes bloating your HTML, helps code re-usability, readability and speeds up your workflow. Additionally, it forces you and your team to think in a much more modular way about your HTML structure - as components or atoms.
Whatever you decide to use is up to you - just, be consistent.
It is just a practice for readability. Generally, you cannot have such variables in JavaScript, for separator, as -
is an operator. When you need separator in JavaScript, you either use something of these:
.ui_helper_reset //snake_case .uiHelperReset //camelCase
This way you can differentiate that one is used for CSS and other is for JavaScript. This is my point of view, but can be applied for your answer too! :)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With