Pavel_20
@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-запросов, то галп ругается...
  • Вопрос задан
  • 95 просмотров
Пригласить эксперта
Ответы на вопрос 1
delphinpro
@delphinpro Куратор тега Sass
frontend developer
Вопрос: как правильнее?

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

Плейсхолдеры, при правильном использовании, немного сокращают выходной 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...
Ответ написан
Ваш ответ на вопрос

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

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