CSS Именуване на конвенции, които ще ви спестят часове на грешка

Чух много разработчици да казват, че мразят CSS. Според моя опит, това идва в резултат на това, че не отделяте време за изучаване на CSS.

Корейски?

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

CSS не е най-хубавият „език“, но успешно задейства стила на мрежата вече повече от 20 години. Не се справя твърде зле, а?

Въпреки това, докато пишете повече CSS, бързо виждате един голям минус.

Трудно е да се поддържа CSS.

Лошо написаният CSS бързо ще се превърне в кошмар.

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

ти си бил там преди, нали?

Използвайте дефинирани струни с тире

Ако пишете много JavaScript, тогава писането на променливи в камилския случай е често срещана практика.

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

Страхотно, нали?

Проблемът е, че тази форма на именуване не е подходяща за CSS.

Не прави това:

.redBox {
  рамка: 1px плътно червено;
}

Вместо това направете това:

.red-box {
   рамка: 1px плътно червено;
}

Това е доста стандартна CSS конвенция за именуване. Тя може би е по-четена.

Също така, той е в съответствие с имената на свойствата CSS.

// Правилно
.some-class {
   шрифт-тегло: 10ем
}
// Грешно
.some-class {
   fontWeight: 10em
}

Конвенцията за именуване на BEM

Екипите имат различни подходи за писане на CSS селектори. Някои отбори използват разделители с дефис, докато други предпочитат да използват по-структурираната конвенция за именуване, наречена BEM.

Като цяло има 3 проблема, които CSS конвенциите за именуване се опитват да решат:

  1. За да знаете какво прави селектор, просто като погледнете името му
  2. За да имате представа къде може да се използва селектор, просто като го погледнете
  3. За да знаете връзките между имената на класове, само като ги погледнете

Виждали ли сте някога имена на класове, написани така:

.nav - вторичен {
  ...
}
.nav__header {
  ...
}

Това е конвенцията за именуване на BEM.

Обясняване на BEM на 5 годишна възраст

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

Разгледайте изображението по-долу:

Това е награден образ на стик-мъж :)

Не, не е печеливш :(

Човекът с пръчки представлява компонент, като например блок на дизайна.

Вероятно вече сте се досетили, че B в BEM означава „Блокиране“.

В реалния свят този „блок“ може да представлява навигация в сайта, заглавка, долен колонтитул или всеки друг дизайн на блок.

Следвайки практиката, обяснена по-горе, идеалното име на клас за този компонент би било човек-стик.

Компонентът трябва да бъде оформен така:

.stick-man {
  
 }

Тук сме използвали разграничени низове. Добре!

E за елементи

E в „BEM“ означава „Елементи“.

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

Например, човекът с пръчки има глава, две разкошни ръце и крака.

Главата, краката и ръцете са всички елементи в компонента. Те могат да се разглеждат като дъщерни компоненти, т.е. деца от цялостния родителски компонент.

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

Например:

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

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

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

Ами ако човекът с пръчки е модифициран и можем да имаме син или червен стик?

В реалния свят това може да е червен бутон или син бутон. Това са модификации на въпросния компонент.

С помощта на BEM имената на клас модификатор се получават чрез добавяне на две тирета, последвано от името на елемента.

Например:

.stick-man - син {
}
.stick-man - червен {
}

Последният пример показа, че родителският компонент се променя. Това не винаги е така.

Ами ако имахме мъже с пръчки с различни размери на главата?

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

.Stick-man представлява блока, .stick-man__head елемента.

Както се вижда в примера по-горе, двойните тирета също могат да се използват така:

.stick-man__head - малък {
}
.stick-man__head - голям {
}

Отново обърнете внимание на използването на двойните тирета в примера по-горе. Това се използва за означаване на модификатор.

Сега го имаш.

Ето как функционира конвенцията за именуване на BEM.

Лично аз съм склонен да използвам само имена на клас дефиметър на тирета за прости проекти и BEM за по-ангажирани потребителски интерфейси.

Можете да прочетете повече за BEM.

Защо да използваме конвенции за именуване?

В компютърните науки има само два трудни проблема: обезсилване на кеша и именуване на неща - Фил Карлтън

Името на нещата е трудно. Опитваме се да улесним нещата и да си спестим време в бъдеще с по-поддържан код.

Наименуването на нещата правилно в CSS ще направи вашия код по-лесен за четене и поддържане.

Ако решите да използвате BEM конвенцията за именуване, ще стане по-лесно да видите връзката между вашите дизайнерски компоненти / блокове, само като погледнете маркировката.

Чувствате се уверени?

CSS имена с JavaScript куки

Днес е първият работен ден на Джон.

Той му връчва HTML код, който изглежда така:

Джон е прочел тази статия и осъзнава, че това може да не е най-добрият начин да назовете нещата в CSS. Така той продължава напред и рефакторира кодовата база така:

Изглежда добре, а?

Неизвестен на Джон, той беше нарушил кодовата база

Как?

Някъде в JavaScript кода имаше връзка с името на предишния клас, siteNavigation:

// кодът на Javasript
const nav = document.querySelector ('. siteNavigation')

И така, с промяната в името на класа, променливата nav стана нула.

Колко тъжно.

За да предотвратят подобни случаи, разработчиците са измислили различни стратегии.

1. Използвайте имената на клас js

Един от начините за смекчаване на такива грешки е използването на име на клас js- * за обозначаване на връзка с въпросния DOM елемент.

Например:

И в JavaScript кода:

// кодът на Javasript
const nav = document.querySelector ('. js-site-navigation')

Като конвенция всеки, който види името на класа на js-site-navigation, ще разбере, че в JavaScript кода има връзка с този DOM елемент.

2. Използвайте атрибута Rel

Самият аз не използвам тази техника, но съм виждал хора да правят.

Признавате ли това?

По принцип атрибутът rel определя връзката, която свързаният ресурс има към документа, от който е референтен.

В предишния пример с Джон, привържениците на тази техника биха направили това:

И в JavaScript:

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

Съмнявам се в тази техника, но е вероятно да я срещнете в някои кодови бази. Твърдението тук е: „ами има връзка с Javascript, така че използвам атрибута rel, за да го обознача“.

Мрежата е голямо място с много различни „методи“ за решаване на един и същ проблем.

3. Не използвайте атрибути на данни

Някои разработчици използват атрибути на данни като куки за JavaScript. Това не е правилно По дефиниция атрибутите на данните се използват за съхранение на персонализирани данни.

Добро използване на атрибути на данни. Както се вижда в Twitter

Редактиране # 1: Както споменаха някои невероятни хора в секцията за коментари, ако хората използват атрибута „rel“, тогава може би е добре да използвате атрибути на данни в определени случаи. Това е вашето обаждане след това.

Съвет за бонус: Напишете още CSS коментари

Това няма нищо общо с конвенциите за именуване, но ще ви спести и известно време.

Въпреки че много уеб разработчици се опитват да НЕ пишат JavaScript коментари или да се придържат към няколко, мисля, че трябва да напишете още CSS коментари.

Тъй като CSS не е най-елегантният „език“, добре структурираните коментари могат да спестят време, когато се опитвате да разберете кода си.

Не боли

Разгледайте колко добре е коментиран изходният код на Bootstrap.

Не е необходимо да пишете коментари, за да кажете цвят: червеният ще даде червен цвят. Но ако използвате трик за CSS, който е по-малко очевиден, не се колебайте да напишете коментар.

Готови ли сте да станете Pro?

Създадох безплатно ръководство за CSS, за да получа вашите CSS умения пламващи веднага. Вземете безплатната електронна книга.

Седем CSS тайни, за които не сте знаели