Warum durch Bindestrich (-) getrennte Klassennamen in CSS weit verbreitet sind [closed]

Während ich einige der CSS-Dateien durchgesehen habe, die in einigen Websites und einigen anderen weit verbreiteten Plugins und Frameworks enthalten sind, stellte ich fest, dass sie häufig durch Bindestrich getrennte Wörter als Klassennamen verwenden. Was ist eigentlich der Vorteil bei der Verwendung solcher Klassennamen?

Zum Beispiel: In jquery UI CSS,

.ui-helper-reset {

    // CSS properties here...

}

Lesbarkeit:

ui-helper-reset lesbar,
uiHelperReset unlesbar.

Sicheres Trennzeichen:

Beim Benutzen Attributselektoren wie [class^="icon-"], [class*=" icon-"] gezielt und sicher auf die spezifischen Klassennamenstile nach Präfix abzuzielen, während verhindert wird, dass z. .iconography abgestimmt werden.

Benutzerfreundlichkeit:

In jedem anständiger Code-Editorwenn du benutzt - zu trennen kombinierter-Klassenname du kannst leicht hervorheben eine gewünschte Portion durch Doppelklickwie: Farbemd-3und ersetzen Sie es (oder dokumentieren Sie es sogar global). Farbesm-3. Andererseits, wenn Sie verwenden unterstreichen _ wie Klassenname_hierwenn Sie darauf doppelklicken, wird der gesamte Klassenname wie folgt hervorgehoben: class_name_here. Dies zwingt Sie dazu, den gewünschten Teil stattdessen manuell per Drag-and-Drop auszuwählen.

Methodik der CSS-Namenskonvention

Sie können ein CSS-Namenskonzept wie folgt übernehmen:

• ANZUG CSS
• BEM (Block, Element, Modifikator),
• OOCSS (Objektorientiertes CSS)
• SMACS (Skalierbare und modulare Architektur für CSS)
• Atomares CSS
• …Ihr eigenes Konzept CSS 🙂

Sie alle helfen einem Team zu sprechen “die gleiche Sprache”durch die Annahme einer strengeren “Dinge benennen” wie zum Beispiel:

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

oder

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

Wenn dein .chat Teil der angezeigten Seite ist, könnten Sie allgemeine Block-Klassen wie verwenden .btn und Modifikator .btn--big wie <a class="btn btn--big">Post</a>andernfalls, wenn Ihre Schaltflächen ein strengeres Design benötigen, das für Ihre Chat-Anwendung spezifisch ist, als Sie es verwenden würden .chat__btn und .chat__btn--big Klassen. Solche Klassennamen können auch vorverarbeitet werden.

SCSS

Dh: durch die Verwendung Sass SCSSein Obermenge von CSS3-Syntax können Sie Dinge tun wie:

_{(Beispiel mit 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-Beispiel

Fazit:

Annahme einer strengeren Benennungsformat unter einem Team ist wichtig. Verhindert und minimiert veraltete Klassen, die Ihren HTML-Code aufblähen, hilft bei der Wiederverwendbarkeit und Lesbarkeit von Code und beschleunigt Ihren Workflow. Außerdem es Kräfte Sie und Ihr Team viel modularer über Ihre HTML-Struktur nachdenken – als Komponenten oder Atome.
Wofür Sie sich entscheiden, bleibt Ihnen überlassen – sei einfach konsequent.

Es ist nur eine Übung für Lesbarkeit. Im Allgemeinen können Sie solche Variablen in JavaScript nicht für Trennzeichen wie verwenden - ist ein Operator. Wenn Sie in JavaScript ein Trennzeichen benötigen, verwenden Sie entweder etwas davon:

.ui_helper_reset //snake_case
.uiHelperReset //camelCase

Auf diese Weise können Sie unterscheiden, dass einer für CSS und der andere für JavaScript verwendet wird. Dies ist mein Standpunkt, kann aber auch für Ihre Antwort gelten! 🙂

Sie sind nicht nur besser lesbar, sondern können auch vorschlagen, welche Klassen mit anderen verwandt sind. Twitter Bootstrap-Buttons haben zum Beispiel Klassen wie

btn
btn-danger
btn-sm

usw.

Die zweiten beiden sind im Gebrauch mit den ersten verwandt

Es ist nur ein Für Lesbarkeit. Sie können beliebige Namen gemäß der Konvention verwenden.