К сожалению, я не располагаю временем для написания длинных статей, но я рад поделиться некоторыми приемами верстки, которые использую в своих проектах.

Значительное большинство frontend и fullstack разработчиков не испытывает радости при написании CSS-кода. И для этого есть целый ряд причин:

1. разработчики не могут получить именно то, что хотят,
2. CSS-код бывает громоздким, часто возникают ситуации, когда простейший визуальный трюк требует изменений большого количества свойств элементов,
3. некоторые CSS-правила не являются прозрачными для понимания (простейший пример: для того, чтобы визуализировать свойства псевдоэлемента, нужно задать значение свойства content),
4. нет единых стандартов для именования классов, правил использования ID и классов, использования уровней вложенности, отдельными темами для обсуждения являются методологии использования BEM, SMACSS и других технологий,
5. CSS постоянно изменяется и растет: в различные периоды времени одни свойства становятся популярными, другие, наоборот, перестают использоваться,
6. остутствует единая кроссбраузерная спецификация визуализации одних и тех же CSS-свойств, при написании кода всегда нужно тестировать результат, как минимум в четырех основных браузерах (и это еще не говоря об адаптивной верстке).

Список, приведенный выше, можно продолжать практически бесконечно.

Но я люблю играть с CSS. Для этого есть одна веская причина: когда я управляю CSS-кодом, CSS-код не может управлять мной.

Недавно я делал сайт с помощью Bootstrap 4 и, незаметно для себя, перешел к управлению отступами, рекомендуемому создателями этого фрейворка. Вот почему я это сделал:

1. требуется знание всего нескольких классов,
2. выравнивание элементов происходит в соответствии с существующей адаптивной сеткой,
3. отступы учитывают наличие брейкпойнтов и не ломают верстку,
4. можно управлять как вертикальными, так и горизонтальными отступами,
5. полученный код не перегружен и легко читаем,
6. не разрушается общая концепция UI,
7. позволяет управлять отступами, внося изменения только в один файл.

Итак, следует знать, что для управления свойствами margin и padding различных элементов Bootstrap 4 имеет встроенные классы.

А теперь разберем подробно, какие именно встроенные классы Bootstrap 4 определяют отступы.

Именование классов

{property}{sides}-{size}

или

{свойство}{стороны}-{размер}

Дла адаптивной верстки используются брейкпойнты и именование классов имеет несколько иной вид:

{property}{sides}-{breakpoint}-{size}

или

{свойство}{стороны}-{брейкпойнт}-{размер}

Что же означает каждый параметр в именовании класса:

Property (cвойство)

1. m - определяет margin,
2. p - определяет padding.

Sides (стороны)

1. t - для margin-top или padding-top,
2. b - для margin-bottom или padding-bottom,
3. l - для margin-left или padding-left,
4. r - для margin-right или padding-right,
5. x - для горизонтальных отступов: margin-right и margin-left или padding-right и padding-left,
6. y - для вертикальных отступов: margin-top и margin-bottom или padding-top и padding-bottom,
7. оставляем параметр пустым, если нужно установить одинаковое значение для всех отступов (вертикальных и горизонтальных).

Size (размер)

Основу размера составляет условная базовая единица измерения $spacer, например, 1rem.

1. 0 - удаляет отступ,
2. 1 - 0.25 условной единицы измерения,
3. 2 - 0.5 условной единицы измерения,
4. 3 - 1 условная единица измерения,
5. 4 - 1.5 условные единицы измерения,
6. 5 - 3 условных единицы измерения.
7. auto - параметр будет установлен автоматически.

Начиная с Bootstrap 4.2, для значений 1, 2, 3, 4, 5 можно задать отрицательные отступы с помощью префикса n:

<div class="row mx-md-n5"></div>

Пример:

<div class="container">
    <h2 class="mb-3">Bootstrap 4: Responsive Utility Classes</h2>
    <h4 class="mt-5">Mark up Elements</h4>
    <div class="row">
        <div class="col-sm-4">
            <b>Initial</b>
            <h2>Title</h2>
            <p>Paragraph text</p>
        </div>
        <div class="col-sm-4">
            <b>Expand bottom</b>
            <h2 class="mb-4">Title</h2>
            <p>Paragraph text</p>
        </div>
        <div class="col-sm-4">
            <b>Shrink bottom</b>
            <h2 class="mb-0">Title</h2>
            <p>Paragraph text</p>
        </div>
    </div>
</div>

Использование встроенных классов для отступов позволяет стандартизировать верстку и значительно улучшить читабельность кода.

Следует заметить, что параметры именования классов можно модифицировать по своему усмотрению в файле _variables.scss. Например:

$spacer: 1rem !default;
$spacers: () !default;
$spacers: map-merge(
    (
        0: 0,
        1: ($spacer * .25),
        2: ($spacer * .5),
        3: $spacer,
        4: ($spacer * 1.5),
        45: ($spacer * 2.25),
        5: ($spacer * 3),
        55: ($spacer * 4),
        6: ($spacer * 5),
        65: ($spacer * 6.5),
        7: ($spacer * 8)
    ),
    $spacers
);

В заключение еще раз хочется сказать, что понимание основных принципов фреймворков и умение их корректно применять значительно улучшает качество любого проекта.

Спасибо