При написании 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-.
Возможно, вы как-то по другому называете классы элементов. Ждем от вас комментариев!
А как насчет БЭМ методологии, где все уже в правильном порядке расставлено в css.
В некоторых случаях указывают как раз все наоборот. На как правило, это лишь в легаси коде встречал. Но было и несколько новых проектов, где такое творили, что беда.
Хорошая подборка советов, спасибо.