Зачастую, создавая less-файлы (что, впрочем, касается и других препроцессоров css), мы гонимся за красотой и элегантностью less-кода, когда как частенько забываем про скомпилированный css-код. Иногда это влечет за собой критичные последствия, когда объем конечного css возрастает в раз, а код становится совершенно нечитаемым.
Disclaimer
1) Эта статья подойдет как для SASS/SCSS-разработчиков, так и для CSS-писателей.
2) Приведенные примеры кода не идентичны, но в большинстве случаев взаимозаменяемы и написаны для иллюстрации советов.
1) Не делайте слишком длинных вложений
Когда мы пишем обычный css-код, обычно не получается такой проблемы. Врядли мы напишем перед css-свойствами цепочку из 10 элементов. А вот с древовидной структурой less-кода, такое вполне вероятно. Упрощайте свои «лесенки» кода. Выделяйте отдельные блоки и выносите их. Особенно это касается универсальных классов и id. Длинные цепочки селекторов утяжеляют файл стилей, затрудняют его чтение, порой объем css-файл может увеличиваться из-за излишней вложенности в два раза.
| Плохо | Хорошо |
|---|---|
|
|
| Плохо | Хорошо |
|---|---|
|
|
2) Опасайтесь селекторов через запятую
Если мы поставим в начале вложения селекторов (из примера выше) два или более селекторов через запятую, то все-все правила продублируются столько раз, сколько мы поставили селекторов вначале. Говоря об оптимизации веса получившегося css-файла, можно судить о десятках килобайт. Особенно опасно использовать селекторы через запятую, когда они вложены уже в селекторы, которые так же оформлены через запятую. Один из тяжелых случаев представлен ниже
| Плохо | Хорошо |
|---|---|
|
|
| Плохо | Хорошо |
|---|---|
|
|
3) Миксины
Создавайте миксины чаще
Если вы пишете код и возникает ощущение deja vu, смело добавляйте миксин. Это значительно сэкономит время в последующих проектах. Не пытайтесь сразу сделать миксин идеальным, с кучей параметров. Он должен быть простым и понятным. Впоследствии вы будете его расширять и делать более универсальным.
Используйте параметризацию миксинов
Любой миксин, который вы используете, можно запараметризовать. Во-первых, это удобно. Во-вторых, это экономит получившийся результат в css.
Когда мы добавляем миксин, пусть это будет оформление кнопки, а далее простыми css-свойствами меняем ему размеры или цвет, то в скомпилированном css в селекторе будут сначала правила, описанные в миксине, а затем уже те, которые вы описали. Получается ненужное дублирование css-свойств. Избежать этого можно, вставляя значения параметров в миксин: так миксин скомпилируется сразу с нужными параметрами. И не забывайте ставить параметрам значения по умолчанию.
| Плохо | Хорошо |
|---|---|
|
|
| Плохо | Хорошо |
|---|---|
|
|
Хороший миксин — небольшой миксин
Собирайте миксины как кубики. Видите повторяющиеся куски кода, используйте миксин. Многие 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, но мы должны писать качественный код!
Автор:
