Как правильнее скомпоновать стили?

Question

[tdtdtd]

Сформировать запрос гуглу о сложившейся ситуации я толково не смог, так что обращаюсь сюда.

Как пример, у меня есть базовые классы для стилизации текста :

.text-center {
  text-align: center;
}

.text-lg {
  font-size: 30px;
}

.text-red {
  color: red;
}

И есть у меня какой-то div.main-title. Он по проекту используется во многих ситуациях и он должен обладать красным цветом, размером в 30 пикселей, и выравниванием по центру.

Я вижу следующие варианты решения задачи :
Первый это при каждом использовании .main-title, помимо самого класса main-title, писать постоянно ещё .text-red, .text-center и .text-lg.
Второй вариант - вынести каждый из стилей в миксин, что бы вышло что-то в таком духе :

@mixin text-center {
  text-align: center;
}

@mixin text-red {
  color: red;
}

@mixin text-lg {
  font-size: 30px;
}

.text-center {
  @include text-center;
}

.text-red {
  @include text-red;
}

.text-lg {
  @include text-lg;
}

.main-title {
  @include text-center;
  @include text-red;
  @include text-lg;
}

В моей ситуации просто это не однострочные стили текста, а чуть более длинные классы и пытаюсь придумать наиболее удобный вариант. Возможно у вас есть ещё какие-то варианты решения такой штуки?)

Comments

[Никита]

во-первых отучайтесь писать без бэм

[Сергей delphinpro]

Второй вариант, определенно, более удобен. При необходимости поменять main-title вам не придется лазать по всем шаблонам сайта, удалая/меняя классы.

[tdtdtd]

Сергей delphinpro, единственный очевидный минус - это то, что при использовании миксинов происходит так или иначе, дублирование/копирование стилей. Ещё как вариант, это создавать, к примеру, компонент MainTitle и в нём прописывать все классы .text-center, .text-red и тд, но опять таки, тут вопрос в том, логично ли создавать компонент просто что бы накинуть пару тройку классов?