Разработчиците често се затрудняват с наименуването на CSS класове и идентификатори. Следвайте тези най-добри практики за ефективно именуване.

Конвенциите за именуване на CSS класове и идентификатори имат важна роля за разбирането и поддържането на кода в JavaScript проект. Използваните имена могат да подобрят яснотата, повторното използване и гъвкавостта на кодовата база. Следването на най-добрите практики е важно, когато наименувате CSS класове и идентификатори в JavaScript проект.

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

Изборът на имена, които точно обясняват функцията или целта на елемента, е от решаващо значение. Семантичните имена осигуряват смислен контекст и правят кода по-лесен за разбиране.

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

/* Пример за семантични имена */
.заглавие {}
.странична лента {}

2. Използвайте последователни конвенции за именуване

Последователността е ключова при именуване на CSS класове и идентификатори. Използването на един и същ стандарт за именуване навсякъде улеснява поддържането на структурата на кодовата база.

instagram viewer

BEM (Block Element Modifier) ​​и OOCSS (Object-Oriented CSS) конвенции за именуване са най-предпочитаните конвенции за именуване.

Можете да използвате конвенцията за именуване на OOCSS, за да напишете CSS код, който е модулен, управляем и мащабируем. Ето илюстрация как можете създайте меню за навигация използвайки OOCSS:

/* Структура */
.nav {
дисплей: flex;
стил на списък: нито един;
}


.nav__item {
margin-right: 1рем;
}


.nav__link {
текст-украса: нито един;
цвят: #333;
}


/* Външен вид */


.nav__link:задръжте {
текст-украса: подчертавам;
}

Имате две отделни части от кода за навигационното меню в този пример, една за структурата и една за външния вид. Частта за външен вид описва цветовете и другите стилове, които му придават привлекателен външен вид, докато секцията за структурата обяснява как и къде ще бъдат позиционирани елементите от менюто.

3. Избягвайте пространства от имена

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

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

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

Това води до раздуване на CSS кода, което е объркващо и предизвикателно за поддържане във времето.

Вземете например:

/* С пространство от имена */
.my-module.съдържание {
Цвят на фона: син;
}


/* Без пространство от имена */


.module-header {
Цвят на фона: червен;
}


.модул-съдържание {
Цвят на фона: жълто;
}

Префиксът на пространството от имена .my-module и .съдържание и двете се използват в основния блок код. В резултат на това селекцията става по-прецизна, което прави бъдещия стил по-предизвикателен.

Във втората част пространството от имена е заменено с описателни имена на класове .module-header и .модул-съдържание. Освен че прави кода по-лесен за разбиране, това го прави и по-лесен за поддръжка.

Използването на пространства от имена добавя ненужна сложност към вашата програма, особено когато много хора работят върху различни части на един и същи проект. Може да ви е трудно да разберете и да промените кода на другия, тъй като различните екипи могат да използват различни префикси на пространството от имена.

Използвайте имена на класове, които са описателни, например:

.заглавие {
Цвят на фона: червен;


}


.съдържание {


Цвят на фона: жълто;
}

Като използвате описателни имена на класове, можете да премахнете изискването за пространства от имена и можете да поддържате вашата кодова база добре структурирана и лесна за разбиране.

4. Избягвайте глобалните имена

В JavaScript проектите избягването на глобални имена за CSS класове и идентификатори е критично. Глобалните имена усложняват поддръжката на кода и увеличават възможността от рискове при именуване. За да осигурите по-трайна и мащабируема кодова база, добре е да използвате по-точни имена в обхвата на компонент или модул.

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

 Неправилно използване на глобални имена 
<дивклас="контейнер">
<дивклас="странична лента">


 Съдържание тук 
див>
див>

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

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

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

 Подобрен с конкретни имена 
<дивклас="header__container">
<дивклас="странична лента__съдържание">


 Съдържание тук 
див>
див>

