Как лучше? Группировать правило по элементам
.component {
&__elem1 {
font-size: 12px;
@media (min-width: 992px) {
font-size: 15px;
}
}
&__elem2 {
font-size: 15px;
@media (min-width: 768px) {
font-size: 17px;
}
}
&__elem3 {
font-size: 10px;
}
&__elem4 {
font-size: 9px;
@media (min-width: 768px) {
font-size: 10px;
}
}
&__elem5 {
font-size: 18px;
@media (min-width: 992px) {
font-size: 10px;
}
}
}
или по медиазапросам
.component {
&__elem1 {
font-size: 12px;
}
&__elem2 {
font-size: 15px;
}
&__elem3 {
font-size: 10px;
}
&__elem4 {
font-size: 9px;
}
&__elem5 {
font-size: 18px;
}
@media (min-width: 768px) {
&__elem2 {
font-size: 17px;
}
&__elem4 {
font-size: 10px;
}
}
@media (min-width: 992px) {
&__elem1 {
font-size: 15px;
}
&__elem5 {
font-size: 10px;
}
}
}
Может где-то есть статья по этому поводу, дающая аргументированное объяснение