Преимущество препроцессоров на примере LESS

Многие не любят препроцессоры за излишнее количество кода, приверженности БЭМу, или еще каким шаблонизаторам. В принципе, они правы, так как неосторожное написание кода на препроцессорах может выдать очень грязный css. В одной из последних статей, автор пишет очень неправильный код LESS, используя дублирование html-структуры в самом файле стилей.

• Во-первых, это генерирует огромное число строк кода конечного css;
• Во-вторых, странно, что используя некоторый препроцессор для html, автор вручную дублирует структуру html-тегов в less. Получается некоторое дублирование информации, так почему бы не оптимизировать и данный шаг? Ведь в данном примере автор изначально в less добавляет классы, а затем их необходимые сочетания подключает в нужных местах.

Это требует дополнительного внимания. Возьмем рассматриваемый автором пример:

blue-arial-element{     // в less можно делать строчные комментарии     // поэтому property желательно писать «в столбик»     // background-color: black;      background-color: blue;     color: white;     font-family: Arial;     font-size: 12px; }  .button{     .blue-arial-element; } .header{     .blue-arial-element; } .footer{     .blue-arial-element; } 

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

Вот, оптимизированный код less:

blue-arial-element(){     // в less можно делать строчные комментарии     // поэтому property желательно писать «в столбик»     // background-color: black;      background-color: blue;     color: white;     font-family: Arial;     font-size: 12px; }  .button, .header, .footer{     .blue-arial-element; } 

Данный пример скомпилится в 6 строчек кода против 24(!). На самом деле, такой код может быть только в каком-нибудь одностраничном примере. На большом проекте все будет по-другому.

@pad: 0.5em; @xs: @pad; @s: @pad*1.2; @m: @pad*1.5; @l: @pad*2; @xl: @pad*3;  @color-red: #a81430;  .btn-params(@size: @s) {     padding: @size/2 @size;     display: inline-block;     border-radius: @size/4;     margin: @size/2; } .btn-flat(@size: @s, @color: @color-red) {    .btn-params(@size);   background: @color;    //.gradient(lighten(@color,3%),darken(@color,3%));    color: #fff; } .button {   .btn-flat(@l, @color: #ccc); } .button2 {   .btn-flat; } input[type="submit"], // Обычно на проектах используются разные input input[type="button"], //  button, // а иногда и кнопки .button { // и еще у нас бывают ссылки с классом button   .btn-flat(@m);   &[disabled="disabled"] {     .btn-flat(@m,#eee);   } } 

.button {   padding: 0.5em 1em;   display: inline-block;   border-radius: 0.25em;   margin: 0.5em;   background: #cccccc;   color: #fff; } .button2 {   padding: 0.3em 0.6em;   display: inline-block;   border-radius: 0.15em;   margin: 0.3em;   background: #a81430;   color: #fff; } input[type="submit"], input[type="button"], button, .button {   padding: 0.375em 0.75em;   display: inline-block;   border-radius: 0.1875em;   margin: 0.375em;   background: #a81430;   color: #fff; } input[type="submit"][disabled="disabled"], input[type="button"][disabled="disabled"], button[disabled="disabled"], .button[disabled="disabled"] {   padding: 0.375em 0.75em;   display: inline-block;   border-radius: 0.1875em;   margin: 0.375em;   background: #eeeeee;   color: #fff; } 

• Здесь я использовал задание размеров с помощью переменных. При этом в процессе разработки не нужно думать над тем, сколько пикселей/пунктов/em’ов ставить для заголовка, маленькой приписочки, большой, средней, маленькой или крохотной кнопки.
• Используются именно миксины, они не дублируется сами по себе в коде. Используется параметризация миксинов. Хотим красную кнопку, ставим цвет по-умолчанию. Хотим зеленую — ставим в параметр зеленый цвет.
• В серьезных проектах и для универсальности, стоит задавать переменные для большинства цветов, например, говорящие за себя переменные цвета: @color-disabled; @color-warning; @color-success; @color-brand; @color-brand-2; @color-link; @color-txt; @color-border;

Еще одна проблема верстки CSS

Этой проблемой болен БЭМ, неучтивое использование LESS, да и просто обычного CSS. Это — перебивание одних стилей другими. Иногда встречаешься с тем, что к какой-нибудь несчастной ссылке-кнопки применяется стилей с 10, а то и 20 различных правил. Половина друг друга перебивает. Это мало того, что увеличивает ненужное количество кода, так еще и тормозит редрединг, а к тому же, ну ооочень сильно затрудняет восприятие. Начинаешь искать, какие же селекторы были перебиты каким-нибудь самым специфичным.

К таком поведению ведет две ситуации:

• Лень
• Незнание

Лень я неспроста вывел на первое место: часто бывает, что не хочется модернизировать какой-то миксин под аргументы, и просто пишешь другой цвет фону какой-нибудь отличной кнопки. Т.е. получается вот такая вещь:

.btn-params(@size: 0.5em) { padding: @size/2 @size; display: inline-block; border-radius: @size/4; margin: @size/2; } .btn-for-our-project() { .btn-params; background: #ccc; color: #fff; border-radius: 0.25em; border: 1px solid #000; }  .active {   color: #000;   background: yellow; } .button { .btn-for-our-project; &.active { background: #aaa; color: #fff; border: 1px solid blue; } } 

.active {   color: #000;   background: yellow; } .button {   padding: 0.25em 0.5em;   display: inline-block;   border-radius: 0.125em;   margin: 0.25em;   background: #ccc;   color: #fff;   border-radius: 0.25em;   border: 1px solid #000; } .button.active {   background: #aaa;   color: #fff;   border: 1px solid blue; } 

В итоге для тега <a href="/" class="button active"> применится три стиля цвета фона, три цвета текста и еще некоторые ненужные. Разумеется, это не совсем реальный пример, и данная практика еще допустима. Но, когда идет перебивание практически всех стилей: от position и display до color и box-shadow, да еще и в количестве десятка — это очень плохая практика.

Заключение

В основном, не выбранная методика определяет качество конечного кода, а умение ей пользоваться. Я остановился на препроцессорах. Возможно, стоит использовать препроцессоры для html. Но в рамках моей текущей рутины, я не использую написание html, а беру уже существующий.

P.S.: Статья получилось маленькой. Думал, что выйдет материала побольше. Поэтому, если я где-то что-то упустил, или же примеры стоит сделать другими, прошу это высказывать в комментариях или ЛС. Предполагаю, что статья после некоторого периода обрастет подробностями, а я повешу шильдик «tutorial».