Час від часу я чую від деяких із знайомих розробників, що Sass це, мовляв, звичайно добре і зручно, але в кінцевому рахунку згенерований їм код істотно захаращує файли стилів зайвими селекторами.

Давайте розберемося, чи так це. Чи загрожує використання Sass втратою контролю над файлами стилів і звідки з’явилося це думка. Поїхали.

Головним аргументом проти використання Sass можна вважати «поганий код». Стилі CSS, які виходять після генерації, відрізняються вкладеністю селекторів. І це одна з основних переваг даного препроцесора (як, до речі, і більшості інших).

Потрібно знати одне правило: так, Sass створюватиме поганий код. Але тільки завдяки тобі.

Необдуманий стиль написання коду, незнання правил структури проекту, зберігання спрайтів всередині стилів, заплутані імена змінних, милиці та зайвий код, зловживання значенням !important та інші «поліпшення» в результаті видадуть результат, який зможе гарантувати негативну відповідь на будь-якій співбесіді.

Причини поганого коду

Препроцесори (зокрема, Sass) придумані для спрощення роботи розробника, збільшення швидкості розробки і легкого керування проектами. Якщо у програміста виникають складнощі з препроцесором, то швидше за все через недосвідченість.

Звідси отримуємо першу і головну причину поганого Sass-коду: молодий і недосвідчений організм за клавіатурою.

Запам’ятайте: Sass може генерувати тільки те, що йому вкажуть, не більше того. Не пишіть зайвого і позбудетеся від сміття у вашому проекті.

З досвідом приходить розуміння, як можна домогтися того ж результату значно меншим обсягом коду. Просто не опускайте руки :).

Вкладеність збільшує вагу селекторів

Занадто велика вкладеність таки так — збільшує. У будь-якій справі потрібно знати міру, особливо в програмуванні. Якщо ви можете не додавати зайвої вкладеності — не додавайте. А ваші селектори стануть легкими й шовковистими.

Взагалі, написання селекторів і вибір імен для класів та ідентифікаторів — питання досить складне, і заплутатися новачкові в ньому простіше, ніж здається.

Для початку запам’ятайте важливе правило: не намагайтеся повторювати структуру вашого html-файлу в Sass. Спочатку це може здатися логічним і зручним, але ви дуже швидко про це пошкодуєте. Наприклад, якщо потрібно використовувати один і той же клас в різних місцях сторінки.

Міксіни (mixins) збільшують код в рази

Деякі вважають, що зворотна сторона міксинів — це роздутий до некерованості код, і причина тому — повторення. Знову ж таки, це твердження не позбавлене сенсу: бездумне використання міксинами створить замість красуні чудовисько.

З яким вам потім жити.

Якщо ви не вперше тут, то могли читати статтю про Sass, де я розповідав, що таке міксини.

Простий міксин з п’яти рядків, доданий в десять селекторів, створить 50 рядків CSS-коду. У більшості випадків це не той результат, який ви хотіли б отримати.

Якщо міксин не має аргументів, замість нього можна обійтися додатковим класом. Тут все просто: якщо код міксина не змінюється в залежності від переданих аргументів, то варто задуматися, чи є сенс в його використанні.

Директива extend створює селектори, що не читаються

Для початку задайте собі питання: ваш CSS повинен бути читабельним людиною або машиною? Якщо Sass створено для читання і зручності творця, то CSS повинен бути якомога більш «зручним» для браузера.

Навіть плагін uglify, що стискає код, як би натякає на правильну відповідь.

Для браузера за великим рахунком все одно, як відформатовано код, тому мініфікація і видалення коментарів — must have для будь-якого проекту.

Гарний код програє швидкому коду за всіма параметрами. Єдиний випадок, коли це правило не діє — якщо після генерації ваш CSS-код доведеться правити комусь вручну. Але це навряд чи.

Так що не бійтеся користуватися extend, але в міру.

Sass не підходить к OOCSS та іншим архітектурним підходам

Все ж підходить.

Для початку уточнимо, що таке OOCSS. Це означає об’єктно-орієнтована CSS (Object-Oriented CSS). В основі підходу лежать два правила:

  • Розділення структури і оформлення
  • Розділення контейнера і контенту

Якщо ви хочете кожному елементу на сторінці призначити свій клас, Sass це дозволяє зробити дуже легко.

Тепер зайдемо з тилу: якщо вам потрібна вкладеність елементів (так може бути зручніше стежити за структурою сторінки), Sass і це зможе. Ви можете призначити один клас батьківського блоку, а всі вкладені елементи оформляти в залежності від рівня вкладеності та імені тега. Як нескладно здогадатися, на Sass це зробити буде набагато простіше, ніж без нього.

css awesome

Зрештою ви навіть можете взяти готовий CSS-файл і перейменувати його в SCSS, а далі використовувати тільки ті функції, які необхідні і допускаються вашим внутрішнім цензором.

Sass в даному випадку нецікаво, який у вас підхід до архітектури сторінки, він просто робить свою роботу і допомагає вам робити вашу.

Вивчіть, як працює компілятор

Якщо у вас є побоювання, що Sass-код буде оброблений «якось не так», пограйте в компілятор. Для цього відкрийте в одній вкладці редактора SCSS-файл, а в іншій — скомпільований CSS.

Після цього заваріть великий кухоль зеленого чаю і вивчіть, як те чи інше правило було оброблено і що вийшло в результаті.

Порада: розмір кухлю обирайте в залежності від розміру проекту.

Також подумайте, як цей CSS вам довелося б писати вручну. Це не ракетний двигун, не потрібно бути доктором наук, щоб розібратися, яким вийде ваш код. Попрацюйте компілятором :)

Sass — це інструмент

Як чоловік в синьому купальнику з буквою S не зможе літати, так і будь-який хлопець з ноутбуком і Sass-компілятором не відразу стає фронт-енд програмістом. Sass — це всього лише спосіб, засіб для спрощення роботи, яку все одно треба робити, з ним або без нього.

Sass не зробить вас крутим, він взагалі нічого не зробить, поки ви не скажете йому. Тому беріть відповідальність в свої руки і вирішуйте самі, як вам зручніше верстати.

Якщо все ж з Sass, то з ймовірністю 97% ви зможете вести себе так:

↑ Тисни «Лайк», щоб читати нас у Фейсбуці

Засновник і керівник видання Tokar.ua. Програміст, адміністратор української Вікіпедії.

Коменти
Дамир

привет, код не scss а sass, встретил такую строку “+kerning(1)”
подскажи плз что означает символ +

Назар Токарь

Хм, такого не встречал. ИЗ дизайна помню, что кернинг это межбуквенный интервал.

PretorDH

По идее значит, что значение наследуемое/по_умолчанию увеличивается на kerning(1).