Что лучше для скорости загрузки css?

Question

[ArutaGerman]

Использую Gulp, использую Scss и миксины.
Встал вопрос:
Есть ли разница для скорости загрузки страницы: добавлять блокам заранее созданный класс со стилями, включая нужные префиксные стили (например, display: flex) или лучше для этого использовать миксины?

Разница мне не видится явной, ведь при подгрузке класса добавляется то же кол-во строк, что и при включении этих строк в базовый класс.

Наглядно:
1 вариант:
html:

<div class="abc flex"</div>
 <div class="def flex"</div>

. flex{
display: flex;
.................     // строки dislpay с префиксами
}

.abc{
  border: .....;
  background: .....;
  font-size: ......
   ...............
}

.def{
  border: .....;
  font-size: ......
   .........
}

2 вариант:

<div class="abc"</div>
    <div class="def"</div>

.abc{
  display: flex;
  ............... // строки dislpay с префиксами
  border: .....;
  background: .....;
  font-size: ......
  ........
}

. def{
  display: flex;
  ............... // строки dislpay с префиксами
  border: .....;
  font-size: ......
  ........
}

Comments

[WapSter]

без разницы, если код css не весит 1 и более мб

Answer 1

[ArutaGerman]

Алекс Глебов Алекс Глебов Куратор тега CSS
например у меня есть 10 кнопок однотипных - у них один класс и он всем подгружается.

cssmin умеет группировать классы с одинаковыми свойствами
В исходниках не надо себя путать.
1 селектор встречается во всем коде 1 раз - замечательная практика.

Answer 2

[NaN]

1. Зачем создавать класс на свойство css?
   
2. Можно настроить сборщик так, что он допишет префиксы нужным свойствам. Зачем писать самому?
   

Comments

[ArutaGerman]

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

например у меня есть 10 кнопок однотипных - у них один класс и он всем подгружается.
тут та же ситуация - есть 20 блоков flex и встал вопрос, что быстрее работает
- прописать в каждый класс нужное свойство или просто класс создать и в html его добавить.

[Алекс Глебов]

например у меня есть 10 кнопок однотипных - у них один класс и он всем подгружается.

cssmin умеет группировать классы с одинаковыми свойствами
В исходниках не надо себя путать.
1 селектор встречается во всем коде 1 раз - замечательная практика.

[ArutaGerman]

Алекс Глебов, спасибо