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

Question

[Islam Ibakaev]

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

Вообщем, что вы используете: миксины, просто классы или всё-таки плейсхолдеры?

Comments

[Kovalsky]

А вам какой вариант больше нравится?

1. Mixin

SASS

@mixin position-center { 
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.block-1 { 
	font-size: 24px;
	@include position-center;
}
.block-2 {
	background-color: red;
	@include position-center;
}

CSS

.block-1 { 
	font-size: 24px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.block-2 {
	background-color: red;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

HTML

<div class="block-1">
</div>
<div class="block-2">
</div>

2. Reusable class

CSS

.position-center { 
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.block-1 { 
	font-size: 24px;
}
.block-2 {
	background-color: red;
}

HTML

<div class="block-1 position-center">
</div>
<div class="block-2 position-center">
</div>

3. Placeholder

SASS

%position-center { 
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.block-1 { 
	font-size: 24px;
	@extend %position-center;
}
.block-2 {
	background-color: red;
	@extend %position-center;
}

CSS

.block-1, .block-2 {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.block-1 {
	font-size: 24px;
}
.block-2 {
	background-color: red;
}

HTML

<div class="block-1">
</div>
<div class="block-2">
</div>

[Islam Ibakaev]

Никита Полевой: а вам?

Answer 1

[andead]

но, насколько я понимаю, это единственное преимущество

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

Вообще эти способы существуют параллельно. Классы используют в БЭМ и например в бутстрапе, миксины в Semantic UI и том же бутстрапе.

Answer 2

[Владислав Старцев]

Использовать оба, к примеру я делаю так, создаю класс (использую Less)

.clearfix{
	&::before,
	&::after{
		content: '';
		display: table;
		clear: both;
	}
}

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