@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;
}


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

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

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