Школа
Веб-разработка

Чем опасны размеры в пикселях в ЦСС?

Игорь Петров
8 апр 2021
👁 5992   🗩3
Веб-разработка

Чем опасны размеры в пикселях в ЦСС?

Игорь Петров
8 апр 2021
👁 5992   🗩3
Игорь Петров
Разработчик, преподаватель Школы бюро
Полезно
 30
30
Непонятно
  
Войдите в Бюросферу, чтобы голосовать

В ЦСС можно указать ширину и высоту элемента в пикселях свойствами width и height. Кажется, что это удобно: можно брать размеры прямо из Фотошопа или Фигмы и вставлять в код.

Но строго задавать размеры в пикселях — почти всегда ненадёжное и опасное решение. Так мы лишаем элемент гибкости и мешаем переиспользовать его в других контекстах. Иногда это не критично, но обычно строгие размеры элементов быстро начинают затруднять разработку и поддержку вёрстки.

Расскажу о двух главных проблемах со строгими размерами и о том, как этих проблем избежать.

Строгая ширина лишает модуль адаптивности

Допустим, нужно сверстать модуль шириной 1000 пк. Попробуем указать ширину строго:

.module {
  width: 1000px;
}

Пока ширина браузера и контейнера больше ширины модуля, всё хорошо:

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

Более надёжное и гибкое решение — разрешить модулю занимать всю доступную ширину, но ограничить максимальную ширину свойством max-width:

.module {
  width: 100%;
  max-width: 1000px;
}

Так модуль станет адаптивным, не сломает вёрстку на узком экране или в узком контейнере, при этом никогда не растянется больше нужного.

Строгая высота мешает менять содержимое модуля

Допустим, нужно сверстать такой модуль:

Распродажа подушечек

Розовых, синих, с красивыми узорами. Каждая третья подушечка — бесплатно

Самый простой способ — задать высоту строго как на макете, 135 пк. Но такая вёрстка не учитывает содержимое модуля и сломается, если текста станет больше или если текст займёт больше строк из‑за уменьшения ширины модуля:

Распродажа подушечек

Розовых, синих, с красивыми узорами. Каждая третья подушечка — бесплатно. Доставка почтой, курьером и в пункты выдачи СДЭК

Распродажа подушечек

Розовых, синих, с красивыми узорами. Каждая третья подушечка — бесплатно



Более надёжное и гибкое решение — использовать внутренние отступы для управления высотой:

.module {
  padding: 27px 18px 45px;
}

Так высота модуля будет состоять из высоты содержимого и размеров отступов. Если содержимое изменится, то не вылезет за пределы модуля.

В дополнение к отступам бывает полезно задать минимальную высоту, чтобы модуль не ужимался, если внутри окажется мало содержимого:

.module {
  padding: 27px 18px 45px;
  min-height: 180px;
}

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

Каждый раз, когда хочется задать строгие размеры в ЦСС, стоит остановиться и подумать, как этого не делать. Лучше потратить десять минут на создание надёжной и гибкой вёрстки сразу, чем в будущем убить часы на её доработку :‑)

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработка
Полезно
 30
30
Непонятно
  
Войдите в Бюросферу, чтобы голосовать
Отправить
Поделиться
Поделиться
Запинить
Твитнуть

Комментарии

Роман Иванов

Бывает необходимо подстроиться под cls. Как с этим быть при гибких элементах?

Игорь Петров

Роман!

Предполагаю, вы про Cumulative Layout Shift — сдвиги на странице во время её загрузки из‑за подгрузки содержимого.

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

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

Если вы имели в виду что‑то другое — пожалуйста, расскажите подробнее, чтобы я мог лучше понять ситуацию и вопрос :‑)

Михаил Воробьев

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

Цель рубрики — обсуждение вопросов дизайна, веб-разработки, переговоров, редактуры и управления.
Комментарии модерируются. Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры.

Рекомендуем другие советы