При написании CSS кода часто возникает вопрос - какие названия давать классам элементов. Зачастую, это может занимать достаточно времени, ведь правильное именование классов css позволит не запутаться в коде и эффективней с ним работать. Ведь кому хочется потом изменять названия классов по несколько раз. Об этом и пойдет речь в данной статье - как назвать css-классы.

Называть классы по содержимому

Давать названия классам можно исходят из содержимого HTML-элементов, для которых эти классы будут использоваться. Например, если это класс для меню в нижней части сайта, то ему можно дать название класса .footer-menu. По такому имени уже ясно, что этот класс используется для оформления меню футера.

.footer-menu{
   background: #333;
}

Разделять классы через тире

Если в именах классов несколько слов, то для удобного чтения разделяйте эти слова через тире, как например, было в предыдущем примере с классом для меню в нижней части сайта: .footer-menu. При этом, не используйте для нескольких слов верблюжий стиль (CamelCase), так как это будет затруднять чтение слов и может запутать. 

Верблюжий регистр:

.footerMenu {
  background: #333;
}

Использование тире: 

.footer-menu{
   background: #333;
}

Количество слов в названии класса

Нужно придерживаться как можно меньшему количеству слов для имени класса. Максимум 3-4 слова для именования. Больше количество будет трудно поддерживать.

Префикс в именах классов

Давайте именам классов префиксы - в самом начале названия названия, которые по смыслу подходят для определения зачем используется элемент. Например, для классов, которые используются JavaScript, можно давать префиксы .js-, тем самым давая понять, что такие классы используют скрипты и их не следует удалять у элементов. Для элементов, которые используются в посте блога, можно задать префикс .blog- и в следующий раз в файле css нам уже понятно, что классы используются для оформления элементов блога. Для элементов, которые определяют состояние элемента - его наличие или активность, используйте префиксы has- или is-.

Возможно, вы как-то по другому называете классы элементов. Ждем от вас комментариев!