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

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

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

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

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

.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 для размещения двух столбцов, трех столбцов и четырех столбцов, а затем использовать эти классы в мой дом.

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

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

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

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

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

Ответ 1