Принципы именования классов CSS

Визуально, современные веб-страницы представляют собой сложный набор различных элементов — кнопки, иконки, изображения, элементы управления и др.

Грамотная вёрстка таких страниц должна решить множество возникающих проблем:

  • быстрая загрузка страницы при низкоскоростном соединении;
  • однообразное отображение страницы в различных браузерах;
  • корректное отображение страницы на устройствах с различным разрешением экрана;
  • масштабируемость проекта (возможность использования отдельных элементов для дальнейшего улучшения страницы в целом);
  • удобство чтения кода.

В современной вёрстке повсеместно применяются классы. Различные способы их именования позволяют упростить жизнь frontend-разработчику.

Общие рекомендации

К именам классов в CSS предъявляется несколько простых требований:

  • имя класса должно начинаться с латинской буквы;
  • имя класса может содержать цифры;
  • имя класса может содержать символ подчёркивания [ _ ] или дефиса [ — ];
  • имя класса чувствительно к регистру;
  • имя класса не может содержать кириллические символы.

Это открывает большой простор для выбора имён классов. И основной рекомендацией к выбору имени класса является возможность быстро понять назначение класса, не переходя к просмотру кода HTML-файла.

Улучшение именования

Независимо от того, какой метод именования выбирается, самое важное — придерживаться его во всех своих проектах и не смешивать в одном проекте различные методы.

На данный момент frontend-разработчики могут придерживаться следующих систем именования:

  1. БЭМ (блок-элемент-модификатор)

В данном случае весь дизайн страницы разбивается на блоки, которым присваиваются классы. Каждый класс может содержать в себе элементы — это составные части блока (кнопки, заголовки, поля и т.д.) и другие классы. Кроме того, если элементы изменяются незначительно — цвет, вид или размер шрифта и др., то вместо создания новых элементов используются модификаторы существующих. Вот общие правила именования сущностей HTML с учетом БЭМ.

имя-класса__имя-элемента

имя-класса__имя-элемента—название-модификатора

При этом, необходимо учитывать, что комментирование таких классов приводит к нарушению валидации HTML2. Это происходит из-за того, что двойной дефис “—” воспринимается как часть комментария в комментарии.

  1. MoBE (module-block-element)

Этот вариант отличается заменой понятия “Блок” на “Модуль” и вкладываем в него другого смысла. Именование классов для этого метода будет выглядеть следующим образом:

имя-модуля__имя-блока

Автоматизация создания файлов CSS

После того, как имена блоков, элементов и их модификаторов выбраны, а структура HTML создана, возникает необходимость в переносе названий классов в CSS-файлы.

В особо печальных случаях к этому времени сайт уже наполняется контентом.

При ручном методе, название каждого класса копируется из HTML-файла и вставляется в CSS-файл. При этом, перед названием класса нужно напечатать точку и добавить после названия класса структуру из фигурных скобок. Это очень нерационально расходует время frontend-разработчика. Для автоматизации таких действий рекомендуется использовать расширения современных IDE.

Использование расширения CSSFier для Brackets

Для IDE Brackets, задачу автоматического создания структуры CSS-файла решает расширение CSSFier. Суть его работы заключается в следующем:

  1. После создания структуры HTML-файла, участок разметки, для которого нужно создать список стилей, копируется (Ctrl+C);
  2. Перед вставкой текста в CSS-файл из него удаляются все тэги и контент. Остаются только названия классов;
  3. Перед названием каждого класса вставляется точка, а после названия — фигурные скобки {}.

После этого остаётся только заполнить классы свойствами.

Расширение можно скачать по адресу:

https://github.com/rcaferati/brackets-cssfier

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.