Что правильнее использовать?

Question

[Pavel_20]

Добрый день!
Раньше всегда использовал такого плана миксины:

@mixin flex-row {
    display: flex;
    justify-content: space-between;
}

@mixin flex-col {
    display: flex;
    flex-direction: column;
}

@mixin flex-center {
    display: flex;
    justify-content: center;
    align-items: center
}

@mixin centerX {
    left: 50%;
    transform: translateX(-50%);
}

@mixin centerY {
    top: 50%;
    transform: translateY(-50%);
}

@mixin centerXY {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Но недавно увидел, что использовали шаблоны, например:

%flex-row {
    display: flex;
    justify-content: space-between;
}

Вопрос: как правильнее?
P.S. Кстати если делать @extend %template; внутри media-запросов, то галп ругается...

Comments

[Михаил]

это всё вообще зачем?

[Михаил]

mixin копапастит стили,
extend селектор
вот и разбирайтесь что из этого вам нужно

Answer 1

[Сергей delphinpro]

Вопрос: как правильнее?

Никак.
Оба подхода имеют право на жизнь.

Плейсхолдеры, при правильном использовании, немного сокращают выходной css код.

Такое ваше использование очень смахивает на atomicCSS.
Может так и стоит поступить?

Сделать кучу классов

.d-flex { display: flex; }
.justify-content-between { justify-content: space-between; }
.direction-column { flex-direction: column; }

И потом использовать либо классы в разметке, либо расширяться прямо от них

<div class="d-flex justify-content-between"></div>

.some-class {
  @extends .d-flex;
  @extends .justify-content-between;
}

Ой! Мы, кажется, переизобретаем bootstrap...

Comments

[Михаил]

скорее tailwind

[Сергей delphinpro]

Михаил, точно. tailwind в этом плане больше подходит для сравнения.

[Pavel_20]

А если по БЭМ пишешь? Слишком много классов будет...