CSScomb сортування CSS-властивостей з базовою підтримкою препроцесорів та пряниками

Алгоритм CSScomb за своєю природою «думає» як людина, що редагує текст, а не як сліпий робот, що розбирає CSS по кісточках. Це дозволяє утиліті залишатися простою.

А тепер трохи подробиць для тих зануд та перфекціоністів, кому це до душі.

Чому потрібний CSScomb?

Я працював у кількох командах, де був різний code style. Це стосувалося не лише принципів іменування, довжини рядка, прогалин, табуляцій та відступів, але й порядку, в якому записувалися CSS-властивості. Стежити за порядком вручну було не надто зручно. Крім того, іноді доводилося працювати зі старим кодом або чужим кодом, який не відповідає нашому code style. І я вирішив зробити максимально просту утиліту, яка виконує лише одну функцію — сортування властивостей у рамках кожного селектора.

CSScomb дуже зручний та допомагає у професійній роботі. Ось кілька причин, з яких я рекомендую вам користуватися цим інструментом для сортування CSS.

  1. CSScomb підтримує code style. Це важливо у довгострокових проектах, де код постійно правлять, переписують, замінюють. Одноманітність та незалежність від учасників процесу можуть поставити вас у умови, коли доведеться стежити за кожним символом. У такій ситуації CSScomb допоможе розвантажити вашу увагу та дасть можливість сконцентруватися на важливіших речах.
  2. CSScomb спрощує розуміння коду. Код написаний мною, моїми колегами, сторонніми програмістами буде передбачувано відсортований, і, отже, зручний розуміння.
  3. CSScomb прискорює доступ до потрібних властивостей. Ви зможете швидше знаходити потрібну ділянку коду і витрачати на це менше зусиль, переглядаючи потрібну частинупереліку декларацій.
  4. CSScomb запобігає дурним помилкам. Перевизначення властивостей, що знаходяться в різних частинах списку декларацій, тепер будуть малоймовірні, тому що однакові властивості будуть відсортовані. Взаємовиключні властивості тепер також будуть як на долоні.

Як саме сортувати?

Ще одна причина створення CSScomb: добре сортувати властивості не вміла жодна відома мені утиліта. Були online-beautifyer-и, з функцією сортування. Але, по-перше, це була другорядна функція, по-друге, реалізована абияк. Складалося враження, що ці утиліти написали програмісти, щоби продемонструвати іншим програмістам свою здатність написати хоч щось.

Особливо вражали налаштування. Приміром, очевидно, що сортування всіх властивостей довжині — це несерйозно. При спробі застосувати ці сортування до реальних файлів, ви відразу побачите всі мінуси. Наприклад: top , right , bottom і left виявляться відірвані друг від друга. Не кажучи вже про те, що з алфавітним порядком усі властивості з префіксом будуть звалені в купу.

Сортування властивостей за абеткою викликає окрему посмішку. Шкода, що ентузіасти, що застосовують її, не розуміють різницю між угрупуванням задля угруповання і угрупуванням за функціональною ознакою. Сортування селекторів за алфавітом - за межами добра і зла.

Єдино правильний варіант сортувати властивості - робити це за функціональним принципом. Такий порядок входить до CSScomb за промовчанням. Усі властивості поділяються кілька груп і вибудовуються у найбільш логічному порядку всередині групи.

У разі потреби я передбачив дві додаткові можливості:

  1. Можливість змінити порядок сортування, якщо ви використовуєте інший.
  2. Розбивати групи властивостейпорожній рядок.

Для налаштування порядку сортування CSS-властивостей використовується одновимірний масив JSON з перерахованими властивостями. Поміняти порядок сортування так само легко, як і переставити місцями приблизно 200 елементів. Я сподіваюся ви мало мотивовані це робити, тому я приготував найбільш раціональний варіант за умовчанням.

Ще є можливість розбивати властивості групи. Ось так:

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

Що вміє CSScomb?

Хоча я особисто дотримуюся правила «один рядок — одна властивість», гребінець абсолютно всеосяжний у питаннях oneline/multiline і форматування коду. Її завдання легко змінити порядок якостей.

Всі однакові властивості будуть пересортовані одна за одною у тому порядку, в якому вони зустрілися в рамках одного селектора.

Усі невідомі властивості (ті, що відсутні в порядку сортування) будуть перенесені до кінця списку, у тому порядку, в якому вони зустрілися в рамках одного селектора.

Окремо я приділив увагу особливостям реального CSS-коду. Гребінець чудово справляється:

  • із сортуванням властивостей із багаторядковим значенням
  • з хаками (ви ж ними не зловживаєте, правда?)
  • c перевизначення властивостей, іноді ненавмисних, а іноді усвідомлено написаних для підтримки деградації
  • c відсутністю останньої точки з комою перед >
  • з expression для IE
  • з datauri , HTML entities , @rules та іншими лексичними конструкціями CSS
  • і всім, що можна зустріти у складному проекті.

А ось він після обробки CSScomb:

І ще одна злободенна тема. Всім старанним верстальникам та технологам відомий принцип сортуваннявластивостей із префіксами. У порядку сортування CSScomb за умовчанням вказано порядок, що відповідає принципу перевернутої піраміди: префікси від довгого до короткого, а потім властивість без префіксу.

Справжній продукт та плани

  • Sublime Text 2 (в Package Control)
  • TextMate
  • Coda
  • Coda 2
  • Espresso 2
  • IntelliJ IDEA
  • WebStorm
  • PyCharm
  • Notepad++
  • Vim

Весь процес планування та розробки прозорий та доступний на сторінці проекту на Github. На момент написання цієї статті випущено CSScomb 2.11 і вже заплановано наступну версію. За оновленнями та новинами можна стежити у твіттері проекту.

Вся необхідна інформація, включаючи онлайн-сортирувальник та докладні групи тестів з описом, є на сайті проекту CSScomb.ru.

Сподіваюся, CSScomb допоможе зробити якість вашого коду трохи краще, кількість помилок з недогляду менше, а вас щасливіше.