Дилемма наименования переменных размера шрифта
Вот почему CSS проекты обычно используют переменные или миксины — мы стремимся к структуре, удобству обслуживания и, в конечном счете, согласованности. Все мы знаем, что присвоение имен — это сложная задача, и чтобы понять, почему это так, достаточно просто присвоить имена переменным размера шрифта. Как мы должны назвать переменную маленького размера шрифта, чтобы было ясно, что она меньше, чем переменная большого размера? И что произойдет, если нам нужно вставить новую переменную между ними — имеет ли она имя, ясно объясняющее ее связь с другими переменными размера?
В этом посте мы продолжим говорить об именах переменных размера шрифта. Но на самом деле проблема распространяется не только на размер шрифта, но и на любое значение размера или длины. Подумайте об отступах, полях, ширине, высоте, радиусе границ и т. д. Этим вещам также нужна структура и согласованность!
Как вы определяете размер шрифта в своем проекте? С пользовательскими переменными это выглядит примерно так:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
CSS :root { /* Font size variables */ –small: 12px; –medium: 16px; –large: 24px; }
| 123456 | :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;
| 1234 | $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)); }
| 123 | 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;
| 123 | $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;
| 123 | $mouse: 12px;$dog: 16px;$hippo: 24px; |
Вам нужно что-то меньшее, чем мышь? Используйте $bee, $ant или $flea. Больше медведя? Попробуйте $moose или $hippo. Больше слона? Ну, у вас есть $whale, или, черт возьми, мы можем пойти в доисторическую эпоху и использовать $t-rex. Здесь всегда есть какое-то животное, которое можно втиснуть. Очень универсальный, интуитивно понятный, а также почти бесконечный подход. И веселье тоже — я бы не отказался font-size: $squirrel.
Но опять же, даже для этого подхода может потребоваться ссылка на переменные, если мы точно не знаем, какие животные содержатся в нашем зоопарке размеров шрифта. Но, возможно, это не имеет большого значения, если он масштабируется.
Я потратил слишком много времени на размышления об этом
Кодовая база — это то место, где вы проводите свое рабочее время. Это ваша рабочая среда, как стулья и мониторы. А рабочее место должно быть красивым.
Автор: Martin Lexelius
Источник: webformyself.com