Несколько советов less-разработчику

ffbca57b06e8adda6c8c728692921b4bЗачастую, создавая less-файлы (что, впрочем, касается и других препроцессоров css), мы гонимся за красотой и элегантностью less-кода, когда как частенько забываем про скомпилированный css-код. Иногда это влечет за собой критичные последствия, когда объем конечного css возрастает в раз, а код становится совершенно нечитаемым.

Disclaimer
1) Эта статья подойдет как для SASS/SCSS-разработчиков, так и для CSS-писателей.
2) Приведенные примеры кода не идентичны, но в большинстве случаев взаимозаменяемы и написаны для иллюстрации советов.

1) Не делайте слишком длинных вложений

Когда мы пишем обычный css-код, обычно не получается такой проблемы. Врядли мы напишем перед css-свойствами цепочку из 10 элементов. А вот с древовидной структурой less-кода, такое вполне вероятно. Упрощайте свои «лесенки» кода. Выделяйте отдельные блоки и выносите их. Особенно это касается универсальных классов и id. Длинные цепочки селекторов утяжеляют файл стилей, затрудняют его чтение, порой объем css-файл может увеличиваться из-за излишней вложенности в два раза.

Плохо Хорошо
#root {
    max-width: 1200px;
    margin: 0 auto;
    .wrapper {
        padding: 1rem;
        .cart {
            background: #eee;
            h1 {
                font-size: 2rem;
                margin: 1rem 0 2rem;
                &#green-header {
                    color: green;
                }
            }
            .good {
                border: 0.1rem solid #ccc;
            }
            input {
                border: 1px solid #ccc;
                &.error {
                    background: #99ffff;
                }
            }
        }
    }
}
            
#root {
    max-width: 1200px;
    margin: 0 auto;
    .wrapper {
        padding: 1rem;
    }
}
#green-header {
    color: green;
}
input.error {
    background: #99ffff;
}
.cart {
    background: #eee;
    h1 {
        font-size: 2rem;
        margin: 1rem 0 2rem;
    }
    .good {
        border: 0.1rem solid #ccc;
    }
}
            

 

Посмотреть скомпилированный css-код

Плохо Хорошо
                #root {
                  max-width: 1200px;
                  margin: 0 auto;
                }
                #root .wrapper {
                  padding: 1rem;
                }
                #root .wrapper .cart {
                  background: #eee;
                }
                #root .wrapper .cart h1 {
                  font-size: 2rem;
                  margin: 1rem 0 2rem;
                }
                #root .wrapper .cart h1#green-header {
                  color: green;
                }
                #root .wrapper .cart .good {
                  border: 0.1rem solid #ccc;
                }
                #root .wrapper .cart input {
                  border: 1px solid #ccc;
                }
                #root .wrapper .cart input.error {
                  background: #99ffff;
                }
                
                #root {
                  max-width: 1200px;
                  margin: 0 auto;
                }
                #root .wrapper {
                  padding: 1rem;
                }
                #green-header {
                  color: green;
                }
                input.error {
                  background: #99ffff;
                }
                .cart {
                  background: #eee;
                }
                .cart h1 {
                  font-size: 2rem;
                  margin: 1rem 0 2rem;
                }
                .cart .good {
                  border: 0.1rem solid #ccc;
                }
                

2) Опасайтесь селекторов через запятую

Если мы поставим в начале вложения селекторов (из примера выше) два или более селекторов через запятую, то все-все правила продублируются столько раз, сколько мы поставили селекторов вначале. Говоря об оптимизации веса получившегося css-файла, можно судить о десятках килобайт. Особенно опасно использовать селекторы через запятую, когда они вложены уже в селекторы, которые так же оформлены через запятую. Один из тяжелых случаев представлен ниже

Плохо Хорошо
form.type {
    &#typeAddress,
    &form#typeReview {
        textarea {
            background: #eee;
        }
        table {
            td {
                &.value {
                    padding: 1rem;
                }
                &.title {
                    padding: 0.5rem 1rem;
                    margin: 0.5rem 0;
                }
                &.value, &.title {
                    background: #eee;
                    color: #444;
                    a {
                        text-decoration: none;
                        padding: 0 0.4rem;
                    }
                    b {
                        color: #ccc;
                    }
                    p {
                        border-left: 0.25rem solid #ece;
                    }
                }
                &.result {
                    padding: 1rem 0;
                    background: green;
                }
            }
        }
    }
}
            
