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

Question

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.