Як називати css-класи

Грунтуючись на моїх улюблених статтях по даній темі і особистому досвіді, ось мої 5 копійок про те, як називати CSS-класи.

0. Перш ніж думати про назву класу, виберете відповідна назва для елементів HTML

Якщо це поле, використовуйте елемент
input


Читати HTML-документ буде набагато легше.

Приклад:

<div class='submit'/> <!-- Чеее? -->
<input class='submit'/> <!-- Аа, ясно -->


Джерело: Рафаель Гоитер (французька стаття)


1. Призначайте класи як можна нижче за DOM-дерева

Це позначається на назві класів. Завжди пишіть назву класу прямо в HTML-елемента, для якого потрібно оформлення, навіть якщо на це доводиться витратити додаткові зусилля. Якщо не зрозуміло чому, прочитайте нижченаведену статтю Кріса Койера.

Приклад:
<main class='mainly'>
<p>Lorem ipsum</p> <!-- Я хотів би застилизовать цей абзац -->
</main>


main.mainly p { /* Не робіть цього */
}

/* Замість цього змініть назву класу p : <p class='paragraphly' /> */
.paragraphly {
}


Джерело: Кріс Койер

2. Називайте класи по вмісту

Приклад:
.c-header-logo {
/* Просто прочитавши цю назву, я здогадався, що цей селектор вказує на лого в шапці. */
}


Джерело: phpied.com

3. Не називайте клас по вмісту, якщо картинка наочніше

Скажімо, лого шапки насправді виглядає так:
image

Тоді не називайте його header-logo.
.guillotine {
/* О, відразу видно, що ми хочемо стилізувати */
}


4. Спробуйте суфікс
like
для кращої переносимості коду.

Приклад:
h3, .h3-like {
/* якийсь оформлення */
}

<p class='h3-title'>
<!-- Я НЕ заголовок h3, але оскільки дизайнер велів мені виглядати так само,
я не можу скаржитися на свою назву класу -->
</p>


Джерело: KNACSS v4

5. Не використовуйте верблюжийРегистр

Це ускладнює читання

Приклад:
.navToOneModuleICreated {
font-size:2em;
}
/* проти */
.nav-to-one-module-i-created {
font-size:2em;
}


Джерело: Гаррі Робертс

6. Пробуйте БЕМ

На сьогоднішній день це одне з найпопулярніших угод.

  • Спочатку він здається дивним, але не бійтеся.
  • Поріг входження дуже низький
  • Можна використовувати вже зараз в будь-якій частині проекту.
  • Довгострокові перспективи колосальні


(подвійний дефіс) означає варіант елемента.

(подвійне підкреслення) означає дочірній елемент.

Приклад:
<button class='btn btn--warning'> <!-- один з варіантів .btn — .btn--warning -->
<div class='btn__text'></div> <!-- один з дочірніх елементів .btn — .btn__text-->
</button>


.btn--warning {
/* Ура! За угодою я знаю, що код відноситься до варіанту кнопки «warning», навіть не заглядаючи в HTML-код. Яке полегшення! */
}
.btn__text {
/* З тієї ж причини я знаю, що ці стилі призначаються для тексту на кнопці */
}


Джерело: Калиг, п'ятдесят відтінків БЕМ

Рекомендовано: Smashing Magazine, боремося з БЕМ

7. Пробуйте ще страшніше

БЕМ відкриває нові можливості, навіть якщо спочатку їх угоди виглядають бридко.

Тим не менш, така своєрідність допомагає оку моментально вловити суть того, що відбувається, і в разі БЕМ, повірте, це працює.

Тепер можете пробувати більш мерзенне угоду, поки ви дотримуєтеся його на всьому проекті.

Приклад:

.DIMENSIONS_OF_mycomponent {
/* Куди ще огидніша. Зате тепер зрозуміліше, про що йдеться. */
/* Я використовую його для класів-заготовок в SASS. */
/* Але все ж не зловживайте цим правилом. */
}


8. Не скорочуйте описують слова

Крім вже усталених
nav
,
txt
,
url
… слід уникати будь-яких абревіатур.

Джерело: phpied.com

9. Пробуйте використовувати тільки одну букву в якості осмисленого префікса

У разі візуального компонента починайте з
c
, а в разі об'єкта (напр. макет) — з
o-
, мені просто подобається цей трюк Гаррі Робертса.

Приклад:
<button class='o-layout'>
<div class='o-layout-item o-grid c-button'></div>
<!-- З першого погляду на HTML видно, що за що відповідає.->
</button>


Джерело: Гаррі Робертс

10. Пробуйте
[]
, коли занадто багато класів одного типу

Цей невеликий трюк допомагає швидше вивчити HTML. Зауважте, в CSS-файлі немає класів
.[
та
.]
, вони потрібні тільки тут, щоб допомогти іншим читати HTML.

