Разработчики часто затрудняются назвать классы CSS и идентификаторы. Следуйте этим рекомендациям для эффективного именования.
Соглашения об именах для классов и идентификаторов CSS играют важную роль в понимании и сопровождении кода в проекте JavaScript. Используемые имена могут повысить ясность, возможность повторного использования и гибкость кодовой базы. При именовании классов CSS и идентификаторов в проекте JavaScript важно следовать рекомендациям.
1. Используйте семантические имена
Выбор имен, которые точно объясняют функцию или назначение элемента, имеет решающее значение. Семантические имена обеспечивают осмысленный контекст и упрощают понимание кода.
Например, вместо использования традиционных имен, таких как коробка или держатель, попробуйте использовать такие имена, как заголовок или боковая панель которые отражают конкретную роль компонента.
/* Пример семантических имен */
.заголовок {}
.сайдбар {}
2. Используйте согласованные соглашения об именах
Согласованность является ключевым моментом при именовании классов и идентификаторов CSS. Использование одного и того же стандарта именования по всем направлениям упрощает поддержание структуры кодовой базы.
Соглашения об именовании BEM (модификатор блочного элемента) и OOCSS (объектно-ориентированный CSS) являются наиболее предпочтительными соглашениями об именовании.
Вы можете использовать соглашение об именах OOCSS для написания кода CSS, который является модульным, управляемым и масштабируемым. Вот иллюстрация того, как вы можете создать навигационное меню используя OOCSS:
/* Состав */.nav {
отображать: сгибаться;
стиль списка: никто;
}.nav__item {
край справа: 1бэр;
}.nav__ссылка {
украшение текста: никто;
цвет: #333;
}/* Появление */
.nav__ссылка:наведите {
украшение текста: подчеркнуть;
}
В этом примере у вас есть две отдельные части кода для меню навигации: одна для структуры и одна для внешнего вида. В разделе «Внешний вид» описываются цвета и другие стили, которые придают ему привлекательный вид, а в разделе «Структура» объясняется, как и где будут расположены пункты меню.
3. Избегайте пространств имен
В CSS пространства имен — это семантические структуры, которые позволяют вам предоставлять префикс пространства имен для их выбора. Чтобы различать модули, библиотеки или другие части кодовой базы, которые могут иметь конфликтующие имена классов, используется префикс пространства имен.
Однако эта функция полезна, но может вызвать проблемы со специфичностью и ремонтопригодностью.
Одним из самых больших недостатков пространств имен является сложность обработки специфичности селекторов. Префикс пространства имен может сделать выбор более конкретным, что затруднит переопределение стилей в будущем.
Это приводит к раздуванию кода CSS, что со временем сбивает с толку и затрудняет поддержку.
Возьмем, например:
/* С пространством имен */.мой-модуль.содержание {
фоновый цвет: синий;
}/* Без пространства имен */
.модуль-заголовок {
фоновый цвет: красный;
}.module-контент {
фоновый цвет: желтый;
}
Префикс пространства имен .мой-модуль и .содержание оба используются в основном блоке кода. В результате выбор становится более точным, что усложняет переопределение будущего стиля.
Во второй части пространство имен заменяется описательными именами классов. .модуль-заголовок и .module-контент. Это не только упрощает понимание кода, но и упрощает его обслуживание.
Использование пространств имен усложняет вашу программу, особенно когда много людей работают над разными частями одного и того же проекта. Вам может быть сложно понять и изменить код друг друга, поскольку разные команды могут использовать разные префиксы пространств имен.
Используйте описательные имена классов, например:
.заголовок {фоновый цвет: красный;
}
.содержание {
фоновый цвет: желтый;
}
Используя описательные имена классов, вы можете избавиться от требований к пространствам имен и сохранить свою кодовую базу хорошо структурированной и простой для понимания.
4. Избегайте глобальных имен
В проектах JavaScript очень важно избегать глобальных имен для классов и идентификаторов CSS. Глобальные имена усложняют обслуживание кода и повышают вероятность рисков, связанных с именами. Чтобы обеспечить более устойчивую и масштабируемую кодовую базу, рекомендуется использовать более точные имена в рамках компонента или модуля.
Рассмотрим пример ниже:
Неправильное использование глобальных имен<дивсорт="контейнер">
<дивсорт="боковая панель">Содержание здесь
див>
див>
Общие имена классов боковая панель и контейнер в приведенном выше примере подвержены конфликтам с другими таблицами стилей или кодом JavaScript внутри проекта. Например, если две таблицы стилей определяют один и тот же .сайдбар class, один с синим фоном, а другой с красным фоном, цвет боковой панели будет зависеть от того, какая таблица стилей загружается последней. Это может привести к неожиданным и непредсказуемым результатам.
Лучше использовать более точные имена, которые относятся к соответствующему компоненту или модулю, чтобы свести к минимуму эти проблемы.
Посмотрите расширенную версию.
Улучшено с конкретными именами<дивсорт="заголовок__контейнер">
<дивсорт="сайдбар__контент">Содержание здесь
див>
див>
В измененной версии имена классов заголовок__контейнер и боковая панель__контент проясните, для чего нужен каждый элемент и что он делает.
Использование конкретных имен снижает риск конфликтов имен и гарантирует, что стили влияют только на ожидаемые компоненты внутри соответствующих компонентов или модулей.
5. Использовать соглашение об именах БЭМ
Соглашение об именовании BEM (Block Element Modifier) популярно для именования классов CSS и идентификаторов в проектах JavaScript. БЭМ обеспечивает структурированный и модульный способ именования элементов, способствует повторному использованию и упрощает поддержку кодовых баз.
Соглашения БЭМ состоят из блоков, элементов и модификаторов. Элемент высокого уровня или автономный компонент называется блоком. Элементы — это составные части блока, зависящие от контекста блока. Модификаторы могут изменить внешний вид или поведение блока или элемента.
Вот пример использования соглашения об именах БЭМ:
/* Пример соглашения об именах БЭМ *//* Блокировать */
.заголовок {}/* Элемент блока */
.логотип заголовка {}
.header__menu {}
/* Модификатор элемента */
.header__menu — активно {}
На приведенной выше иллюстрации показан заголовок блок с логотип и меню элемент. меню элемент получает активный изменить, чтобы показать, что он стал активным.
Вы можете быстро идентифицировать основные компоненты и связи между различными частями, делая структуру и иерархию кодовой базы более ясной.
6. Используйте префиксы или суффиксы
Вы можете добавить дополнительные параметры к именам классов и идентификаторов CSS, добавив к ним префикс или постфикс, особенно в больших проектах. Вы можете использовать префикс, например js- чтобы указать, что класс или идентификатор предлагает возможности JavaScript. Соглашения об именах JavaScript в сочетании с этими соглашениями об именах CSS могут сэкономить ваше время и усилия в долгосрочной перспективе.
HTML с префиксом JavaScript<кнопкасорт="js-переключить">Переключатькнопка>
<дивидентификатор="js-модальный">Модальныйдив>
7. Используйте описательные имена
Вы можете лучше понять назначение, функцию или содержание элемента с помощью описательных имен.
Рассмотрим пример ниже:
/* Неописательные имена */.синяя коробка {
/* Здесь стили */
}
а {
/* Здесь стили */
}
Имена классов синий ящик и а в приведенном выше примере не передают соответствующей информации о компонентах, на которые они ссылаются. Отсутствие описательного именования может затруднить быстрое понимание целей или ролей определенных компонентов внутри программы.
Используйте описательные имена, которые точно объясняют роль элемента для улучшить читаемость и ремонтопригодность кода.
Рассмотрим улучшенный пример ниже:
/* Описательные имена */.карточка продукта {
/* Здесь стили */
}
.навигационная ссылка {
/* Здесь стили */
}
Имена классов карточка товара и навигационная ссылка в обновленной версии сделать очевидным, для какой цели служит каждый элемент. Вы обнаружите, что изучение и редактирование кода проще с этими описательными именами.
Использование описательных имен приносит пользу нынешним и потенциальным будущим разработчикам, работающим над кодовой базой. При повторном просмотре кода через некоторое время вы можете легко понять структуру и работу частей.
8. Используйте короткие и лаконичные имена
Несмотря на то, что отличительные имена необходимы, также важно, чтобы они были краткими. Длинные имена классов и идентификаторов могут затруднить чтение и сопровождение кода. Постарайтесь найти баланс между краткостью и детализацией. Кроме того, рассмотрите возможность использования общеизвестных сокращений или сокращений в контексте проекта.
Рассмотрим случай, когда вы хотите использовать CSS для настройки меню навигации на своем веб-сайте. Вы можете использовать более короткие и конкретные имена, например элемент навигации или навигационная ссылка вместо длинных, как навигационный интерфейс или основная навигационная ссылка.
.nav-элемент {
/* Стили для пунктов меню навигации */
}
.nav-ссылка {
/* Стили для навигационных ссылок */
}
Использование сокращений или популярных сокращений в контексте проекта, таких как навигация для навигация, может сделать код более понятным для других программистов.
Рекомендации по именованию классов и идентификаторов CSS
В проекте JavaScript очень важно правильно называть классы CSS и идентификаторы для удобочитаемости кода, обслуживания и масштабируемости.
Вы можете упростить таблицы стилей и улучшить качество кода. Время, потраченное на установление хороших соглашений об именах, окупится в долгосрочной перспективе, поскольку вам и другим будет легче понять и поддерживать кодовую базу.
