Определение размеров блоков или областей с использованием пользовательских свойств CSS

Одна из многих проблем, когда речь идет о написании CSS, – это выбор правильной единицы. На протяжении многих лет было много споров, использовать ли px, em или rem для определения размера текста. Поэтому я подумал, почему бы не добавить некоторые пользовательские свойства к этой смеси и посмотреть, куда она нас приведет. Чтобы не усложнять вещи и быстро перейти к сути, я сначала опишу свой текущий подход, когда дело доходит до обработки размеров шрифта. Во второй части я расскажу о некоторых пользовательских свойствах.

Часть I: Мой текущий подход (без пользовательских свойств)

Если кратко: размер в процентах – общая область, rem – для компонентов, em – для всего остального!)

Мой нынешний подход очень похож на тот, который описали Робин Рендл, Крис Койер и Ричард Раттер. Я настоятельно предпочитаю относительные единицы над пикселями. Так что в моих CSS-файлах вы всегда найдете что-то подобное:

html {
  font-size: 100%;
}
.headline {
  font-size: 2em;
}

Небольшое напоминание: 1em относительно размера шрифта элемента. 1rem относится к размеру корневого шрифта (HTML), который по умолчанию обычно равен 16px. На самом деле, мне бы очень хотелось узнать, есть ли в наши дни браузер, который не использует 16px в качестве размера шрифта по умолчанию.

Я должен признать, я пытаюсь определить почти все с em, будь то размер шрифта, поля, отступы, ширина, высота или даже такие вещи, как box-shadow. Основная причина в том, что я не хочу в конечном итоге получить что-то вроде этого:

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

Сброс сверху

Чтобы немного упростить процесс, я делаю сброс, когда начинаю строить новый блок. (Если вы в большей степени являетесь разработчиком React, просто подумайте о компонентах, а не о блоках, или, может быть, модуль – подходящее вам слово?) любой размер шрифта был установлен на родителя. Оттуда я продолжаю использовать их. Мой CSS (на самом деле это SCSS, это то, что я привык писать) выглядит примерно так:

.teaser {
  font-size: 1rem;   // this is where the reset is happening.
  margin: 0 0 1.5em; // from here on use em again
  ...
}
.teaser__headline {
  font-size: 2em;
  ...
}
.teaser__body {
  font-size: 0.875em;
  ...
}

Я знаю, что работать с em и rem вместо px все еще немного неудобно для некоторых людей. Чтобы сделать это проще, вы можете положиться на calc и написать что-то вроде: font-size: calc (32em / 16), или вы можете использовать один из многочисленных миксинов SASS, чтобы сделать вычисления за вас.

Почему я должен делать это?

Избавление от всех ваших пиксельных объявлений имеет значительные преимущества:

  1. Изменить размер вашего компонента
    Вы можете изменить размер своего компонента, добавив модификатор, который изменяет размер шрифта на уровне блока (например, размер шрифта: 0,875 мм). В Codepen ниже есть два примененных класса-модификатора (тизер – маленький и тизер – маленький), которые изменяют размер шрифта, и вы можете видеть, что весь тизер уменьшается.
  2. Изменить размер всего сайта
    Но вам не нужно останавливаться на достигнутом. Что мне больше всего нравится во всем этом, а также использовал почти во всех проектах, над которыми я работал в последнее время, так это то, что вы можете масштабировать весь ваш сайт, просто изменив размер шрифта HTML-элемента. Допустим, вы хотите оптимизировать свой сайт для больших экранов. Просто добавьте медиа-запрос, увеличьте размер шрифта до 125% и наблюдайте, как ваш сайт расширяется.
@media screen and (min-width: 75em) {
  html {
    font-size: 125%;
  }
}

See the Pen rem-em-sizing by Nils Binder (@enbee81) on CodePen.light

Если вы хотите увидеть это в действии, взгляните на один из этих веб-сайтов и измените размер своего браузера до 1440px.

TEV – More than an investor. Your partner.
RuhrJS Conference 2019

Проблемы с вложенными блоками

Поскольку в начале каждого блока происходит сброс, все становится немного сложнее, когда у вас есть вложенные блоки. Вы можете применить модификатор (например, font-size: 1.25rem) к родительскому блоку, но размер шрифта уменьшается во вложенном блоке до 1rem, поэтому он кажется меньшим по сравнению с родительским блоком. Если вы также хотите изменить дочерние блоки, вам нужно применить модификаторы к каждому дочернему блоку . В качестве решения этой проблемы вы можете использовать пользовательское свойство, а не полагаться исключительно на rem. Давайте посмотрим, как это работает.

Часть II. Добавление пользовательского свойства

Вместо сброса путем установки размера шрифта 1rem, вы также можете использовать пользовательское свойство. Наш CSS изменится на это:

:root {
  --fs: 1rem;
}
html {
  font-size: 100%;
}
.teaser {
  font-size: var(--fs);
  .
  .
}
.button {
  font-size: var(--fs);
  .
  .
}

Пока что многое не изменилось. Настраиваемое свойство –fs используется в качестве переменной (подобно переменной, известной из препроцессоров, таких как Sass), и его значение помещается в качестве значения сброса для font-size на уровне блока. Это становится действительно интересным, если вы измените значение пользовательского свойства. Допустим, мы используем класс-модификатор и увеличиваем размер шрифта:

.teaser--small {
  --fs: 1.25rem;
}

564/5000Поскольку значение переменной падает вниз, это влияет и на вложенные блоки, и весь компонент, включая его подкомпоненты, равномерно масштабируется.

Также возможно изменить размер целых областей (например, Контент, Нижний колонтитул, Боковая панель) с различными размерами области просмотра. Может быть, для макета блога, где вы хотите, чтобы больший контент достиг лучшей читабельности, но вы хотите, чтобы ваш верхний и нижний колонтитулы остались прежними. И все же, у вас есть возможность изменить размер шрифта корня, и вся страница будет увеличиваться или уменьшаться, но сохраняя соотношение между различными областями.

Заключительные слова

С появлением новых методов CSS Layouting, таких как Flexbox и CSS-Grid, у нас наконец-то появились инструменты для создания макетов, ориентированных на искусство, которые не должны быть похожи на стандартные макеты начальной загрузки, которые мы видели довольно много за последние годы. Тем не менее, очень сложно создать привлекательные макеты для экрана всех размеров. Я надеюсь, что возможность динамического изменения размеров отдельных областей может стать еще одним строительным блоком в создании инновационных и захватывающих веб-приложений.