Последнее обновление 31.05.2023 — Василий Иванов
Такие читатели, как вы, помогают поддерживать MUO. Когда вы совершаете покупку по ссылкам на нашем сайте, мы можем получать партнерскую комиссию. Читать далее.
Представьте, что вы проделали всю тяжелую работу, чтобы сделать действительно крутой макет. Но затем, когда вы делаете окно браузера немного меньше, вы обнаружите, что что-то переполняется. Вы добавляете медиа-запрос, чтобы решить проблему. Но при изменении размера окна вы замечаете, что что-то еще сломалось.
Это то, с чем рано или поздно столкнется большинство разработчиков CSS. Но, к счастью, у нас есть несколько современных CSS-решений, которые значительно упрощают разработку вещей и обеспечение их хорошей работы. В этой статье рассматриваются 5 полезных практик, о которых следует помнить при разработке веб-сайтов. Эти советы помогут вам избежать раздражающих пробелов в вашем дизайне.
1. Начните с глобальной таблицы стилей
Всегда начинайте с глобальных стилей при написании CSS. Не беспокойтесь о макете. Вместо этого установите общие стили, такие как типографика, цвета и фон. Сбросить поля, удалить подчеркивание ссылок и т. д.
После того, как вы закончите с общим стилем, вы можете приступить к созданию макета и нацеливанию на отдельные элементы в макете. По сути, начните сверху, а затем переходите к элементам.
Следующий пример CSS сбрасывает поля для всех элементов до 0, определяет типографику и цвет всех основных заголовков и добавляет ко всем им одинаковые поля:
body,
h1,
h2,
h3,
p {
margin: 0;
}
h1,
h2,
h3 {
color: blue;
font-family: "Verdana" sans-serif;
font-weight: 900;
line-height: 1;
}
h2,
h3,
p {
margin-bottom: 1rem;
}
Теперь, когда у вас определены все базовые стили, вы можете строить их оттуда. Например, вы можете добавить отступ к элементу контейнера. Это отодвинет содержимое от краев вашего браузера. Затем вы можете применить максимальную ширину к изображениям, чтобы они могли адаптироваться к ширине своего контейнера. Суть в том, чтобы начать с общих элементов, прежде чем нацеливаться на конкретные элементы.
Опять же, макет будет адаптивным. Таким образом, когда вы меняете размер экрана, соответственно изменяется и размер элементов. Как разработчик, вы должны знать об этих советах и хитростях CSS, поскольку они могут поднять вашу производительность на новый уровень.
2. Избегайте фиксированных размеров
Когда вы начинаете думать о макетах, самое первое, что вы должны иметь в виду, это избегать фиксированных размеров. Фиксированные размеры относятся к таким свойствам, как ширина: 1000 пикселей, высота: 200 пикселей и т. д. Установка фиксированной высоты или ширины вызовет у вас проблемы только в долгосрочной перспективе.
Вместо этого используйте адаптируемую высоту и ширину. Один из способов — использовать минимальную высоту и минимальную ширину вместо высоты и ширины. Например, предположим, что вы установили ширину элемента на 600 пикселей. Когда вы уменьшите размер до 600 пикселей, содержимое будет переполнено:
Вместо этого вы должны изменить свойство с ширины на максимальную ширину. При максимальной ширине элементу будет разрешено уменьшаться по мере сужения окна браузера. А если окно станет широким, текст растянется до исходной длины. Вот результат:
Это то же самое для высоты. Например, предположим, что вы установили высоту заголовка на фиксированное значение 200 пикселей.
header {
height: 200px;
display: grid;
place-items: center;
}
Это идеально центрирует все в заголовке. Но когда вы сужаете окно браузера, содержимое в конечном итоге вытекает из его контейнера. И это потому, что вы устанавливаете фиксированную высоту заголовка.
Как правило, высота и ширина являются опасными свойствами. Решение состоит в том, чтобы использовать адаптируемые высоту и ширину, т. е. минимальную и максимальную высоту, а также минимальную и максимальную ширину. В этих случаях, если браузер сталкивается с ситуациями, когда содержимое становится длиннее, заголовок будет увеличиваться, чтобы адаптироваться к этому.
Это одна из самых распространенных ошибок CSS, которую вам следует избегать.
3. Помните, что ваш сайт адаптивен по умолчанию
Имейте в виду, что ваш сайт адаптивен еще до того, как вы напишете хотя бы одну строчку кода CSS. Такое мышление может помочь вам избежать чрезмерного усложнения процесса проектирования. Макет будет работать на массивных экранах и крошечных экранах. Это может быть некрасиво. Читать на большом экране может быть сложно. Но веб-сайт адаптируется к области просмотра независимо от ее размера.
Конечно, изображения могут переполняться, а текст может быть слишком мелким. Но вы ничего не потеряете с раскладкой по умолчанию. Ваш текст не порвется, и все элементы будут видны на экране.
Понимание и принятие этого факта может действительно помочь, когда вы пишете код CSS. Когда вы столкнетесь с проблемами, вы будете уверены, что ошибка связана с написанным вами CSS. Это облегчает поиск проблемы и ее устранение.
4. Используйте медиа-запросы для дополнительной сложности
Старайтесь использовать медиа-запросы только для усложнения. Например, если вы хотите, чтобы ваш макет имел три столбца на больших экранах. В противном случае не используйте их. Чтобы глубже погрузиться в медиа-запросы, прочитайте наше руководство по медиа-запросам.
Вот один сценарий. Представьте, что элемент с именем класса .split содержит в себе три элемента. С помощью следующего CSS будет создан макет из трех столбцов:
.split {
display: flex;
flex-direction: row;
gap: 2rem;
}
На небольших экранах (шириной 40em или меньше) вы бы хотели, чтобы все занимало один столбец. Итак, вы бы сделали это:
@media(max-width: 40em) {
.split {
display: block;
}
}
Здесь вы переопределяете выравнивание по умолчанию (три столбца). Но медиа-запрос не нужен, потому что браузер по умолчанию использует display:block. Таким образом, вам не нужно явно определять его.
Имея это в виду, вы можете реорганизовать свой код, чтобы использовать один медиа-запрос, который применяется только к большим экранам. Там вы переключитесь на три столбца, когда экран шире 40em:
@media(max-width: 40em) {
.split {
display: flex;
flex-direction: row;
gap: 2rem;
}
}
На маленьких экранах браузер укладывает все в один столбец. Но вам не нужно указывать его, потому что браузер использует display:block по умолчанию. Таким образом, вы использовали медиа-запросы только для усложнения.
Таким образом, вместо того, чтобы добавлять сложность, а затем переопределять кучу свойств, теперь вы добавляете сложность, когда вам это нужно. В большинстве случаев вам понадобятся только медиа-запросы минимальной ширины. Начните с мобильных устройств, затем, когда сайт будет отлично выглядеть на мобильных устройствах, добавьте сложности (например, столбцы) для настольной версии.
5. Воспользуйтесь преимуществами современного CSS
Используя современные подходы к CSS, вы можете избавиться от большинства проблем с выравниванием и точек останова и перейти к созданию внутреннего дизайна.
Один из способов сделать это:
h1 { font-size: clamp(3rem, 1rem + 10vw, 7rem)}Это зажимает h1 между минимальным и максимальным размером шрифта. Минимальное значение, которое мы хотим получить, — 3rem, а максимальное — 7rem. Середина — это то, что мы будем повторять (1rem + 10 vw). В результате заголовок будет автоматически уменьшаться по мере уменьшения окна просмотра и увеличиваться по мере его увеличения.
Узнайте больше о современном CSS
CSS сильно развился за эти годы. Сегодня у нас есть новые и лучшие подходы к позиционированию элементов в CSS. В этой статье мы затронули некоторые из этих приемов и рассказали, как они могут помочь вам избежать распространенных ошибок при проектировании. Один из лучших способов изучения современного CSS — это практический подход, например использование современного CSS для разработки HTML-таблицы.
