Я начинаю довольно большой проект и рассматриваю возможность использования 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 столбцами, а затем используйте их занятия в моем доме.
Мне очень не нравится идея дополнительных классов, по опыту это приводит к раздутому дому (создание дополнительных разделов только для присоединения классов сетки). Также самый простой учебник по html/css расскажет вам, что dom должен быть отделен от стилей — классы сетки связаны со стилями! для меня это то же самое, что прикрепить класс "border-radius-10" к приведенному выше примеру .rounded-div!
С другой стороны, большой файл css, который возникнет из-за повторяющегося кода, также является недостатком.
Итак, я думаю, мой вопрос в том, какой из них вы бы порекомендовали и какой вы используете?
и какое решение лучше всего подходит для оптимизации? помимо большего размера файла, проводились ли какие-либо исследования того, отображает ли браузер несколько классов быстрее, чем большой файл css, или наоборот?
Я хотел бы услышать ваше мнение!
