Главная » Статьи » Дилемма наименования переменных размера шрифта

Дилемма наименования переменных размера шрифта

Дилемма наименования переменных размера шрифта

От автора: как правило, проект имеет набор заранее определенных размеров шрифта, обычно в виде переменных, названных таким образом, чтобы добиться некоторого подобия порядка и согласованности. Любой проект значительного размера может использовать что-то подобное. Всегда есть заголовки, абзацы, списки и т. д. Вы можете явно устанавливать размеры шрифта (например font-size: 18px). Сырой CSS как бы. Я действительно встречаю это время от времени — смешивание не только размеров, но и единиц px, rem и em в бессмысленном хаосе.

Вот почему CSS проекты обычно используют переменные или миксины — мы стремимся к структуре, удобству обслуживания и, в конечном счете, согласованности. Все мы знаем, что присвоение имен — это сложная задача, и чтобы понять, почему это так, достаточно просто присвоить имена переменным размера шрифта. Как мы должны назвать переменную маленького размера шрифта, чтобы было ясно, что она меньше, чем переменная большого размера? И что произойдет, если нам нужно вставить новую переменную между ними — имеет ли она имя, ясно объясняющее ее связь с другими переменными размера?

В этом посте мы продолжим говорить об именах переменных размера шрифта. Но на самом деле проблема распространяется не только на размер шрифта, но и на любое значение размера или длины. Подумайте об отступах, полях, ширине, высоте, радиусе границ и т. д. Этим вещам также нужна структура и согласованность!

Как вы определяете размер шрифта в своем проекте? С пользовательскими переменными это выглядит примерно так:

:root { /* Font size variables */ --small: 12px; --medium: 16px; --large: 24px;
}

Или, возможно, вы могли бы иметь переменные размеров $small, $medium и $large.

Отлично. Через некоторое время, допустим, дизайнер добавляет новый заголовок h1 для hero-раздела. И он очень большой. Больше, чем все, что у вас есть в проекте. Нет проблем, отвечаете вы. Вы добавляете $xlarge в проект и все в порядке.

На следующий день дизайнер делает красивую форму, которая снова имеет новый размер шрифта. Однако этот новый размер больше маленького, но меньше среднего.

Дилемма наименования переменных размера шрифта

Вот так. Как его назвать? $small-medium? $small-2? $smedium? Как бы вы это ни называли, вам это не понравится. Потому что для него нет подходящего названия.

Или, может быть, вам стоит реорганизовать проект? Создать новый $xsmall и изменить все экземпляры $small на $xsmall? А потом можно использовать $small для формы? Есть небольшой риск, что вы забудете где-то поменять и, получите ошибку. Что произойдет в следующий раз, когда будет введено новое значение переменной, немного большее, чем $medium? Должны ли мы реорганизовать $large и $xlarge тоже?

Я предлагаю всегда придерживаться шкалы. Простым решением было бы дальнейшее абстрагирование, возможно, отказавшись от чисел и размеров в пользу функциональных имен, например, $form-label вместо $small-2 или $xsmall.
Но представьте себе такой набор размеров шрифта:

$small: 12px;
$form-label: 14px;
$medium: 16px;
$large: 24px;

Это сломанная шкала. Это концепция размера и концепция компонентов, смешанные вместе. Она вызывает вопросы. Следует ли для элемента предупреждения или кнопки разрешить использование $form-label?

Может быть, у вас есть грек, называющий переменные $alpha, $beta, $gamma? Тогда позвольте мне спросить вас, что тогда больше $alpha? $alpha-large? Или $alpha — это самый маленький размер?

Я также видел такие имена, как $button-font-size, $label-font-size, $blockquote-font-size. Мне кажется, что это одна переменная для каждого используемого элемента, а не шкала, и похоже, что это может вызвать много дублированного кода, если одно и то же значение используется в нескольких местах, но с разными именами.

Возможно, вы работаете только с одним базовым размером шрифта и процентами? Конечно, но я бы сказал, что вам нужны переменные для процентов. Вот как Джефф работает с размерами шрифта, и даже он признает, что такая настройка вызывает у него замешательство. Вычисления с субъективно названными переменными могут быть понятны вам, но выглядят сумасшедшими и сложными для всех, кто начинает работать над проектом.

h1 { font-size: clamp(var(--text-size-large), calc(var(--text-size-base) * var(--text-size-scaler)), var(--text-size-huge));
}

Нам нужна лучшая система

Постоянное добавление и удаление компонентов — это то, как мы хотим работать. Это современная разработка.

Нам нужен синтаксис шкалы, который позволяет вносить изменения. Добавление нового размера к шкале должно быть простым без внесения критических изменений. Я думаю о гибкой и бесконечной шкале . Она должна быть более сложной, чем $small, $medium и $large.

