Як давати імена CSS-класам – Ermochenkov Roman – Medium
Переклад статті: http://www.bdavid.xyz/how-to-name-css-classes
Давати назви речам – це найскладніше у програмуванні, але в CSS ви даєте імена класам щодня.
Перед тим як думати про назву класів, дайте хороші імена для HTML-елементів
Якщо це input, то використовуйте input-елемент. Це сильно полегшить читання HTML документа для сканера.
Приклад:
Давайте імена класам навіть на найнижчому можливому рівні
Це дуже впливає працювати. Завжди давайте імена класам безпосередньо до HTML елементу. Навіть якщо вам здається, що це якась зайва робота, у майбутньому ви зрозумієте всі плюси такого підходу. Прочитайте статтю Кріса Койєра, якщо ви ще сумніваєтеся.
Приклад:
2. Використовуйте вміст елемента для відповідного імені
Приклад:
Не використовуйте вміст, якщо картинка говорить сама за себе
Давайте уявимо, що картинка виглядала так :
Тоді вже не треба називати її header-logo.
Спробуйте суфікс -like для кращого використання.
Приклад :
Не використовуйте camelCase
Це ускладнює читання.
Приклад:
Спробуйте БЕМ
Це одна з найуживаніших практик сьогодні. На перший погляд, можливо, це виглядає трохи дивним, але не лякайтеся. Ви вже можете спробувати це у будь-якому місці вашого проекту, надалі виграш буде величезним.
"_" означає стиль елемента (модифікатор).
"_ _" означає потім блоку (елемент).
Приклад:
Спробуйте щось більш потворне
БЕМ відкриває нові можливості, навіть якщо його класи виглядають такими, що відштовхують на перший погляд.
Притаке незвичайне іменування класів оку легше відловлювати що саме відбувається і де. Повірте мені, з БЕМ це працює.
Також ви можете спробувати незвичайніші імена класів. Спробуйте.
Приклад:
Не скорочуйте
На відміну від класики жанру: nav, txt, url… ви повинні уникати будь-яких абревіатур.
Спробуйте використовувати одну літеру як префікс, що пояснює.
Якщо це візуальний компонент, почніть із “с-”. Якщо це об'єкт, почніть з “о-”.
Приклад:
Використовуйте [ ] коли у вас багато подібних класів
Приклад:
Використовуйте js-префікс, якщо цей клас для Javascript
Якщо JavaScript потрібно націлюватися на елемент, не робіть його в стилі CSS.
Приклад:
Спробуйте відокремлювати батьківський елемент від нащадків
Якщо клас має багато залежностей, розділіть його на 2 значення.
Приклад:
Чи не семантичні класи повинні явно описувати свої властивості
Більшість із них містять одну властивість. Нема чого приховувати що містять ці класи.
Явні милиці (I)
Якщо ви незадоволені своїм селектором CSS, скажіть про це всім.
Так чи інакше це станеться у будь-якому випадку, навіть із суперменом від верстки, так що не соромтеся цього.
Явні милиці( II )
Інший кльовий хід, це помістить весь дивний код окремий файл.
І знов, Harry Roberts приходить на допомогу.
Спробуйте уникнути більше двох слів у назві класів
Ім'я має бути зрозумілим за одним, двома словами або код буде важко підтримувати.
Приклад:
Використовуйте data-стан для підкреслення стану вашого елемента
Маніпуляція стану відбувається дуже часто. І давати специфічні станичерез data-атрибут виходить гарною практикою подальшої підтримки.
Приклад:
Джерело: на жаль я не пам'ятаю хто це написав, але його порада була дуже корисною.
Використовуйте has- або is-префікс для стану
Зміни станів трапляються дуже часто. Так що така назва класів буде дуже корисною.
Приклад:
Використовуйте тире як префікс коли коли ви комбінуєте різні стани
Вам потрібно зробити все, щоб уникнути комбінації станів. Але коли це неможливо, скористайтеся порадою від Ben Smithett.
Приклад:
Спробуйте одиночні лапки замість подвійних коли призначаєте селектор HTML
Подвійні кавики роблять "шум", коли ви читаєте документ.
Приклад:
Джерело: Я вивчив це під час роботи з Predicsis team
Не дотримуйтесь правил
Це не означає, що все тут добре працюватиме для вас. Так що моя найкраща порада:
- Пробуйте свою назву класів
- Залишайте його протягом усього проекту
- Уникайте надто інженерного підходу
Якщо ви почуваєтеся не комфортно, просто не застосовуйте.
Спеціальні погляди на @HugoGiraudel, @kaelig, і @gaetanbt для своїх reviewsBEM opens нових можливостей, навіть якщо їх спогади невдоволено при першому глибині.