form.type {
    textarea {
        background: #eee;
    }
    table {
        td {
            background: #eee;
            color: #444;
            padding: 1rem;
            a {
                text-decoration: none;
                padding: 0 0.4rem;
            }
            b {
                color: #ccc;
            }
            p {
                border-left: 0.25rem solid #ece;
            }
            &.title {
                padding: 0.5rem 1rem;
                margin: 0.5rem 0;
            }
            &.result {
                padding: 1rem 0;
                background: green;
            }
        }
    }
}
            

 

Посмотреть скомпилированный css-код

Плохо Хорошо
form.type#typeAddress textarea,
form.typeform#typeReview textarea {
  background: #eee;
}
form.type#typeAddress table td.value,
form.typeform#typeReview table td.value {
  padding: 1rem;
}
form.type#typeAddress table td.title,
form.typeform#typeReview table td.title {
  padding: 0.5rem 1rem;
  margin: 0.5rem 0;
}
form.type#typeAddress table td.value,
form.typeform#typeReview table td.value,
form.type#typeAddress table td.title,
form.typeform#typeReview table td.title {
  background: #eee;
  color: #444;
}
form.type#typeAddress table td.value a,
form.typeform#typeReview table td.value a,
form.type#typeAddress table td.title a,
form.typeform#typeReview table td.title a {
  text-decoration: none;
  padding: 0 0.4rem;
}
form.type#typeAddress table td.value b,
form.typeform#typeReview table td.value b,
form.type#typeAddress table td.title b,
form.typeform#typeReview table td.title b {
  color: #ccc;
}
form.type#typeAddress table td.value p,
form.typeform#typeReview table td.value p,
form.type#typeAddress table td.title p,
form.typeform#typeReview table td.title p {
  border-left: 0.25rem solid #ece;
}
form.type#typeAddress table td.result,
form.typeform#typeReview table td.result {
  padding: 1rem 0;
  background: green;
}
                
form.type textarea {
  background: #eee;
}
form.type table td {
  background: #eee;
  color: #444;
  padding: 1rem;
}
form.type table td a {
  text-decoration: none;
  padding: 0 0.4rem;
}
form.type table td b {
  color: #ccc;
}
form.type table td p {
  border-left: 0.25rem solid #ece;
}
form.type table td.title {
  padding: 0.5rem 1rem;
  margin: 0.5rem 0;
}
form.type table td.result {
  padding: 1rem 0;
  background: green;
}
                

3) Миксины

 

Создавайте миксины чаще

Если вы пишете код и возникает ощущение deja vu, смело добавляйте миксин. Это значительно сэкономит время в последующих проектах. Не пытайтесь сразу сделать миксин идеальным, с кучей параметров. Он должен быть простым и понятным. Впоследствии вы будете его расширять и делать более универсальным.

Используйте параметризацию миксинов

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

Плохо Хорошо
@color-btn: #ea186e;
@color-txt: #000;
.btn-flat() {
    display: inline-block; 	text-align: center;	text-decoration: none;

    margin: 1rem 0;
    padding: 0.5rem 1rem;
    background: @color-btn;
    color: @color-txt;
    border: 0.1rem solid darken(@color-btn,15%);
}

#root {
    a.btn {
        .btn-flat;
    }
    button {
        .btn-flat;
        background: #ccc;
        color: #303;
        padding: 0.75rem 1.5rem;
        margin: 1.5rem 0;
        border: 0.2rem solid darken(#ccc,15%);
    }
}
            
@color-btn: #ea186e;
@color-txt: #000;
.btn-flat(@bgcolor: @color-btn, @color: @color-txt, @pad: 1rem) {
    display: inline-block; 	text-align: center;	text-decoration: none;

    margin: @pad 0;
    padding: @pad/2 @pad;
    background: @bgcolor;
    color: @color;
    border: @pad/10 solid darken(@bgcolor,15%);
}

#root {
    a.btn {
        .btn-flat;
    }
    button {
        .btn-flat(#ccc, #303, 1.5rem);
    }
}
            

 

Посмотреть скомпилированный css-код

Плохо Хорошо
#root a.btn {
  display: inline-block;  text-align: center;  text-decoration: none;

  margin: 1rem 0;
  padding: 0.5rem 1rem;
  background: #ea186e;
  color: #000000;
  border: 0.1rem solid #a60f4d;
}
#root button {
  display: inline-block;  text-align: center;  text-decoration: none;

  margin: 1rem 0; /* Это свойство "перебито" нижним */
  padding: 0.5rem 1rem; /* Это свойство "перебито" нижним */
  background: #ea186e; /* Это свойство "перебито" нижним */
  color: #000000; /* Это свойство "перебито" нижним */
  border: 0.1rem solid #a60f4d; /* Это свойство "перебито" нижним */

  background: #ccc;
  color: #303;
  padding: 0.75rem 1.5rem;
  margin: 1.5rem 0;
  border: 0.2rem solid #a6a6a6;
}
                
