zmnv / zmnv-css-offsets

В этом репозитории лежит простейший файл с классами, которые задают отступы margin и padding от 4px до 64px

8px Css Offsets

В этом репозитории лежит простейший файл с классами, которые задают отступы margin и padding от 4px до 64px:

• 2px
• 4px
• 8px
• 16px
• 24px
• 32px
• 48px
• 64px

Эмперическим путем установлено, что других размеров не требуется.
В редких случах испытывал нужду в отступе на 2px...

Актуальность

Можно каждый раз задавать отступы свойствами в css-классах (WET), но интересней переиспользовать «стандартизированные» отступы. Данный вопрос возникает по мере внедрения дизайн-систем.

С чем едят?

1. Выносим отступы из CSS в HTML:

<div class="mar-16">Внешние отступы со всех сторн</div>
<div class="pad-16">Внутренние отступы со всех сторн</div>

<div class="mar-t-4">Отступ сверху (снаружи блока) на 4px</div>
<div class="pad-b-32">Отступ снизу (внутри блока) на 32px</div>

<div class="mar-l-16 pad-t-8 pad-b-8">Комбинация отступов</div>

2. Используем внутри CSS с помощью extend в PostCSS:

.app-container {
    @extend .mar-8;
}

.app-container__element {
    @extend .mar-l-16 .pad-t-8 .pad-b-8;
}