Search code examples
htmlcss

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

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

}
Solution

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