Хорошей ли практикой является использовать rem для значений margin и padding?

Question

[Александр]

Я хочу улучшить свои навыки верстки, но столкнулся с некоторыми препятствиями. Одно из них - это выбор между единицами измерения. Я использую em для типографии (font-size, line-height), но не знаю как быть с отступами. Например, существует какой-либо макет сайта (PSD, Figma и т.д.), в этом макете расстояние от навигационной панели до следующего блока, скажем, 150px. Как мне стоит воплощать это в CSS? Единицы em, наверное, не подойдут, ведь если увеличить размер шрифта, то и отступы увеличатся. Тогда rem или просто px?

Comments

[Rustam Bainazarov]

Да, это хорошая современная практика, но в то же время весьма затратная. Почитайте любую статью про rem/em, их связку с доступностью и т. д. Почему лучше задавать медиазапросы в em/rem и т. п. Там куча моментов.

В целом эти все действия направлены по сути на тот процент людей, которые увеличивают стандартный размер шрифта в браузере :))

Вообще, если вы задаёте отступы в em/rem, то для полноценной работы данной практики вы должны и медиазапросы, и вообще многое чего ещё задавать в них.

[Александр]

Рустам Байназаров, задавать медиазапросы в rem/em не имеет никакого смысла. Даже в Bootstrap этого не сделали. Это было бы плохой идеей, наверное, ведь медиазапросы должны быть фиксированными.

[Rustam Bainazarov]

Александр, есть смысл. Почитайте. В Bootstrap много чего хорошего не сделали.

[Александр]

Рустам Байназаров, а что будет, если изменить значение rem? Тогда и значения медиазапросов изменятся, что не очень хорошо.

[Rustam Bainazarov]

Александр, например:
https://zellwk.com/blog/media-query-units/

Ну и кучи статей подобного рода. Есть противники этого. Я с ними не согласен, но я пока сам лично не заморачиваюсь на этот счёт. И делаю в px.

[Rustam Bainazarov]

Александр,

а что будет, если изменить значение rem? Тогда и значения медизапросов изменятся, что не очень хорошо.

В этом весь смысл и заключается. Как я и писал выше, это всё трепыхания ради тех людей, которые меняют стандартный размер шрифта в браузере. Accessibility и всё тому прочее.

[Александр]

Рустам Байназаров,
Привет! В комментарии выше вы отправили ссылку на статью об использовании EM в медиазапросах, я прочитал ее, затем прочитал статью другого человека, который ссылался на эту статью. Последний утверждал, что вычисления в EM (при увеличении) имеют баг в Safari, в то время как PX играют свою роль так, как и должны.
https://adamwathan.me/dont-use-em-for-media-queries/

[Rustam Bainazarov]

Александр, да, я читал эту статью, но уже в 2018 году в Safari не видел этого бага.

Сегодня посмотрю ещё раз на ПК.

Answer 1

[Ivan Bogachev]

если увеличить размер шрифта, то и отступы увеличатся

Так это же замечательно, так и должно быть. И вопрос не только в доступности. Задание всех размеров в rem/em позволяет при изменении размера шрифта сохранить приятный глазу дизайн, у которого не "перекашивается" соотношение веса элементов и негативного пространства. Максимальный эффект достигается при использовании CSS-шлюзов и адаптивной типографики, что дает возможность без лишних движений сделать "красиво" на любых размерах экрана. А если заранее определить с дизайнером все стандартные размеры для всего (я часто использую .3, .5, .8, 1, 1.25, 1.5, 1.75, 2, 3, 4, 5 rem), то можно будет быстро верстать "на глаз", по бумажным наброскам, и даже без дизайнера совсем, используя не гору магических чисел, а известный набор удобных размеров. Конечно, это ломает мозги неподготовленному дизайнеру, но многие модные ресурсы (тот же Smashing Magazine) используют подобный подход весьма успешно.

Answer 2

[Дмитрий]

В чем проблема посмотреть исходный код Bootstrap или Bulma, в отступах и границах используется px. Зачем использовать для шрифта em когда есть rem?

UPD: Использование px + media queries, на мой взгляд, самое адекватное решение.