Она также должна быть образной и интуитивно понятной. Желательно, чтобы вам не приходилось искать имена переменных в файле настроек или конфигурации или где бы вы ни хранили эти вещи. Я не имею ни малейшего понятия, будет ли $epsilon до или после $sigma. А вы?

Использование существующих систем

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

Международная система единиц

Конечно, вы знакомы с такими терминами, как «килобайт» и «мегабайт». Европейцы очень привыкли к «миллиметру» и «сантиметру». Другими примерами являются «гига», «тера» и «пета». Эти префиксы могут использоваться для длины, веса, объема и т. д. Почему бы не назвать размер шрифта $centi? В определенной степени это интуитивно понятно, если вы знакомы с метрической системой. Это конечный масштаб. И нет места для добавления новых размеров, потому что они уже установлены.

Традиционные имена размеров

Задолго до компьютеров, книги и газеты печатались заглавными буквами. Наборщики текста имели разные названия для разных размеров.

Размеры шрифта в этой системе называются «Nonpareil», «Pica», «Cicero» и «Great Primer», и это лишь некоторые из них. Имена разные в зависимости от континента и страны. Кроме того, одно и то же имя может иметь разные размеры, что… довольно запутанно.

Тем не менее, мне нравится эта система в некотором смысле, потому что это было бы похоже на проявление уважения к старинному мастерству прошлых времен. Но имена настолько странные и специально предназначены для определения размера шрифта, что кажется сложно использовать их для таких вещей, как брейкпоинты и интервалы.

Размещение предметов повседневного обихода

Как насчет того, чтобы использовать вещи из повседневной жизни? Скажем, перец чили.

Дилемма наименования переменных размера шрифта

Есть много видов перца чили. The $habanero, горячее, чем $cayenne, который горячее, чем $jalapeno. Было бы весело, да?

Но как бы мне ни нравилась идея писать font-size: $tabasco, я вижу две проблемы. Если вы не любите перец, вы можете не знать, какой перец острее другого, так что это не всегда интуитивно понятно. Кроме того, болгарский перец равен 0 по шкале Сковилла, и ниже его ничего нет. Перец Carolina — самый острый перец в мире, и на этом масштаб окончен.

И да, перец по шкале не больше и не меньше, он острее. Плохая концепция. Может быть, что-то более распространенное, например, виды мячей?

Дилемма наименования переменных размера шрифта

Есть большой выбор различных видов мячей. У вас есть гандбольный, футбольный мячи, волейбольный мяч и т. д. Вам нужно что-то большее, чем мяч размера medicine? Используйте $beach. Что-то меньше теннисного мяча? Используйте $pingpong. Это очень интуитивно понятно, так как я предполагаю, что все в какой-то момент играли всевозможными мячами или, по крайней мере, знакомы с ними из спорта.

Но разве мяч для пинг-понга больше мяча для гольфа? Кто знает? Кроме того, шар для боулинга и футбольный мяч на самом деле имеют одинаковый размер. Итак … опять же, не идеально.

Масштабирование до планет может сработать, но вы должны быть хорошо осведомлены в астрономии.

Как насчет прямых чисел? Мы не можем использовать только числа, потому что такие инструменты, как stylelinter, запрещают делать это. Но нам нужно что-то вроде этого:

$font-14: 14px;
$font-16: 16px;
$font-24: 24px;

Что ж, это бесконечно, ведь всегда есть место для новых дополнений. Но это также невероятно специфично, но у того, что фактическое значение является частью такого имени, есть некоторые недостатки. Предположим, $font-18 используется во многих местах. А теперь, мол, все места с 18px надо поменять на 19px. Теперь нам нужно переименовать переменную из $font-18 в $font-19, а затем изменить значение $font-19 из 18px на 19px. И наконец, обновить все места, где используется $font-18 на $font-19. Это почти похоже на использование необработанного CSS. Низкая оценка ремонтопригодности.

А что насчет царства животных?

Дилемма наименования переменных размера шрифта

Мать-природа создала на этой Земле бесчисленное множество видов, что очень пригодится в этой ситуации. Представьте себе что-то вроде этого:

$mouse: 12px;
$dog: 16px;
$hippo: 24px;

Вам нужно что-то меньшее, чем мышь? Используйте $bee, $ant или $flea. Больше медведя? Попробуйте $moose или $hippo. Больше слона? Ну, у вас есть $whale, или, черт возьми, мы можем пойти в доисторическую эпоху и использовать $t-rex. Здесь всегда есть какое-то животное, которое можно втиснуть. Очень универсальный, интуитивно понятный, а также почти бесконечный подход. И веселье тоже — я бы не отказался font-size: $squirrel.

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

Я потратил слишком много времени на размышления об этом

Кодовая база — это то место, где вы проводите свое рабочее время. Это ваша рабочая среда, как стулья и мониторы. А рабочее место должно быть красивым.

Автор: Martin Lexelius

Источник: css-tricks.com

Редакция: Команда webformyself.

Читайте нас в Telegram, VK, Яндекс.Дзен