Можно абстрагировать правила для абсолютного центрирования элемента в миксин @mixin position-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
и использовать так .block { font-size: 24px; @include position-center; }
а можно просто создать класс .position-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
и использовать как обычно <div class="block position-center"></div>
Очевидно, что использование миксина - более элегантное решение(не нужно "засорять" разметку), но, насколько я понимаю, это единственное преимущество.
Но если посмотреть скомпилированный файл со стилями, то можно обнаружить, что правила тупо запиханы в стили элементов, то есть никакого реиспользования нет.
С другой стороны, выделение в класс - это реальное реиспользование, однако "засоряем разметку".
Хотя, это понятие - "засорение разметки" какое-то абстрактное и не понятное. В каком случае вообще считать элемент "засореным", сколько классов у него должно быть? Если 4 класса, то элемент "засорён"? А если 5?
Я знаю про плейсхолдеры, однако в замешательстве, поскольку в sass community мнения насчёт использование @extend разделяются.
Вообщем, что вы используете: миксины, просто классы или всё-таки плейсхолдеры?
но, насколько я понимаю, это единственное преимущество
Второе преимущество - меньше размер html, быстрее загрузка (css же кэшируется)
Третье преимущество - можно применить миксин только для определённого media, с классом так не получится и придётся переопределять все свойства.
Четвёртое преимущество - не надо править html разметку при изменении дизайна.
Вообще эти способы существуют параллельно. Классы используют в БЭМ и например в бутстрапе, миксины в Semantic UI и том же бутстрапе.
И в других классах в css добавляю его, однако и его оставляю, поскольку бывает такое что в продакшене нужно что-то быстро изменить без заморочек или либо есть условие в котором должен применяться данный класс, просто к тегу дописываю его.
Средний
