Лучше создать и использовать миксин или класс?

Можно абстрагировать правила для абсолютного центрирования элемента в миксин
@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 разделяются.

Вообщем, что вы используете: миксины, просто классы или всё-таки плейсхолдеры?
  • Вопрос задан
  • 1306 просмотров
Пригласить эксперта
Ответы на вопрос 3
andead
@andead
друпал девелопер
но, насколько я понимаю, это единственное преимущество

Второе преимущество - меньше размер html, быстрее загрузка (css же кэшируется)
Третье преимущество - можно применить миксин только для определённого media, с классом так не получится и придётся переопределять все свойства.
Четвёртое преимущество - не надо править html разметку при изменении дизайна.

Вообще эти способы существуют параллельно. Классы используют в БЭМ и например в бутстрапе, миксины в Semantic UI и том же бутстрапе.
Ответ написан
@esvlad
Веб-разработчик
Использовать оба, к примеру я делаю так, создаю класс (использую Less)
.clearfix{
	&::before,
	&::after{
		content: '';
		display: table;
		clear: both;
	}
}

И в других классах в css добавляю его, однако и его оставляю, поскольку бывает такое что в продакшене нужно что-то быстро изменить без заморочек или либо есть условие в котором должен применяться данный класс, просто к тегу дописываю его.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы