Comments 15
Необходимость в таком нестандартном селекторе
[class*="static-font"]обоснована тем
C ходу не могу понять необходимости селектора атрибута вместо обычного селектора класса. Почему не .static-font { } ?
Ниже описан селектор static-font__M, который уже внутри себя имеет реализованные переменные для виртуальных переменных "миксина"
Вы не ответили на вопрос. Что мешает использовать простой селектор класса для описания "миксина"?
Иначе придётся реализовывать в каждом классе типо static-font__XL, static-font__L, static-font__M, static-font__S и тд. :
--_font-size: var(--font-size, 1em);
--_line-height: var(--line-height, calc(var(--_font-size) + 4px));
font-size: var(--_font-size);
line-height: var(--_line-height);В кратце - для более лаконичного использования атомарного класса
сделать по-настоящему "резиновый" шрифт – при изменении размера экрана динамически меняется размер текста
И такой подход себя оправдывает?
Я предпочитаю каждый блок смотреть в процессе относительно всех брейкоинтов, подгоняя где размером, где геометрией.
Соглашусь, дизайнерам не всегда получается вписаться в рамки 10 шрифтов. Но в случае когда надо в конкретном месте подменить некоторые показатели шрифта, это можно легко сделать CSS переменными прямо по селектору тега, на который навесили static-font__M
В статье есть похожий пример с цветом текста:
.my-text {
--color: #F00;
}
Непонятно, зачем все эти сложности с line-height и прибавляемой дельтой вместо простого безразмерного множителя.
Соглашусь, зачастую дизайнеры выставляют достаточно строго разницу между font-size и line-height. Но случаются случаи когда необходимо увеличить или наоборот уменьшить line-height:
Буквально недавно мы разговаривали с нашим лидом дизайна по поводу этого шрифта для кнопок – им было необходимо, чтобы font-size сохранился, но line-height был 26px.
Относительно применения дельты, которую вы предложили – я пытался применить этот подход, но на практике он оказался неудобным, потому что в Figma line-height указан в конкретном значении и для указания значения дельты нужно делать доп услилие высчитывая её. В данном вопросе я придерживаюсь jobs to be done, чтобы сторонний разработчик просто скопировал значения из Figma и всё работало.
зачастую дизайнеры выставляют достаточно строго разницу между
font-sizeиline-height
Это какой-то домысел, никто разницу не делает.
В реальности есть два подхода:
1. Высота строки привязывается к кеглю множителем, например line-height: 1.5;
2. Высота строки фиксируется в конкретном значении, например line-height: 24px; – в частности, этот вариант полезен, когда высота строки должна быть кратна какой-то сетке, например 8-пиксельной. Но это не фиксированная дельта.
Карточный домик стилизации без чистого CSS. Часть 1