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