#root a.btn {
  display: inline-block;  text-align: center;  text-decoration: none;

  margin: 1rem 0;
  padding: 0.5rem 1rem;
  background: #ea186e;
  color: #000000;
  border: 0.1rem solid #a60f4d;
}
#root button {
  display: inline-block;  text-align: center;  text-decoration: none;

  margin: 1.5rem 0;
  padding: 0.75rem 1.5rem;
  background: #cccccc;
  color: #330033;
  border: 0.15rem solid #a6a6a6;
}
                
Хороший миксин — небольшой миксин

Собирайте миксины как кубики. Видите повторяющиеся куски кода, используйте миксин. Многие css-свойства имеют вендорные префиксы, поэтому для каждого подобного свойства добавляйте миксин с параметром @arguments. А затем их уже вкладывайте в другие миксины.
Используйте миксины для свойств, имеющих вендорные префиксы — экономьте свое время.

@pad: 0.5rem;
@bpad: @pad/5;
@color-back: #fff;
@color-btn: maroon;
.border(@color: #ccc) {
    border: @bpad solid @color;
}
.gradient(@c1,@c2){
  background: @c1;
  background: -moz-linear-gradient(top,  @c1 0%, @c2 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@c1), color-stop(100%,@c2));
  background: -webkit-linear-gradient(top,  @c1 0%,@c2 100%);
  background: -o-linear-gradient(top,  @c1 0%,@c2 100%);
  background: -ms-linear-gradient(top,  @c1 0%,@c2 100%);
  background: linear-gradient(to bottom,  @c1 0%,@c2 100%); 
}
.btn(@padding: @pad) {
    padding: @padding/2 @padding;
    display: inline-block;
    text-align: center;
    text-decoration: none;
}
.btn-simple(@color: @color-btn) {
    .btn;
    .border(darken(@color,7%));
    .gradient(lighten(@color,3%), darken(@color,3%));
    color: @color-back;
    color: lighten(@color,40%);
    &:hover {
        .gradient(darken(@color,3%), darken(@color,8%));
        color: lighten(@color,50%);
    }
    &:active {
        .gradient(darken(@color,15%), darken(@color,15%));
        color: lighten(@color,10%);
        .border(darken(@color,25%));
    }
}
            

4) Используйте свой шаблон

В любом случае, особенно если вы не пользуетесь css/less-фреймворками, создавайте свой шаблон, подключайте less-файлы, каждый из которых имеет свой набор правил. Один из них может отвечать за мелкие миксины для вендорных префиксов, другой будет css сброс свойств селекторов, третий — подключение веб-шрифтов и иконок.

5) Используйте переменные

Переменные для размеров, для цвета. Это помогает придерживаться сетке и выравниванию элементов.
Я использую для задания размеров блоков и отступов единицы rem, они хороши тем, что не зависят от размера родительского шрифта. Таким образом, горизонтальные отступы становятся одинаковыми, даже если мы меняем размер шрифта. А в дополнение, задав изменение размера шрифта от разрешения экрана для тега html, все размеры пропорционально увеличатся. Такое применяется для планшетов: текст и отступы там должны быть чуть больше по сравнению с «телефонным» масштабом. (работает в современных браузерах, ie9+)


Подытожим

 

  • Не гонитесь за чистотой less-кода, следите за тем, как он будет компилироваться
  • Не увлекайтесь древовидной вложенностью селекторов
  • Пользуйтесь перечислением селекторов с осторожностью, и только там, где это действительно неободимо
  • Добавляйте переменные везде, где только можно.
  • Используйте rem, если того позволяет поддержка браузеров для проекта. Так вы избавитесь от проблемы с разными отступами у блоков и подгонкой значений (не забывайте про поддержку браузерами)
  • Составляйте миксины как кубики: двигайтесь от простых, заменяющих одно-два свойств, до сложных, включающих в себя другие миксины.
  • Создавайте параметризированные миксины везде, обязательно задавая значения по умолчанию
  • Используйте миксины для кнопок, элементов интерфейса, вендорных свойств

Разумеется, многие вещи можно оптимизировать через специальные сокращатели и минимизаторы css, но мы должны писать качественный код!