Можно ли использовать единицы измерения rem (root em) вообще для всего в CSS?

Question

[weranda]

Приветствую.
Много читал в сети про единицы измерения rem, но до конца кажется не понял. Пишут, что в основном rem используют для:
- font-size
- line-height
- padding и margin текстовых блоков и только для них, по крайней мере так советуют. В спецификации W3C толком ничего не написано, две паршивых строчки.

Можно ли использовать rem для отступов блока друг от друга или для внешних отступов лучше использовать единицы типа PX или % или rem СТРОГО для текста и прилагающихся к нему padding и margins? EM даже не хочу использовать, одна головная боль от них с их наследованием. Старые браузеры особо не беспокоят, поэтому выбор пал на rem.

К примеру, задать тегу html размер шрифта в один пиксель и использовать rem - так можно или не нужно и почему?

Могли бы подробно разъяснить как, для чего, когда и пр. использовать rem?

Answer 1

[Евгений Петров]

Можно ли использовать rem для отступов блока друг от друга

Зачем? Значение в rem нужно для гарантированного получение базового размера. Между тем текстовые блоки наследуют размер шрифта, и для этого используются проценты, em.

К примеру, задать тегу html размер шрифта в один пиксель и использовать rem - так можно или не нужно и почему?

Ну это за гранью добра и зла:) Указывая размер шрифт в :root (он же html), вы задаёте точку отсчёта для наследования body и всех остальных элементов. Для какой задачи вам вообще может потребоваться базовый размер в 1 пиксель?

Comments

[weranda]

>>> Для какой задачи вам вообще может потребоваться такой размер?
Наверное перечитал много, сразу и всего подряд) К примеру для задания margin блокам.

[weranda]

Евгений Петров и Serj-One, один пишет, что "это за гранью добра и зла", второй пишет, что "именно для этого и требуется". Что то не понимаю. Сперва обозначают, что вроде бы такого делать не надо. Затем пишут, что вроде бы это корректно)

[Евгений Петров]

Serj-One: Я говорю про задание базового размера в 1 пиксель. Вы утверждаете, что это — хорошо?)

[weranda]

Евгений Петров А что в этом плохого? Плохо ли задать размер шрифта в 62,5% и использовать rem везде, кроме рамок, теней и "тонких" элементов?

[Евгений Петров]

weranda: Что плохого в базовом размере в 1 пиксель? Я уже написал выше.
В подавляющем большинстве случаев каркас страницы не зависит напрямую от размера текста. Привязываясь к rem, вы должны привязать к нему и спрайты, и всё остальное. Мне видится куча ненужного геморроя.

[Serj-One]

Евгений Петров: Конечно нет, мои извинения. Читал в спешке (суббота), и про 1px, конечно, пропустил. и в результате понял ответ неверно.
Опираясь на фразу >> "Ну это за гранью добра и зла:) Указывая размер шрифт в :root (он же html), вы задаёте точку отсчёта для наследования body и всех остальных элементов. "
Посчитал, что именно указание точки отсчёта в html вы считаете неверным.

[Евгений Петров]

Serj-One: Да я тут уже всем плешь проел про указание размера шрифта в html:) Я принципиально не могу быть противником rem:)

[weranda]

Понял из вашего посыла, что задавать размер шрифта в один пиксель тегу HTML не надо. Понял, что использование rem приводит к геморрою, пока мной не осознанному.

[Евгений Петров]

weranda: Еу насчёт 1 пикселя — тут и думать не нужно:)
Что же геморроя — я посмотрел на последний проект и прикинул — что нужно поменять для работы с rem и понял, что у приличной части элементов интерфейса нет привязки к размеру шрифта. Я бы утонул в раздумьях — кому задавать размер в rem, как это повлияет на каркас при изменении размера шрифта.

[Serj-One]

Евгений Петров: Вот и меня, как приверженца, начало фразы возмутило настолько, что начал писать ответ, ещё её не дочитав))

[weranda]

Евгений Петров Serj-One Хорошо вам, понимаете) А я после того, как задал этот вопрос, почитав мнения, еще больше запутался.

[Евгений Петров]

weranda: Ну вот смотрите (даже не касаясь указания размеров в rem) — есть блок, в котором нужно увеличить размер шрифта, не меняя размеры в других местах. А в блоке всё-всё привязано к rem. И что теперь делать? Наследование же не для проформы придумано.
Но основное вы уже поняли — базовый размер шрифта нужно задавать именно в html:)

[Serj-One]

weranda: А в чём тут путаться? rem зависит от изначально заданного размера шрифта (меняете точку отсчёта, меняются размеры, заданные через rem). Если вам нужна такая зависимость, используйте rem. Моё мнение - использовать rem стоит только для шрифтов, или элементов от размера шрифтов напрямую зависящих. В моих проектах большинство элементов от размера шрифта никак не зависят.
Единственное применение использования rem для всех элементов указал Nikolay Talanov, но зачем масштабировать сайт, делая его огромным на больших мониторах и мизерным на маленьких, когда можно сделать полноценный адаптив, не совсем понятно.

[weranda]

Хорошо. Получается, что rem лучше использовать только для оформления текстовых данных, а то что посоветовал Nikolay Talanov является не совсем корректным?
rem или em - текст
px - тени, рамки, брейкпойнты и фикс. макет
% - резиновые и responsive блоки (div, img...)
Так?
Сбили с толку меня эти rem в качестве альтернативы всем единицам)

[Евгений Петров]

weranda: Это — одна из единиц. Каждой единице своё применение. Если появился новый вид краски, это вовсе не значит, что теперь нужно всё ей красить, а остальные выбросить.

[weranda]

)))

Answer 2

[Nikolay Talanov]

Делаю вот так:

html, body {
  font-size: 62.5%; // 1rem = 10px и никакой попаболи как с EM
}

И верстаю все только в rem уже более полугода (за исключение тонких бордеров в 2-3px и подобных микро-вещей, которые при снижении font-size для html, body могут выдавать становиться тоньше, чем надо).
Главная фишка - возможность скейлить всю верстку под разные разрешения. Хочется сделать все на 25% больше для мониторов шире 1600px? Просто пишешь:

html, body {
  @media (min-width: 1600px) {
    font-size: 78.125%;
  }
}

И вся верстка магическим образом идеально скейлится. Тоже самое касается и понижения, очень удобно в адаптивной верстке.
Недостатки у rem есть, но они безобидные для нормальных людей - ie9+ и баг с небольшой неточностью приема 62.5% в каких-то версиях ie (вроде как в 10), что в общем то не заслуживает внимания.

Comments

[weranda]

Спасибо. Не совсем понятно вот что: можно ли и корректно ли задавать margin и padding блокам (div'am) или лучше для div все таки использовать PX или %?

[Nikolay Talanov]

weranda: Не очень понимаю о чем речь. В моем примере в первом куске css идет конкретно указано, что 1rem превращается в 10пикселей и в общем то все. Допустим у вас есть верстка, которую вы делаете в пикселях. Вы просто заменяете эти пиксели на rem и делите на 10. Все будет работать точно так же. С той лишь разницей, что результат можно будет потом уменьшить/увеличить, меняя глобальный font-size.

[weranda]

>>> Вы просто заменяете эти пиксели на rem и делите на 10. Все будет работать точно так же.

Можно заменять значение пикселей отступов блоков или только использовать применительно к шрифтам?

[Nikolay Talanov]

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