Как да именуваме CSS класове – Ермоченков Роман – Среден
Превод на статията: http://www.bdavid.xyz/how-to-name-css-classes
Наименуването на неща е най-трудната част от програмирането, но в CSS назовавате класове всеки ден...
Преди да мислите за имена на класове, дайте добри имена на HTML елементи
Ако това е вход, тогава използвайте входен елемент. Това ще направи HTML документа много по-лесен за четене от скенера.
Пример:
Дайте имена на класове дори на най-ниското възможно ниво
Това силно се отразява на работата. Винаги давайте имена на класове директно на HTML елемента. Дори и да ви се струва, че това е някаква допълнителна работа, в бъдеще ще разберете всички предимства на този подход. Прочетете статията на Chris Coyier, ако все още се съмнявате.
Пример:
2. Използвайте съдържанието на елемента за подходящо име
Пример:
Не използвайте съдържание, ако картината говори сама за себе си
Нека си представим, че картината изглежда така:
Тогава вече не е нужно да го наричате header-logo.
Опитайте суфикса -like за по-добра повторна употреба.
Пример:
Не използвайте camelCase
Това затруднява четенето.
Пример:
Опитайте BEM
Това е една от най-често използваните практики днес. На пръв поглед може да изглежда малко странно, но не се тревожете. Вече можете да опитате това навсякъде във вашия проект, печалбата ще бъде огромна по-късно.
„_“ означава стил на елемент (модификатор).
„_ _“ тогава означава блок (елемент).
Пример:
Опитайте нещо по-грозно
BEM разкрива нови възможности, дори ако неговите класове изглеждат отблъскващи на пръв поглед.
Притакова необичайно именуване на класове улеснява окото да улови какво точно се случва и къде. Повярвайте ми, работи с BEM.
Можете също така да опитате по-необичайни имена на класове. Опитай.
Пример:
Не режете
За разлика от класиките на жанра: nav, txt, url… трябва да избягвате всякакви съкращения.
Опитайте да използвате една буква като обяснителен префикс
Ако е визуален компонент, започнете с "c-". Ако е обект, тогава започнете с "o-".
Пример:
Използвайте [ ], когато имате много подобни класове
Пример:
Използвайте префикс js-, ако този клас е за Javascript
Ако Javascript трябва да насочи даден елемент, не го стилизирайте с CSS.
Пример:
Опитайте се да отделите родителския елемент от децата
Ако даден клас има много зависимости, разделете го на 2 стойности.
Пример:
Несемантичните класове трябва изрично да декларират своите свойства
Повечето от тях съдържат едно свойство. Няма нужда да криете какво съдържат тези класове.
Изрични патерици ( I )
Ако не сте доволни от вашия CSS селектор, кажете на всички за това.
Така или иначе ще се случи, дори и със супермен на оформлението, така че не се срамувайте от това.
Изрични патерици (II)
Друг готин ход, това ще постави целия странен код в отделен файл.
За пореден път Хари Робъртс идва на помощ.
Опитайте се да избягвате повече от две думи в имената на класовете
Името трябва да е разбираемо с една или две думи, в противен случай кодът ще бъде труден за поддържане.
Пример:
Използвайте data-state, за да подчертаете състоянието на вашия елемент
Държавната манипулация се случва много често. И дайте конкретни състояниячрез data-atribut се получава като добра практика в по-нататъшна поддръжка.
Пример:
Източник: за съжаление не помня кой е написал това, но съветът му беше много полезен.
Използвайте префикса has- или is- за състоянието
Промените в състоянието се случват много често. Така че това име на клас ще бъде много полезно.
Пример:
Използвайте тире като префикс, когато комбинирате различни състояния
Трябва да направите всичко, за да избегнете комбинацията от състояния. Но когато това не е възможно, възползвайте се от съвета на Бен Смитет.
Пример:
Опитайте единични кавички вместо двойни кавички, когато присвоявате селектор в HTML
Двойните кавички създават "шум", когато четете документ.
Пример:
Източник: Научих това, докато работех с екипа на Predicsis
Не спазвайте правилата
Това не означава, че всичко тук ще работи добре за вас. Така че най-добрият ми съвет е:
- Опитайте името на вашия клас
- Оставете го включен през целия проект
- Избягвайте да бъдете прекалено инженерни
Ако се чувствате неудобно, просто не го използвайте.
Специални благодарности на @HugoGiraudel, @kaelig и @gaetanbt за техните рецензии BEM отваря нови възможности, дори ако техните конвенции изглеждат неприятни на пръв поглед.