В ЦСС можно указать ширину и высоту элемента в пикселях свойствами 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. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработка
Отправить
Поделиться
Запинить

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