Оптимизация CSS - дополнительные классы в dom или препроцессорно-повторяющиеся стили в файле css?

Я начинаю довольно большой проект и рассматриваю возможность использования LESS для предварительной обработки моего css.

Полезная вещь в LESS заключается в том, что вы можете определить миксин, который содержит, например:

.border-radius(@radius) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    -o-border-radius: @radius;
    -ms-border-radius: @radius;
    border-radius: @radius;
}

, а затем использовать его в объявлении класса как

.rounded-div {
   .border-radius(10px);
}

, чтобы получить выходной css как:

.rounded-div {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px;
}

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

.column-container {
    overflow: hidden;
    display: block;
    width: 100%;
}
.column(@width) {
    float: left;
    width: @width;
}

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

.my-column-outer {
    .column-container();
    background: red;
}
.my-column-inner {
    .column(50%);
    font-color: yellow;
}

(конечно, используя препроцессор, мы можем легко расширить это до гораздо полезнее, например, передать количество столбцов и ширину контейнера в качестве переменных и заставить LESS определять ширину каждого столбца в зависимости от количества столбцов и ширины контейнера!)

Проблема в том, что при компиляции мой Окончательный файл css будет иметь 100 таких объявлений, скопированных и вставленных, что сделает файл огромным, раздутым и повторяющимся. Альтернативой этому может быть использование системы сеток, в которой есть предопределенные классы для каждого параметра макета столбца, например. .c-50 (с определением "float: left; width:50%;" ), .c-33, .c-25 для макета с 2, 3 и 4 столбцами, а затем использовать эти классы в мой дом.

Мне очень не нравится идея дополнительных классов, по опыту это приводит к раздуванию dom (создание дополнительных разделов просто для присоединения к ним классов сетки). Также самый простой учебник по html/css расскажет вам, что dom должен быть отделен от стилей — классы сетки связаны со стилями! для меня это то же самое, что прикрепить класс "border-radius-10" к приведенному выше примеру .rounded-div!

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

Итак, я думаю, мой вопрос в том, какой из них вы бы порекомендовали и какой вы используете?

и какое решение лучше всего подходит для оптимизации? помимо большего размера файла, проводились ли какие-либо исследования того, отображает ли браузер несколько классов быстрее, чем большой файл css, или наоборот?

Хотелось бы услышать ваше мнение!