Конвенції про найменування CSS, які заощадять години налагодження

Я чув, як багато розробників кажуть, що вони ненавидять CSS. На моєму досвіді, це відбувається в результаті не витрачання часу на вивчення CSS.

Корейська ??

알림: 한국인 독자 분들 을 위해 본 기사 는 한국어 로 번역 되었으며, 한국어 버전 은 여기 에서 보실 수 있습니다

CSS не є найкрасивішою "мовою", але він вже більше 20 років успішно підтримує стиль Інтернету. Не надто погано, га?

Однак, коли ви пишете більше CSS, ви швидко бачите один великий мінус.

Дуже складно підтримувати CSS.

Погано написаний CSS швидко перетвориться на кошмар.

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

Використовуйте дефісовані рядки

Якщо ви пишете багато JavaScript, тоді написання змінних у випадку верблюда є звичайною практикою.

var redBox = document.getElementById('...')

Чудово, правда?

Проблема полягає в тому, що така форма іменування не підходить для CSS.

Не роби цього:

.redBox { border: 1px solid red;}

Натомість зробіть наступне:

.red-box { border: 1px solid red;}

Це досить стандартна конвенція імен CSS. Це, можливо, читабельніше.

Крім того, це узгоджується з іменами властивостей CSS.

// Correct
.some-class { font-weight: 10em}
// Wrong
.some-class { fontWeight: 10em}

Конвенція про найменування BEM

Команди мають різні підходи до написання селекторів CSS. Деякі команди використовують роздільники дефісів, тоді як інші воліють використовувати більш структуровану конвенцію іменування, що називається BEM.

Як правило, є 3 проблеми, які намагаються вирішити конвенції імен CSS:

  1. Щоб знати, що робить селектор, просто подивившись його назву
  2. Щоб мати уявлення про те, де можна використовувати селектор, просто подивившись на нього
  3. Знати взаємозв'язок між назвами класів, просто дивлячись на них

Ви коли-небудь бачили назви класів, написані так:

.nav--secondary { ...}
.nav__header { ...}

Це конвенція про найменування BEM.

Пояснення BEM 5-річному віку

BEM намагається розділити загальний користувальницький інтерфейс на невеликі багаторазові компоненти.

Розгляньте зображення нижче:

Ні, це не нагорода :(

Чоловік-палиця являє собою такий компонент, як блок дизайну.

Можливо, ви вже здогадалися, що B в BEM означає «Блок».

У реальному світі цей "блок" може представляти навігацію по сайту, верхній, нижній колонтитул або будь-який інший блок дизайну.

Дотримуючись описаної вище практики, ідеальною назвою класу для цього компонента буде stick-man.

Компонент повинен мати такий стиль:

.stick-man { }

Ми використовували тут розділені рядки. Добре!

E для елементів

E у "BEM" означає "Елементи".

Загальні блоки дизайну рідко живуть ізольовано.

Наприклад, у палиці є head, два чудові armsі feet.

head, feetІ armsвсе елементи всередині компонента. Вони можуть розглядатися як дочірні компоненти, тобто діти загального батьківського компонента.

Використовуючи конвенцію іменування BEM, імена класів елементів виводяться шляхом додавання двох знаків підкреслення, за якими йде ім’я елемента.

Наприклад:

.stick-man__head {
}
.stick-man__arms {
}
.stick-man__feet {
}

М для модифікаторів

M у 'BEM' означає Модифікатори.

Що робити , якщо палиця людина був модифікований , і ми могли б мати blueабо з redStick - людина?

У реальному світі це може бути redкнопка або blueкнопка. Це модифікації відповідного компонента.

Використовуючи BEM, імена класів модифікаторів виводяться шляхом додавання двох дефісів, за якими слідує ім’я елемента.

Наприклад:

.stick-man--blue {
}
.stick-man--red {
}

Останній приклад показав батьківський компонент, що модифікується. Це не завжди так.

Що, якби у нас були палиці різних headрозмірів?

Цього разу елемент змінено. Пам'ятайте, що елемент є дочірнім компонентом у загальному блоці, що містить.

.stick-manЯвляє собою Block, .stick-man__headелемент.

Як видно з прикладу вище, подвійні дефіси також можуть використовуватися так:

.stick-man__head--small {
}
.stick-man__head--big {
}

Знову ж, зверніть увагу на використання подвійних дефісів у наведеному вище прикладі. Це використовується для позначення модифікатора.

Тепер ви зрозуміли.

В основному так працює конвенція про найменування BEM.

Особисто я, як правило, використовую лише імена класів дефісу деліметра для простих проектів та BEM для більш залучених користувацьких інтерфейсів.

Ви можете прочитати більше про BEM.

BEM - модифікатор блочного елемента

BEM - Модифікатор блочних елементів - це методологія, яка допомагає досягти компонентів багаторазового використання та спільного використання коду в… getbem.com

Навіщо використовувати конвенції про іменування?

У комп’ютерних науках є лише дві важкі проблеми: скасування кешу та імена - Філ Карлтон

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

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

Якщо ви вирішите використовувати конвенцію іменування BEM, стане легше побачити взаємозв'язок між компонентами / блоками вашого дизайну, просто подивившись на розмітку.

Відчуваєш себе впевнено?

Імена CSS із зачіпами JavaScript

Сьогодні у Джона перший робочий день.

Йому передають HTMLкод, який виглядає так:

Джон прочитав цю статтю і розуміє, що це може бути не найкращим способом назвати речі CSS. Тож він продовжує і реформує кодову базу приблизно так:

Виглядає добре, так?

Невідомо Джону, він зламав кодову базу ???

Як?

Десь у коді JavaScript існував зв’язок з попереднім іменем класу siteNavigation:

//the Javasript code
const nav = document.querySelector('.siteNavigation')

Отже, зі зміною назви класу navзмінна стала null.

Як сумно.

Щоб запобігти подібним випадкам, розробники придумали різні стратегії.

1. Використовуйте імена класів js-

Одним із способів пом'якшення таких помилок є використання js-*ім'я класу для позначення зв'язку з даним елементом DOM.

Наприклад:

А в коді JavaScript:

//the Javasript code
const nav = document.querySelector('.js-site-navigation')

Як домовленість, кожен, хто бачить назву js-site-navigationкласу, розуміє, що існує зв'язок із цим елементом DOM у коді JavaScript.

2. Використовуйте атрибут Rel

Я сам не використовую цю техніку, але бачив, як люди роблять.

Ви впізнаєте це?

В основному атрибут rel визначає зв'язок, який має пов'язаний ресурс з документом, на який він посилається.

У попередньому прикладі з Джоном прихильники цієї техніки робили б так:

І в JavaScript:

const nav = document.querySelector("[rel='js-site-navigation']")

Я сумніваюся у цій техніці, але ви, мабуть, зіткнетесь із нею в деяких кодових базах. Тут стверджується: "ну, це стосується Javascript, тому я використовую атрибут rel для позначення цього" .

Мережа - це велике місце з безліччю різних “методів” для вирішення однієї і тієї ж проблеми.

3. Не використовуйте атрибути даних

Деякі розробники використовують атрибути даних як хуки JavaScript. Це неправильно. За визначенням, атрибути даних використовуються для зберігання нестандартних даних .

Редагування №1: Як згадували деякі дивовижні люди в розділі коментарів, якщо люди використовують атрибут 'rel', то, можливо, добре використовувати атрибути даних у певних випадках. Це ваш дзвінок після цього.

Бонусна порада: напишіть більше коментарів CSS

Це не має нічого спільного з умовами іменування, але це також заощадить ваш час.

Хоча багато веб-розробників намагаються НЕ писати коментарі JavaScript або дотримуватися кількох, я думаю, вам слід писати більше коментарів CSS.

Оскільки CSS не є найелегантнішою “мовою”, добре структуровані коментарі можуть заощадити час, коли ви намагаєтеся зрозуміти свій код.

Це не боляче.

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

Вам не потрібно писати коментарі, щоб сказати, що color: redце дасть червоний колір. Але якщо ви використовуєте CSS-фокус, який є менш очевидним, сміливо пишіть коментар.

Готові стати професіоналом?

Я створив безкоштовний посібник CSS, щоб негайно отримати ваші навички CSS. Отримайте безкоштовну електронну книгу.