Как правильно назвать класс
Допустим есть базовый шрифт, который задан для body размером 14px. Есть ссылки, которые в большинстве случаев аналогичного размера, но встречаются места где такие же ссылки, отличаются только размером, т.е не 14px, а 12 или 16. Вопрос, как более правильно им давать класс? ведь надо давать класс из-за одного свойства всего лишь. Правильно ли дать класс .fs12 / .fs16? или link-small / link-large? И второй вопрос, лучше задать конкретно ссылкам класс, или может отталкиваясь от блока родителя задавать ссылке класс? к примеру так .block-parent a {font-size: 12px;}?
Ответы (3 шт):
Однозначно ответить нельзя. Есть разные подходы и ситуации. Обычно есть какой-то компромисс и решение не идеальное с разных точек зрения. Бывает есть гайдлайны и там описаны все размеры и где они применяются, оттуда можно выделить классы. Чаще всего, особенно на фрилансе, всё это на усмотрение верстальщика, и выбор не сходится у разных людей. Из-за разного опыта или разной аргументации. Может быть например так:
- По умолчанию ссылка может брать размер от окружающего текста. Поэтому не следует задавать ссылкам размер для всего документа.
- Если по дизайну можно выделить постоянно повторяющийся размер текста, то можно сделать класс для него, не только для ссылок. Назвать лучше не числом, а словом типа
text-smallилиtext-middle, потому что число может измениться в будущем или на других размерах экранов (мобильники/телевизоры) в медиазапросах для данного класса. Вместоlink-smallобычно лучшеtext-small. Классfs16из вашего вопроса - это точно не правильно. Потому что вы через месяц или другой человек могут не понять что это значит. - Если у ссылки можно определить какое-то предназначение, то лучше сделать класс предназначения, и в нём уже описывать особенности. включая размер. Например для тегов под постом класс
post-tagи в нём размер. - Если блок ссылок имеет какое-то особое назначение, например блок тегов, то селектор со стилем ссылки может отталкиваться от родителя, как вы описали в конце вопроса.
Все перечисленные варианты правильны, т.к. все они валидны с точки зрения синтаксиса CSS... а других правил не существует.
Говоря не о правильности, но о хороших практиках в верстке... и не только в контексте вопроса, а о том что касается именования в целом:
- Читать
имена-с-разделителямигораздо легче, чемименабезразделителей, и особенно когда в именах используются числа - Имя утилити-класса логически должно соответствовать общему назначению, оно не должно быть привязано по смыслу к каким-то частным случаям применения
(что если нужно будет еще и параграфу уменьшить шрифт?.. добавим ему нелогичный класс.link-small, или внесем еще один класс.paragraph-small? Все это как-то неуклюже и неудобно... гораздо лучше, когда класс изначально назван как.font-small, например) - Имена по сущности, должны описывать именно сущность (например,
.receipt-link), а не ее визуальные свойства / зависимость / тип элемента / и т.д.
(насчет типа спорно, т.к. есть распространенное мнение что например.linkлучше чемaв плане специфичности... но сторонники такого мнения почему-то не могут внятно объяснить зачем же создавать в стилях такие серьезные проблемы приоритета, которые вынуждают повышать специфичность базовых стилей "зеркаля" типы элементов классами) - Имена характеризующих свойств желательно переиспользовать, если они применимы к нескольким сущностям
(например, вместо.menu-item-activeи.invoice-form-activeиспользовать.menu-item.activeи.invoice-form.active- добавляя класс используемый только вместе с классом какой-либо сущности, но не сам по себе) - Именование по сущности/характеристике предпочтительнее именования по значению
(потому что если придется менять значения свойств - то придется менять и имена классов, например подобное будет с.fs-12... тогда как с характеризующим именем, например с тем же.font-small, переименований не потребуется)
лучше задать конкретно ссылкам класс, или может отталкиваясь от блока родителя задавать ссылке класс?
Вопросы такого рода уже не совсем об именах, они больше о методах организации стилей...
Если на уровне частного мнения, то я бы посоветовал использовать утилити-классы размера шрифта (типа .font-{size}) редко и точечно, на "особых" ссылках которые являются исключением из правил - а в большинстве остальных случаев, при зависимости от "места использования", применять селектор с комбинатором потомка (то есть, в контексте той сущности, к которой относятся ссылки).
Вот представь, что у тебя есть компонент "уведомление", в котором находится некий текст со ссылками на разделы сайта, плюс в нижней части уведомления еще содержатся ссылки с контактными данными (mailto:). Добавлять каждой из ссылок утилити-класс будет менее удобно, чем сначала описать общие стили ссылок в этом компоненте (.notification a) и затем лишь уточнить их для "подвида" контактных ссылок (.notification .contacts)... ведь это схожие элементы - при грамотном дизайне, многие стили у них будут одинаковы. А еще, утилити-классы обманчиво удобны и поэтому имеют тенденцию разрастаться: в один прекрасный момент, ты можешь обнаружить себя выстраивающим целые поезда из классов, типа class="underline-dashed font-small has-icon icon-left color-darkgreen hover-fade {еще десяток классов}" - это безусловно жесть, которую трудно читать и поддерживать (т.к. вспомогательные классы предполагают !important, а это ведет к проблемам приоритета).
Оффтопы:
// Пожалуйста, пожалуйста, не именуй классы как .{*}block{*}: мало того что этот фрагмент никак не описывают именуемое, он еще и прочно ассоциируется с низкой технической грамотностью: когда у веб-специалиста в разметке и речи только «блёк, блёк» - о нем может сложиться негативное мнение (появляются сомнения насчет того, отличает ли он блок от html-элемента и структурного компонента страницы, понимает ли верстку в принципе, и т.д.).
// Еще, маленький совет относительно значений: в размерах шрифтов, вместо px лучше использовать rem или em (для того чтобы они масштабировались от "базового" размера шрифта браузера либо родителя). И не стоит указывать размер шрифта в стилях body - так ты делаешь неэффективной соотв. настройку браузера, а пользователей весьма раздражает необходимость вручную менять масштаб.
Используйте LESS/SASS, создайте переменные, типа fs-12, fs-14, fs-16 (font-size:12px;) и используйте где угодно. Плодить классы под каждую сущность с одинаковыми стилями это верх извращения.