24.09.2021

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

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

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

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

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

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

CSS

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

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

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

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

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

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

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

CSS

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

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

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

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

CSS

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

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

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

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

Внедрение существующих систем

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

Интернациональная система единиц

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

Классические имена размеров

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

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

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

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

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

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

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

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

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

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

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

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

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

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

CSS

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

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

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

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

CSS

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

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

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

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

По материалам webformyself.com

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *