Верстка поехала
Думаю, любой человек, верстающий с CSS, натыкался на ситуации, когда верстка «поехала». Это происходит из-за того, что разработчик плывет в блочных и строчных элементах и не умеет комбинировать их интуитивно. Например
Код выше применяет display: grid для создания сетки, разделяющей родительский элемент на две ровные половинки. Однако, минимальная ширина поля ввода ломает верстку. Так же сломает верстку текст, ширина которого не уместится в ширину колонки
Компонентный подход
Современные сайты верстаются в компонентном подходе. Стили кнопки не описываются отдельно на каждой странице, а импортируются из единого источника. Как следствие, ваш код тоже должен быть инкапсулирован в компоненты
По определению, компоненты представляют собой автономный код, который может быть повторно использован за счет его независимого развертывания. Если компонент бьет верстку, он создает сайд эффект. Это значит, он не автономен и концепции компонентного подхода не соответствует. Далее я расскажу два приема, которые позволят вам верстать свои компоненты профессионально
Обертка компонента
Для того, чтобы верстка не ехала, необходимо начинать код компонента в преамбуле подушки безопасности. Используя сочетание position: absolute и position: relative, можно предотвратить заезд содержимого за границы компонента Создайте два класса, .root и .container
Данный пример я наверстал, именуя классы в методологии БЭМ. Это способ осуществить инкапсуляцию стилей без транспилятора, поддерживая уникальные наименования классов соглашением о наименовании. Если вы верстаете на React, Angular или VueJS, можете именовать классы как вам удобно.
Содержимое компонентов
Особое внимание нужно уделить единице измерения % в верстке. За исключением случая width: 100%, height: 100%, это нарушает компонентный подход. В работе, я использую Flexbox и Grid, при этом, в случае с Flexbox, для обеспечения предсказуемости поведения, только два случая
Центровка, делается через display: flex; align-items: center; justify-content: center. Позволяет разместить дочерний элемент по центру родителя
Растяжение, делается через display: flex; align-items: stretch; justify-content: stretch; & > * { flex: 1; }. Позволяет растянуть дочерний элемент по размеру родителя
Если вы будете использовать альтернативные компоновки, получится как на скриншоте выше, отступ между «2» и «3» (justify-content: space-around) вроде должен быть, но его нет.
Давайте наверстаем
Предположим, есть абстрактный Dashboard в системе стилей Material. Это набор карточек с индикаторами состояния бизнес-процессов предприятия, которые исключительно информативны для работодателя: число новых чатов, число продаж, число опозданий, число прогулов и овертайм
Код карточки из этого дешборда будет иметь следующий вид и состоять из центрующих и растягивающих Flexbox контейнеров
Если не понятно, оставлю схему для простоты разбора кода
Дополнительно, упомянутая выше обертка компонента позволяет привязаться к краям виджета, что удобно при верстке данного макета