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

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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.
Но представьте себе такой набор размеров шрифта:

CSS $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. Мне кажется, что это одна переменная для каждого используемого элемента, а не шкала, и похоже, что это может вызвать много дублированного кода, если одно и то же значение используется в нескольких местах, но с разными именами.

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

CSS 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? В определенной степени это интуитивно понятно, если вы знакомы с метрической системой. Это конечный масштаб. И нет места для добавления новых размеров, потому что они уже установлены.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

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

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

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

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

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

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

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

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

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

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

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

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

CSS $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. Низкая оценка ремонтопригодности.

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

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

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

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

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

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

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

Автор: Martin Lexelius

Источник: webformyself.com