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

сегодня в 19:44

Зачастую, создавая 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;

This entry passed through the Full-Text RSS service — if this is your content and you're reading it on someone else's site, please read the FAQ at fivefilters.org/content-only/faq.php#publishers. Five Filters recommends:

• Massacres That Matter - Part 1 - 'Responsibility To Protect' In Egypt, Libya And Syria


• Massacres That Matter - Part 2 - The Media Response On Egypt, Libya And Syria


• National demonstration: No attack on Syria - Saturday 31 August, 12 noon, Temple Place, London, UK