CSScomb: сортировка CSS-свойств с базовой поддержкой препроцессоров и пряниками

в 21:37, , рубрики: css, Веб-разработка

Буквально вчера на Smashing Magazine был опубликован мой текст про CSScomb. Так как узначально я писал его на русском языке, а затем переводил на английский, то я решил опубликовать оригинальный вариант на Хабре.

На момент написания этой статьи браузеры поддерживают около 200 CSS-свойств. Почти все из них вы используете в своих проектах. Самое время задуматься о консистентности не только форматирования кода, но и порядка свойств в рамках каждого селектора. Если вы следите за вашим code style, то эта статья для вас. Представляю вашему вниманию простой способ автоматической сортировки свойств в CSS-коде ваших проектов.

CSScomb.ru

CSScomb — утилита для сортировки CSS-свойств в рамках каждого селектора по заданному порядку. Алгоритм CSScomb максимально повторяет действия веб-технолога при работе с CSS-кодом. Для пересортировки обычно нужно перемещать строки относительно друг друга, учитывая комментарии в коде, многострочные записи значений свойств, хаки и всё, что может встретиться в файле любого серьезного проекта. Это довольно скучное занятие. Но CSScomb без проблем сделает это вместо вас.

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

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

Почему CSScomb вам нужен?

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

CSScomb очень удобен и помогает в профессиональной работе. Вот несколько причин, по которым я рекомендую вам пользоваться этим инструментом для сортировки CSS.

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

Как именно сортировать?

Еще одна причина создания CSScomb: хорошо сортировать свойства не умела ни одна известная мне утилита. Были online-beautifyer-ы, c функцией сортировки. Но, во-первых, это была второстепенная функция, во-вторых, реализованная спустя рукава. Создавалось впечатление, что эти утилиты написали программисты, чтобы продемонстрировать другим программистам свою способность написать хоть что-то.

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

CSScomb: сортировка CSS свойств с базовой поддержкой препроцессоров и пряниками

Сортировка свойств по алфавиту вызывает отдельную улыбку. Жаль, что энтузиасты применяющие её не понимают разницу между группировкой ради группировки и группировкой по функциональному признаку. Сортировка селекторов по алфавиту — за пределами добра и зла.

Единственно верный вариант сортировать свойства — делать это по функциональному принципу. Такой порядок входит в CSScomb по умолчанию. Все свойства разделяются на несколько групп и выстраиваются в наиболее логичном порядке внутри группы.

image

Первоначально я взял порядок сортировки из наверняка известного вам проекта Zen Coding. Но в настоящий момент список свойств-ключей в CSScomb чуть шире. Это связано с нюансами реального CSS. Подробнее о списке сортировки по умолчанию можно посмотреть в репозитории проекта на Github.

В случае необходимости, я предусмотрел две дополнительные возможности:

  1. Возможность поменять порядок сортировки, если вы уже используете другой.
  2. Разбивать группы свойств пустой строкой.

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

Еще существует возможность разбивать свойства на группы. Вот так:

#free .pussy-riot {
    position:absolute;

    margin:1em 0;
    border:20px solid black;

    background:green;
    box-shadow:0 2px 10px #666;
    color:red;

    letter-spacing:3px;
    font-size:72px;
    }

Для этого одномерный массив с порядком свойств нужно сделать двумерным. Примерно так:

[
    [
        "position",
        ...
    ],
    [
        "margin",
        "padding",
        "border",
        ...
    ],
    ...
]

Что умеет CSScomb?

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

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

Все неизвестные свойства (те, что отсутствуют в порядке сортировки) будут перенесены в конец списка, в том порядке, в котором они встретились в рамках одного селектора.

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

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

Расческа не только не удаляет закомментированные свойства, но и сортирует их так, как если бы они не были закомментированными (комментарии сохраняются). И при этом она отличает декларации от текста в комментариях.

Вот пример с несколькими закомментированными декларациями до сортировки:

h1 {
    background: #faf0e6;
    /* border: 2px dashed #800000;
    color: #a0522d; */
    padding: 7px;
    }

А вот он же после обработки CSScomb:

h1 {
    padding: 7px;
    /* border: 2px dashed #800000; */
    background: #faf0e6;
    /* color: #a0522d; */
    }

Как видите, свойства по-прежнему закомментированы, но теперь они разделены, и заняли свои места в соответствии с порядком сортировки.

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

И еще одна злободневная тема. Всем прилежным верстальщикам и технологам известен принцип сортировки свойств с префиксами. В порядке сортировки CSScomb по умолчанию указан порядок, соответствующий принципу перевернутой пирамиды: префиксы от длинного до короткого, а затем свойство без префикса.

-webkit-browser:cool;
-moz-browser:cool;
-ms-browser:cool;
-o-browser:cool;
browser:kewl;

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

Настоящий продукт и планы

Сейчас CSScomb это не только онлайн-демо и версия для командной строки, но и целый набор плагинов для различных редакторов:

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

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

Если вы можете помочь сделать плагин для редактора, которого еще нет в списке (например, Eclipse, Aptana Studio, UltraEdit, Komodo Edit, CSSEdit, Emacs, TopStyle), пожалуйста, свяжитесь со мной.

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

Надеюсь, CSScomb поможет сделать качество вашего кода чуть лучше, количество ошибок по недосмотру меньше, а вас счастливее.

Автор: miripiruni

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js