Конвенции за имена на 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“ означава Elements.

Като цяло блоковете на дизайна рядко живеят изолирано.

Например, стик-мъжът има head, два прекрасни armsи feet.

Най- head, feetи armsвсичко това са елементи в рамките на компонента. Те могат да се разглеждат като дъщерни компоненти, т.е. деца на общия родителски компонент.

Използвайки конвенцията за именуване BEM, имената на класове на елементи се извличат чрез добавяне на две долни черти, последвани от името на елемента.

Например:

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

М за модификатори

M в „BEM“ означава модификатори.

Какво ще стане, ако стикманът е модифициран и можем да имаме blueили redстикман?

В реалния свят това може да е 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 - Block Element Modifier е методология, която ви помага да постигнете компоненти за многократна употреба и споделяне на код в ... 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 умения. Вземете безплатната електронна книга.