Why hyphen (-) separated class names are widely used in CSS

Question

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...

}

@BoltClock is it that the only thing behind this, or will it enhance any easier selection methods? — Prasanth K C, Dec 28 '13 at 05:55
Readability but also: In some text editors by double-clicking the name it'll select just a text-portion like: ui-`helper`-reset while using underscore it'll select the whole name: `ui_helper_reset`. Makes it more easier to change or select all and modify in the whole doc just the needed specific name property. — Roko C. Buljan, Dec 28 '13 at 05:57
@PraveenKumar Notepad++, Sublime2 and Netbeans, even jsFiddle and jsBin AFAIK — Roko C. Buljan, Dec 28 '13 at 05:58
@BoltClock what about these kind of selections `col[class*="col-"]`, Does this hyphen plays any role here? — Prasanth K C, Dec 28 '13 at 06:25
That does play a role. For example it ensures you don't accidentally select classes like `column`. — BoltClock, Dec 28 '13 at 06:32
Hyphens allow for css2 Pipe patterns, in my opinion useful for version selection. Example: `Ver 1.1.2 Ver 1.2.3` and css rules `span[class*=ver-1-2]{ font-weight:bold; } span[class*=ver-1]{ color:red; }` will match desired sub-sets of versions. https://codepen.io/jensf/pen/Gyvzdv — Jens Frandsen, Jan 04 '18 at 07:19

Roko C. Buljan · Accepted Answer · 2021-06-17T06:14:09.783

Readability:

ui-helper-reset readable,
uiHelperReset unreadable.

Safe delimiter:

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.

Ease of use:

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.

CSS Naming Convention Methodology

You can adopt a CSS naming concept like:

SUIT CSS
BEM (Block, Element, Modifier),
OOCSS (Object-Oriented CSS)
SMACSS (Scalable and Modular Architecture for CSS)
Atomic CSS
…Your Own Concept CSS :)

They all help a team speak "the same language", by adopting a stricter "Naming things" such as:

SUIT CSS

/* 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

BEM:

/* 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.

SCSS

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

Conclusion:

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.

@PrasanthKC exactly, building huge *stylesheets* even I use combined class-names. The hyphen here is just our friend. Less time spent on the machine `-` more making coffee. :D — Roko C. Buljan, Dec 28 '13 at 06:58
Why not use camelCase ? `uiHelperReset` is more readable than either of other options. — Charles Bretana, Mar 03 '14 at 17:06
@CharlesBretana camelCase is readable as any other way that suits you best. The difference between `camelCase` and `camel-not-case` is that I can quickly edit my `not` into `bloody` by just double-clicking at it in most editors, while in your case I would use the click+shift+keyboardArrows or had to precisely drag-select the word portion I want to change. Hope it makes sense now. — Roko C. Buljan, Mar 03 '14 at 17:14

score 4 · Answer 2 · edited Dec 28 '13 at 06:26

4

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! :)

edited Dec 28 '13 at 06:26

tewathia

6,890
3
22
27

answered Dec 28 '13 at 05:55

Praveen Kumar Purushothaman

164,888
24
203
252

what about these kind of selections `col[class*="col-"]`, Does this hyphen plays any role here? – Prasanth K C Dec 28 '13 at 06:26
@PrasanthKC they play the same role like in `.col[class*="Something"]` for selecting `any containing` like i.e. targets: `col nameSomethingProperty` So basically it's all about readability and ease of use like I said in my comment. – Roko C. Buljan Dec 28 '13 at 06:29
1

@RokoC.Buljan so i think that is also a main reason to use these hyphens, because if we select a class name with `col` using attrib selector, it may select all the class names containing `col` in it, like `.column` & `.col-span` – Prasanth K C Dec 28 '13 at 06:36
@PrasanthKC exactly. Acting like a *safe delimiter*. – Roko C. Buljan Dec 28 '13 at 06:37

score 3 · Answer 3 · answered Dec 28 '13 at 05:55

3

In addition to being more readable, they can also suggest which classes are related to other. Twitter Bootstrap buttons, for example, have classes like

btn
btn-danger
btn-sm

etc.

The second two are related in usage to the first

answered Dec 28 '13 at 05:55

James A Mohler

11,060
15
46
72

score 0 · Answer 4 · answered Dec 28 '13 at 06:43

0

It is just a for readability. you may use any names as per convention.

answered Dec 28 '13 at 06:43

SuRu

739
1
6
19