Приклад:
<button class='[ o-layout ]'>
<div class='[ o-layout-item o-layout-item--first ] c-button'></div>
<!-- З першого погляду на HTML видно, що за що відповідає.-->
</button>


Джерело: вихідний код «Inuit Kitchen Sink»

11. Використовуйте префікс
js-
, якщо він використовується тільки для JavaScript

Якщо Javascript потрібно вибрати елемент, не покладайтеся на CSS-стилі. Задайте спеціальний префікс зразок
js-
.

Приклад:
<button class='js-click-me'>
<!-- При побіжному перегляді HTML я розумію, що у цієї кнопки немає CSS-селектора для оформлення.
Але JavaScript використовує її, мабуть, щоб зловити якусь подію. -->
</button>


Джерело: Дерік Бейлі, книга marionnette.js

12. Намагайтеся відокремити батьківський елемент від дочірнього

Якщо у класу занадто багато обов'язків, розділіть його на 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>


13. Несемантические класи мають явно описувати свої властивості.

Більшість з них містять лише одну властивість, і нема чого його приховувати.

.horizontal-alignment { /* Не робіть цього. Вирівняти по горизонталі можна різними способами, але при вигляді цього селектора в HTML-файлі абсолютно не ясно, ЯК САМЕ це зроблено.*/
text-align: center;
}
/* Віддавайте перевагу цей спосіб. Дивіться вище про використання БЕМ і односимвольного префікса */
.u-text-align--center {
text-align: center;
}


14. Явні хакі (I)

Якщо ви не задоволені вашому CSS-селектором, скажіть це всім.

Це відбудеться в будь-якому випадку, навіть з кращими СЅЅупергеро(ів)ямі, тому не соромтеся цього.

Підберіть у вашій команді слово, що підходить для таких випадків, і дотримуйтеся його на протязі всього проекту.

Особисто я використовую слово «РУБАТИ», бо IDE Atom автоматично підсвічує.

Приклад:
.my-component {
margin-left: -7px; /* ХАК тут: магічне число, потрібне, щоб компенсувати прогалину */
}


15. Явні хакі (II)

Ще тлумачний варіант — зібрати весь код з «дивацтвами» в окремий файл, shame.css

Знову ж, Гаррі Робертс підказав

Джерело: Гаррі Робертс

16. Намагайтеся уникати більше двох слів для одного імені

Назва повинна говорити сама за себе, в одне-два слова, інакше код буде важко підтримувати.

Приклад:
.button {
/* Добре */
}
.dropdown-button {
/* Ще */
}
.dropdown-button-part-one {
/* Хм, добре, але буде нечитабельним при додаванні дочірнього елемента, наприклад: */
}
.dropdown-button-part-one__button-admin {
/* Ой, все!!! */
}


17. Використовуйте атрибут
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>


Джерело: на жаль, не можу згадати, хто про це писав, але його рада виявився вельми корисним.

18. Використовуйте префікси
has-
або
is-
для стану

Маніпуляція станом відбувається дуже часто (раз). Тому дотримуватися суворого угоди найменування для стану буде дуже корисно.

Приклад:
.activated {
/* Не робіть цього. Я не зовсім розумію, про що ви говорите? */
}
.is-activated {
/* Так, ви оформляєте стан. */
}


Джерело: оформлення коду в Mobify

19. Використовуйте дефіс в якості префікса при поєднанні декількох станів

Потрібно уникати поєднання станів будь-якою ціною. А коли це неможливо, на допомогу прийде дуже корисний трюк Бена Смифета.

Приклад:
<button class="btn -color-red -size-large -shape-round"></button>


Джерело: Бен Смифет

20. При оголошенні селектора в HTML дотримуйтеся одинарних лапок замість подвійних

Це спрощує читання документа.

Приклад:
<button class='c-button'>
<!-- ПОГАНИЙ ПРИКЛАД: в ньому використовуються " замість '. У цьому маленькому прикладі це не грає особливої ролі, але коли справа стосується сотні селекторів в HTML-файлі, одиночні лапки — найкраща ідея. -->
</button>
<button class='c-button'>
<!-- Добре!-->
</button>


Джерело: я дізнався про це, коли працював з командою Predicsis

21. Не дотримуйтесь правил

Я спробував дати деякі рекомендації, засновані на особистому досвіді та статтях, які виявилися для мене найбільш корисними.

Я не кажу, що все це стане в нагоді і у вашому випадку, тому мій найкращий порада:

1) Постарайтеся покращувати своє іменування класів, 2) виконуйте його послідовно для даного проекту, 3) але уникайте переусложнения.

Якщо правило вам не підходить, просто пропустіть його

Насолоджуйтесь!

Особлива подяка @HugoGiraudel, @kaelig і @gaetanbt за їх відгуки.
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.