В променената версия имената на класовете заглавие__контейнер и странична лента__съдържание изяснете за какво служи всеки елемент и какво прави.

Използването на конкретни имена намалява риска от конфликти при именуване и гарантира, че стиловете засягат само очакваните компоненти в съответните им компоненти или модули.

5. Използвайте конвенцията за именуване на BEM

BEM (Block Element Modifier) ​​конвенцията за именуване е популярна за именуване на CSS класове и идентификатори в JavaScript проекти. BEM предоставя структуриран и модулен начин за именуване на елементи, насърчава повторната употреба и улеснява поддържането на кодови бази.

BEM конвенциите се състоят от блокове, елементи и модификатори. Елемент от високо ниво или самостоятелен компонент се нарича блок. Елементите са съставни части на блок, които разчитат на контекста на блока. Модификаторите могат да променят външния вид или поведението на блок или елемент.

Ето пример с използване на конвенцията за именуване BEM:

/* Пример за конвенция за именуване на BEM */
/* Блокиране */
.заглавие {} 


/* Елемент от блока */
.header__logo {} 
.header__menu {}
/* Модификатор на елемента */
.header__menu--активно {}

Горната илюстрация показва a заглавка блок с a лого и а меню елемент. The меню артикулът получава активен промяна, за да покаже, че е станал активен.

Можете бързо да идентифицирате основните компоненти и връзките между различните части, правейки структурата и йерархията на кодовата база по-ясни.

6. Използвайте префикси или суфикси

Можете да добавите допълнителни настройки към имена на CSS класове и идентификатори, като ги префиксирате или постфиксирате, особено в по-големи проекти. Можете да използвате префикс като js- за да посочите, че даден клас или идентификатор предлага възможности на JavaScript. Конвенции за именуване на JavaScript заедно с тези CSS конвенции за именуване може да ви спести време и усилия в дългосрочен план.

 HTML с JavaScript префикс 
<бутонклас="js-превключване">Превключванебутон>
<дивдокумент за самоличност="js-modal">Модалендив>

7. Използвайте описателни имена

Можете да разберете по-добре предназначението, функцията или съдържанието на даден елемент чрез описателни имена.

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

/* Неописателни имена */
.синя кутия {
/* Стилове тук */
}
а {
/* Стилове тук */
}

Имената на класовете синя кутия и а в примера по-горе не предават подходяща информация за компонентите, които препращат. Липсата на описателно именуване може да ви затрудни бързото разбиране на целите или ролите на определени компоненти в програмата.

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

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

/* Описателни имена */
.продуктова карта {
/* Стилове тук */
}
.navigation-link {
/* Стилове тук */
}

Имената на класовете продуктова карта и навигационна връзка в актуализираната версия да стане ясно каква е целта на всеки елемент. Ще намерите по-лесно изследване и редактиране на кода с тези описателни имена.

Използването на описателни имена е от полза за настоящите и потенциалните бъдещи разработчици, работещи върху кодовата база. Когато прегледате отново кода след известно време, можете лесно да разберете структурата и работата на частите.

8. Използвайте кратки и стегнати имена

Въпреки че отличителните имена са от съществено значение, поддържането им кратки също е важно. Дългите имена на класове и ID могат да направят кода по-труден за четене и поддръжка. Опитайте се да намерите баланс между това да бъдете кратки и да сте подробни. Освен това, обмислете използването на добре познати акроними или съкращения в контекста на проекта.

Помислете за случая, в който искате да използвате CSS, за да персонализирате навигационно меню на вашия уебсайт. Можете да използвате по-кратки, по-конкретни имена като навигационен елемент или навигационна връзка вместо дълги като навигационен интерфейс или главна-навигационна-връзка.

.nav-елемент {
/* Стилове за елементи от менюто за навигация */
}
.nav-връзка {
/* Стилове за навигационни връзки */
}

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

Най-добри практики за именуване на CSS класове и идентификатори

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

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