Почему дефис (-) разделенные имена классов широко используются в CSS

Пройдя некоторые из файлов CSS, включенных в некоторые веб-сайты и некоторые другие широко используемые плагины и фреймворки, обнаружил, что они широко используют разделенные символами слова как имена классов. На самом деле, в чем преимущество использования таких имен классов.

Например: В jQuery UI CSS

.ui-helper-reset {

    // CSS properties here...

}

Ответ 1

Читаемость:

ui-helper-reset читаемый,
uiHelperReset не читается.

Безопасный разделитель:

При использовании селекторов атрибутов, таких как [class^="md-"], [class*=" md-"] чтобы целенаправленно и безопасно нацеливать на конкретные стили имени класса, предотвращая то есть: .mdSomething для нацеливания.

Простота использования:

В любом приличном текстовом редакторе, если вы используете - для разделения имени объединенного класса, вы можете легко выделить нужную часть, дважды щелкнув по ней, например: col- md -3, и заменить ее (или даже документ глобально) на col- sm -3. С другой стороны, если вы используете подчеркивание _ как class_name_here, если вы дважды щелкните по нему, вы в конечном итоге выделите все имя класса, например: class_name_here. Это заставит вас вручную перетащить выбранную часть вместо этого.

Методология CSS Naming Convention

Вы можете принять концепцию именования CSS, например:

Костюм CSS
БЭМ (Блок, Элемент, Модификатор),
OOCSS (объектно-ориентированный CSS)
SMACSS (масштабируемая и модульная архитектура для CSS)
Атомный CSS
… Ваша собственная концепция CSS :)

Все они помогают команде говорить "на одном языке", приняв более строгие "Наименования вещей", такие как:

Костюм 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 */

или же

БЭМ:

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

Если ваш .chat является частью просматриваемой страницы, вы можете использовать общие классы блоков, такие как .btn и Modifier .btn--big такие как <a class="btn btn--big">Post</a>, в противном случае если вашим кнопкам нужен более строгий стиль, специфичный для вашего приложения чата, чем использовать .chat__btn и .chat__btn--big классы. Такие имена классов также могут быть предварительно обработаны.

SCSS

То есть: используя Sass SCSS, расширенный набор синтаксиса CSS3, вы можете делать такие вещи, как:

_{(Пример использования 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

Заключение:

Принятие более строгого формата именования в команде очень важно. Предотвращает и сводит к минимуму устаревшие классы, вздувающие ваш HTML, помогает повторному использованию кода, удобочитаемости и ускоряет ваш рабочий процесс. Кроме того, это заставляет вас и вашу команду гораздо более модульно думать о вашей HTML-структуре - как о компонентах или атомах.
Все, что вы решите использовать, зависит от вас - просто будьте последовательны.

Ответ 2

Это просто практика для удобочитаемости. Как правило, вы не можете иметь такие переменные в JavaScript, для разделителя, поскольку - является оператором. Когда вам нужен разделитель в JavaScript, вы либо используете что-то из них:

.ui_helper_reset //snake_case
.uiHelperReset //camelCase

Таким образом, вы можете отличить тот, который используется для CSS, а другой - для JavaScript. Это моя точка зрения, но может быть применена и для вашего ответа!:)

Ответ 3

В дополнение к тому, чтобы быть более читабельными, они также могут предполагать, какие классы связаны с другими. Щелкайте кнопки Bootstrap, например, имеют классы типа

btn
btn-danger
btn-sm

и др.

Второе два связаны с использованием первого

Ответ 4

Это просто для удобочитаемости. вы можете использовать любые имена согласно конвенции.