Обычно проект будет иметь набор заранее определенных размеров шрифтов, обычно как переменные, названные таким образом, что ищет некоторое подобие порядка и согласованности. Любой проект значительного размера может использовать что -то подобное. Всегда есть заголовки, параграфы, списки и т. Д. Вы могли установить размеры шрифтов явно и непосредственно везде (например, размер шрифта: 18px). Сырой CSS, как бы. Я иногда вижу это - смешивая не только размеры, но и такие подразделения, как PX, REM и EM в бездумном хаосе.

]

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

]

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

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

]

:корень { / * Переменные размера шрифта */ --small: 12px; -Медиум: 16px; -Большой: 24px; }

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

или, возможно, в SASS (что мы будем использовать на протяжении всей этой статьи) У вас могут быть переменные для маленьких, $ Medium и $ больших размеров шрифтов.

]

Отлично. Через некоторое время, скажем, дизайнер добавляет новый

, направляющийся в раздел героев. И это

очень большой. Больше всего, что у вас есть в проекте. Нет проблем, вы отвечаете. Вы добавляете $ xlarge в проект и проводите свой день. ]

на следующий день дизайнер делает хорошую метку формы, которая снова имеет новый размер шрифта. Этот новый размер, тем не менее, больше, чем маленький, но меньший, чем средний.

]

Вот так.

как это должно это назвать? $ Small-Medium? $ small-2? $ smedium? Как бы вы ни называли, вы не будете довольны этим. Потому что для этого нет слова.

]

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

]

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

]

, но представьте, что у вас есть набор размеров шрифтов, подобных этим:

]

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

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

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

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

small один? ]

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

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

]

H1 { размер шрифта: зажимать (var (--large), Calc (var (--база размера текста) * var (-Scaler-Scaler)), var (-text-size-huge)); }

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

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

]

Добавление и удаление материала

постоянно - это способ, которым мы хотим для работы. Это современное развитие - MVP , Agile, и все остальные горячие модные слова. ]

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

гибкий и Infinite . Он должен быть более изощренным, чем $ маленький, $ Medium и $ большой. ]

это также должно быть

descriptive и интуитивно . Предпочтительно, вам не нужно искать имена переменных в файле «Настройки» или в конфигурации, или везде, где вы храните эти вещи. Я не имею ни малейшего представления, если $ epsilon придет до или после $ Sigma. Ты?

]

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

]

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

]

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

традиционные имена размером точки

]

задолго до того, как были напечатаны компьютеры и настольные публикации, книги и газеты были напечатаны с типом свинца. У сеттеров типов были разные имена для разных размеров. Размеры имеют ссылку на размер точки (PT) и, теоретически, могут использоваться для размеров пикселей (PX).

]

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

]

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

]

размещение повседневных объектов в масштабе

]

как насчет использования вещей из нашей повседневной жизни? Скажи перца чили.

]

есть много видов перца чили. $ Habanero, горячее, чем $ cayenne, жаркая, чем $ jalapeno. Это было бы весело, да?

]

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

]

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

]

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

]

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

]

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

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

]

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

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

]

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

]

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

]

$ mouse: 12px; $ собака: 16px; $ hippo: 24px;

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

]

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

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

]

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

]

как вы обрабатываете шкалы размера шрифта? У вас есть одна система для шрифтов, а другая для таких вещей, как поля? Может ли кто -нибудь прыгнуть прямо в ваш код и понять, как все организовано? Пожалуйста, расскажите в комментариях!

]