- PVSM.RU - https://www.pvsm.ru -
Основываясь на моих любимых статьях по данной теме и личном опыте, вот мои 5 копеек о том, как называть CSS-классы.
Если это поле, используйте элемент input
Читать HTML-документ будет гораздо легче.
Пример:
<div class='submit'/> <!-- Чёёё? -->
<input class='submit'/> <!-- Аа, ясно -->
Источник: Рафаэль Гоитер (французская статья) [1]
Это сказывается на названии классов. Всегда пишите название класса прямо в HTML-элементе, для которого нужно оформление, даже если на это приходится потратить дополнительные усилия. Если не ясно почему, почитайте нижеприведённую статью Криса Койера.
Пример:
<main class='mainly'>
<p>Lorem ipsum</p> <!-- Я хотел бы застилизовать этот абзац -->
</main>
main.mainly p { /* Не делайте этого */
}
/* Вместо этого присвойте название класса p : <p class='paragraphly' /> */
.paragraphly {
}
Источник: Крис Койер [2]
Пример:
.c-header-logo {
/* Просто прочитав это название, я догадался, что этот селектор указывает на лого в шапке. */
}
Источник: phpied.com [3]
Скажем, лого шапки на самом деле выглядит так:
Тогда не называйте его header-logo.
.guillotine {
/* О, сразу видно, что мы хотим стилизовать */
}
-like
для лучшей переносимости кода.Пример:
h3, .h3-like {
/* какое-то оформление */
}
<p class='h3-title'>
<!-- Я НЕ заголовок h3, но поскольку дизайнер велел мне выглядеть так же,
я не могу жаловаться на своё название класса -->
</p>
Источник: KNACSS v4 [4]
Это затрудняет чтение
Пример:
.navToOneModuleICreated {
font-size:2em;
}
/* против */
.nav-to-one-module-i-created {
font-size:2em;
}
Источник: Гарри Робертс [5]
На сегодняшний день это одно из самых популярных соглашений.
(двойной дефис) означает вариант элемента.
(двойное подчёркивание) означает дочерний элемент.
Пример:
<button class='btn btn--warning'> <!-- oдин из вариантов .btn — .btn--warning -->
<div class="btn__text"></div> <!-- один из дочерних элементов .btn — .btn__text-->
</button>
.btn--warning {
/* Ура! По соглашению я знаю, что код относится к варианту кнопки «warning», даже не заглядывая в HTML-код. Какое облегчение! */
}
.btn__text {
/* По той же причине я знаю, что эти стили предназначаются для текста в кнопке */
}
Источник: Калиг, пятьдесят оттенков БЭМ [6]
Рекомендовано: Smashing Magazine, боремся с БЭМ [7]
БЭМ открывает новые возможности, даже если поначалу их соглашения выглядят мерзко.
Тем не менее, такая своеобразность помогает глазу моментально уловить суть происходящего, и в случае БЭМ, поверьте, это работает.
Теперь можете пробовать более мерзкое соглашение, пока вы придерживаетесь его на всём проекте.
Пример:
.DIMENSIONS_OF_mycomponent {
/* Куда ещё противнее. Зато теперь понятнее, о чём речь. */
/* Я использую его для классов-заготовок в SASS. */
/* Но всё же не злоупотребляйте этим правилом. */
}
Помимо уже устоявшихся nav
, txt
, url
… следует избегать любых аббревиатур.
Источник: phpied.com [3]
В случае визуального компонента начинайте с c-
, а в случае объекта (напр. макет) — с o-
, мне просто нравится этот трюк Гарри Робертса.
Пример:
<button class='o-layout'>
<div class='o-layout-item o-grid c-button'></div>
<!-- С первого взгляда на HTML видно, что за что отвечает.->
</button>
Источник: Гарри Робертс [8]
[]
, когда слишком много классов одного типаЭтот небольшой трюк помогает быстрее изучить HTML. Заметьте, в CSS-файле нет классов .[
и .]
, они нужны только здесь, чтобы помочь другим читать HTML.
Пример:
<button class='[ o-layout ]'>
<div class='[ o-layout-item o-layout-item--first ] c-button'></div>
<!-- С первого взгляда на HTML видно, что за что отвечает.-->
</button>
Источник: исходный код «Inuit Kitchen Sink» [9]
js-
, если он используется только для JavaScriptЕсли Javascript требуется выбрать элемент, не полагайтесь на CSS-стили. Задайте специальный префикс вроде js-
.
Пример:
<button class='js-click-me'>
<!-- При беглом просмотре HTML я понимаю, что у этой кнопки нет CSS-селектора для оформления.
Но JavaScript использует её, видимо, чтобы поймать какое-то событие. -->
</button>
Источник: Дерик Бейли, книга по marionnette.js [10]
Если у класса слишком много обязанностей, разделите его на 2 отдельных свойства.
Пример:
(плохо)
<button class='a'>
<!-- Этот класс ниже включает сочетание свойств,
некоторые из которых участвуют в отношении a-b,
а некоторые — в отношении b-c,
CSS-файл будет трудно читать.-->
<div class='child-of-a-and-parent-of-c'>
<div class='c'>
</div>
</div>
</button>
(хорошо)
<button class='a'>
<!-- Разделите на 2 класса-->
<div class='child-of-a parent-of-c'>
<div class='c'>
</div>
</div>
</button>
Большинство из них содержат только одно свойство, и незачем его скрывать.
.horizontal-alignment { /* Не делайте этого. Выровнять по горизонтали можно разными способами, но при виде этого селектора в HTML-файле совершенно не ясно, КАК ИМЕННО это сделано. */
text-align: center;
}
/* Предпочитайте этот способ. Смотрите выше про использование БЭМ и односимвольного префикса */
.u-text-align--center {
text-align: center;
}
Если вы не довольны вашем CSS-селектором, скажите это всем.
Это произойдёт в любом случае, даже с лучшими CSSупергеро(ин)ями, поэтому не стыдитесь этого.
Подберите в вашей команде слово, подходящее для таких случаев, и придерживайтесь его на протяжении всего проекта.
Лично я использую слово «HACK», потому что IDE Atom его автоматически подсвечивает.
Пример:
.my-component {
margin-left: -7px; /* ХАК здесь: магическое число, нужное, чтобы компенсировать пробел */
}
Еще толковый вариант — собрать весь код со «странностями» в отдельный файл, shame.css
Опять же, Гарри Робертс подсказал
Источник: Гарри Робертс [11]
Название должно говорить само за себя, в одно-два слова, иначе код будет трудно поддерживать.
Пример:
.button {
/* Хорошо */
}
.dropdown-button {
/* Всё ещё хорошо */
}
.dropdown-button-part-one {
/* Хм, по-прежнему хорошо, но будет нечитаемым при добавлении дочернего элемента, например: */
}
.dropdown-button-part-one__button-admin {
/* Ой, всё!!! */
}
data-state
для указания состояния компонентаМанипуляция состоянием — далеко не редкость. Это происходит насколько часто, что специальный атрибут для состояния экономит время и силы в долгосрочной перспективе.
Пример:
<button class='c-button c-button--warning is-active'>
<!-- Не делайте этого -->
</button>
<button class='c-button c-button--warning' data-state='is-active'>
<!-- Так-то лучше.
Я удалил объявление класа,
это гарантирует единственность состояния,
и для тех, кто использует Sass, это сделает код чище.-->
</button>
Источник: к сожалению, не могу вспомнить, кто об этом писал, но его совет оказался весьма полезным.
has-
или is-
для состоянияМанипуляция состоянием происходит очень часто (ещё раз). Поэтому придерживаться строгого соглашения наименования для состояния будет очень полезно.
Пример:
.activated {
/* Не делайте этого. Я не совсем понимаю, о чём вы говорите? */
}
.is-activated {
/* Да, вы оформляете состояние. */
}
Источник: оформление кода в Mobify [12]
Нужно избегать сочетания состояний любой ценой. А когда это невозможно, на помощь придёт очень полезный трюк Бена Смифета.
Пример:
.activated {
<button class="btn -color-red -size-large -shape-round"></button>
Источник: Бен Смифет [13]
Это упрощает чтение документа.
Пример:
<button class="c-button">
<!-- ПЛОХОЙ ПРИМЕР: в нём используются " вместо '. В этом крошечном примере это не играет особой роли, но когда дело касается сотни селекторов в HTML-файле, одиночные кавычки — лучшая идея. -->
</button>
<button class='c-button'>
<!-- Хорошо!-->
</button>
Источник: я узнал это, когда работал с командой Predicsis [14]
Я попытался дать некоторые рекомендации, основанные на личном опыте и статьях, которые оказались для меня наиболее полезными.
Я не говорю, что всё это пригодится и в вашем случае, поэтому мой наилучший совет:
1) Постарайтесь улучшать своё именование классов, 2) соблюдайте его последовательно для данного проекта, 3) но избегайте переусложнения.
Если правило вам не подходит, просто пропустите его
Наслаждайтесь!
Особая благодарность @HugoGiraudel [15], @kaelig [16] и @gaetanbt [17] за их отзывы.
Автор: psywalker
Источник [18]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/html/133371
Ссылки в тексте:
[1] Рафаэль Гоитер (французская статья): https://blog.goetter.fr/2014/11/10/bien-utiliser-un-framework-css/
[2] Крис Койер: https://css-tricks.com/strategies-keeping-css-specificity-low/#article-header-id-3
[3] phpied.com: http://www.phpied.com/css-coding-conventions/
[4] KNACSS v4: http://bit.ly/27GQhS6
[5] Гарри Робертс: http://csswizardry.com/2010/12/css-camel-case-seriously-sucks/
[6] Калиг, пятьдесят оттенков БЭМ: http://blog.kaelig.fr/post/48196348743/fifty-shades-of-bem
[7] Smashing Magazine, боремся с БЭМ: https://www.smashingmagazine.com/2016/06/battling-bem-extended-edition-common-problems-and-how-to-avoid-them/
[8] Гарри Робертс: http://csswizardry.com/2015/08/bemit-taking-the-bem-naming-convention-a-step-further/
[9] исходный код «Inuit Kitchen Sink»: https://raw.githubusercontent.com/csshugs/inuit-kitchen-sink/v0.4.0/layout.html
[10] Дерик Бейли, книга по marionnette.js: https://leanpub.com/marionette-gentle-introduction
[11] Гарри Робертс: http://csswizardry.com/2013/04/shame-css/
[12] оформление кода в Mobify: https://github.com/mobify/mobify-code-style/tree/master/css/class-naming-conventions#state
[13] Бен Смифет: https://www.bensmithett.com/bem-modifiers-multiple-classes-vs-extend/
[14] командой Predicsis: http://www.predicsis.com/team/
[15] @HugoGiraudel: https://twitter.com/HugoGiraudel
[16] @kaelig: https://twitter.com/kaelig
[17] @gaetanbt: https://twitter.com/gaetanbt
[18] Источник: https://habrahabr.ru/post/303174/?utm_source=habrahabr&utm_medium=rss&utm_campaign=best
Нажмите здесь для печати.