В последнее время я заметил, что в фронтенд-разработке есть что-то, что не стандартизировано, и люди часто делают это неправильно.
Взгляните на этот простой пример:
У нас есть header, body и footer. Body содержит три элемента. Это довольно простая структура, которая часто встречается в приложениях. Именно поэтому я выбрал её — она иллюстрирует более широкую проблему.
HTML для этого выглядит так:
<div class="header"> header </div> <div class="body"> <div class="item">item 1</div> <div class="item">item 2</div> <div class="item">item 3</div> </div> <div class="footer"> footer </div>
CSS выглядит примерно так:
.header, .footer, .item {
width: 240px;
height: 80px;
border-width: 1px;
border-color: red;
border-style: solid;
text-align: center;
vertical-align: middle;
line-height: 80px;
font-weight: bold;
font-size: 48px;
}
.item {
font-weight: normal;
}
Результат:
Как видите, элементы отображаются в ряд, всё выглядит хорошо (за исключением двойных границ, но мы это проигнорируем).
Теперь я заметил, что люди часто используют разные подходы к добавлению отступов. И они обычно сами себе создают проблемы. Например, допустим, я хочу добавить отступы между элементами. Вот что я видел слишком много раз:
.item {
margin-top: 24px;
}
.item:last-of-type {
margin-bottom: 32px;
}
Или что-то семантически эквивалентное. Что делает этот стиль?
Вуаля! Элементы разделены, все счастливы, верно? Но не совсем. Я не счастлив, и никто не будет счастлив.
Этот стиль добавляет отступ сверху для каждого элемента и отступ снизу для последнего элемента. Визуально отступы добавлены, но сделано это неправильно.
Давайте посмотрим на структуру:
Header, body и footer находятся на одном уровне в дереве структуры. В терминах компонентных фреймворков, таких как Angular или React, мы бы сказали, что это эквивалент одного компонента.
А элементы находятся ниже, составляя (возможно, вместе с тегом body) отдельный компонент:
Таким образом, даже если в чистом HTML это выглядит как один элемент дизайна, на самом деле мы имеем дело с двумя частями: основной частью (header, body, footer) и второй частью (элементы body).
Однако стиль, показанный ранее:
.item {
margin-top: 24px;
}
.item:last-of-type {
margin-bottom: 32px;
}
Игнорирует этот факт. Он применяет отступы между:
- header и элементом
- элементами между собой (давайте проигнорируем flex и gap, чтобы сосредоточиться на теме)
- элементом и footer
Это синтаксически неправильно, потому что он смешивает стили для разных частей дизайна. На естественном языке я бы хотел описать это так:
- между header и body должен быть отступ 24px
- элементы должны быть разделены 24px
- между body и footer должен быть отступ 32px
Это важно, потому что именно так дизайнеры описывают то, что хотят достичь. Это естественный способ описания отступов, основа дизайна.
Кстати, люди думают, что дизайн — это вот это:
Но дизайн — это вот это:
😊
Вернёмся к теме. Чтобы сделать это лучше, нужно учитывать два момента:
- Стили должны применяться в основном к элементам на одном уровне.
- Естественный поток — сверху вниз.
Первый пункт был объяснён ранее. Второй — это наблюдение, что каждый человек использует поток сверху вниз. Нет ни одного человека на Земле, который использует поток снизу вверх. Есть люди, которые используют поток слева направо или справа налево, но когда дело доходит до вертикального потока, мы все используем один и тот же (или я ошибаюсь, и 1% использует иначе):
Таким образом, естественный порядок вещей заключается в том, что мы добавляем отступ к элементу, который находится сверху, чтобы элемент ниже был отделён от него. Не наоборот. Мы не добавляем отступ сверху элемента, чтобы отделить его от элемента выше.
Потому что естественный поток легче обрабатывать. Кроме того, когда вы используете один поток, вы всегда знаете, где найти отступы. В противном случае вам сначала нужно понять поток. В простом HTML это не так сложно. Но если у вас есть приложение, состоящее из компонентов, которые, в свою очередь, состоят из других компонентов, становится очень утомительно искать, где находятся отступы, если вы не используете один поток.
Чтобы подвести итог:
Всегда используйте поток сверху вниз. Если вы можете использовать margin-bottom и margin-top, используйте margin-bottom.
Когда мы учтём всё вышесказанное, изменённый CSS будет выглядеть так:
.header {
margin-bottom: 24px;
}
.body {
margin-bottom: 32px;
}
.body {
display: flex;
flex-direction: column;
gap: 24px;
}
Как видите, я использую margin-bottom, чтобы отделить body от header и footer от body. Это сразу видно, что и куда перемещено. Оба определения находятся на одном уровне. В случае компонентных фреймворков они должны быть размещены в одном компоненте. Таким образом, изменения в дизайне легко вносить. Мне не нужно заходить в компонент “body”, чтобы изменить отступ между header и body.
Более того, если я буду повторно использовать компонент “body”, он не будет поставляться с произвольными отступами. Компонент не должен вводить отступы вообще, родитель должен их контролировать, потому что отступы компонента — это решение родителя. Только так вы сможете повторно использовать компонент “body” в других местах, где отступы должны быть другими.
Если мы посмотрим на body, он использует удобную функцию flex, где вы просто определяете промежуток между элементами. Таким образом, вам больше не нужно иметь дело с отступами сверху и снизу.
Давайте посмотрим, как это выглядит в браузере:
Элементы красиво разделены. Отступ снизу также отделён.
Header также красиво отделён:
Давайте снова посмотрим на CSS:
.header {
margin-bottom: 24px; # здесь
}
.body {
margin-bottom: 32px; # здесь
}
.body {
display: flex;
flex-direction: column;
gap: 24px; # здесь
}
Если вам когда-нибудь понадобится изменить дизайн, у вас есть три удобных места для этого. Вам даже не нужно думать, где что находится. Дизайнер говорит, что body должен быть ниже? Нет проблем. Расстояние между элементами должно быть больше? Отлично. Дело нескольких секунд.
В случае простого HTML, как выше, это действительно не имеет большого значения, но когда вы строите сложные системы с использованием Angular, Vue, React или Ember, это становится довольно важным.
Потому что единственное, что точно в дизайне, — это то, что он изменится. Возможность создавать гибкие компоненты, которые легко реорганизовывать и стилизовать, полезна.
Подведём итоги:
- Стилизуйте элементы на одном уровне.
- Используйте поток сверху вниз (предпочитайте margin-bottom вместо margin-top).
- Для равномерно распределённых элементов используйте flex и gap.
Конечно, есть исключения из этих правил, но они довольно редки.
***✨ А что думаете вы? ✨
Делитесь мыслями в комментариях — ваше мнение вдохновляет нас и других!
Следите за новыми идеями и присоединяйтесь:
• Наш сайт — всё самое важное в одном месте
• Дзен — свежие статьи каждый день
• Телеграм — быстрые обновления и анонсы
• ВКонтакте — будьте в центре обсуждений
• Одноклассники — делитесь с близкими
Ваш отклик помогает нам создавать больше полезного контента. Спасибо, что вы с нами — давайте расти вместе! 🙌