Отдельный класс в html или миксин scss?

Question

[Alex Krynytskyi]

Подскажите как лучше,
1 - создать класс со свойствами и вешать на нужные элементы в html
или
2 - создать миксин и подключать к нужным класам что на выходе получается приличное дублирования кода при компиляции.
подскажите что об этом почитать.
Или разница будет не существенна и не стоит заморачиваться

Answer 1

[Саша]

Alex Krynytskyi сделайте миксин без дублирования кода.

Какая именно задача?
Каких именно стилей будет происходит дублирование?

Скидывайте пример используемого миксина.

Comments

[Alex Krynytskyi]

@mixin container {
  max-width: 1400px;

  @media (max-width: 1400px) {
    max-width: 1100px;
  }
}


.about {
  @include container;
}

.faq {
  @include container;
}

на выходе у нас

.about {
  max-width: 1400px;
}
@media (max-width: 1400px) {
  .about {
    max-width: 1100px;
  }
}

.faq {
  max-width: 1400px;
}
@media (max-width: 1400px) {
  .faq {
    max-width: 1100px;
  }
}

[Саша]

Alex Krynytskyi, я бы оформил в одном из следующих вариантов:

//вариант 1
%container{
	max-width:1400px;

	@media (max-width:1400px){
		max-width:1100px;
	}
}
.about{
	@extend %container;
}
.faq{
	@extend %container;
}

//вариант 2
.container{
	max-width:1400px;

	@media (max-width:1400px){
		max-width:1100px;
	}
}
.about{

}
.faq{

}

[Alex Krynytskyi]

да extend убирает эту проблему, спасибо, но какой тогда смысл от миксина ? если он делает такое дублирование ?

[Alex Krynytskyi]

а что можешь посоветовать что бы оно так же медиа запросы не плодило или этого не избежать ?

[Саша]

Alex Krynytskyi, Не понял вопроса.
Опишите пожалуйста подробней, в каком смысле "медиа запросы не плодило" ?

[Alex Krynytskyi]

Саша,

.test1 {
  width: 100px;

  @media (max-width: 100px) {
    width: 50px;
  }
}

.test2 {
  width: 100px;

  @media (max-width: 100px) {
    width: 150px;
  }
}

а на выходе два правила для медия 100px

.test1 {
  width: 100px;
}
@media (max-width: 100px) {
  .test1 {
    width: 50px;
  }
}

.test2 {
  width: 100px;
}
@media (max-width: 100px) {
  .test2 {
    width: 150px;
  }
}

[Саша]

Alex Krynytskyi, нет, с этим не подскажу если в плане автоматизации.

Но, можете прогнать свой итоговый css код через
www.codebeautifier.com