Ответ 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>
Заключение:
Принятие более строгого формата именования в команде очень важно. Предотвращает и сводит к минимуму устаревшие классы, вздувающие ваш HTML, помогает повторному использованию кода, удобочитаемости и ускоряет ваш рабочий процесс. Кроме того, это заставляет вас и вашу команду гораздо более модульно думать о вашей HTML-структуре - как о компонентах или атомах.
Все, что вы решите использовать, зависит от вас - просто будьте последовательны.