0,0
рейтинг
3 октября 2012 в 01:37

Разработка → CSScomb: сортировка 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 по умолчанию. Все свойства разделяются на несколько групп и выстраиваются в наиболее логичном порядке внутри группы.

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 в базовой поддержкой LESS и SASS и уже запланирована следующая версия. За обновлениями и новостями можно следить в твиттере проекта.

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

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

Надеюсь, CSScomb поможет сделать качество вашего кода чуть лучше, количество ошибок по недосмотру меньше, а вас счастливее.
Вячеслав Олиянчук @miripiruni
карма
48,0
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Разработка

Комментарии (44)

  • +4
    О! Чудесно, спасибо.
    Хотелось бы для NetBeans плагин.
    • 0
      И для Visual Studio, пожалуйста.
  • +18
    #free .pussy-riot {

    Как тонко.
    • 0
      На SM эту часть зарезали :*(
    • +1
      Только это малость неточно, к сожалению:

      color: red;
      


      Вернее было бы:

      color: purple;
      
  • 0
    Miripiruni, спасибо за перевод, что-то на SM не осилил сходу прочитать.
    Буквально несколько дней назад начал использовать расческу, очень счастлив, ввожу в code style guide обязательное пользование в процессе разработки и перед коммитом.
    • НЛО прилетело и опубликовало эту надпись здесь
  • 0
    Спасибо!

    Только у меня в ST2 не работает, пишет: «There was an error sorting CSS». Пробовал на живом файле и на просто кусочке.
    • +1
      Ах ты ж, требования не прочёл, ему php надо установленный.
    • 0
      Попробуйте в \tools\Data\Packages\CSScomb\csscomb\basesort.py так (shell на True):

      myprocess = subprocess.Popen(['php',csscomb_path,self.original], shell=True, stdout=subprocess.PIPE)
      
  • 0
    Забавная необязательная штука. Может быть именно потому необязательная и хочется ее использовать.
  • +1
    Поменять порядок сортировки так же легко, как и переставить местами примерно 200 его элементов

    проще простого прямо :)
  • 0
    Пора осваивать написание плагинов под Эклипс/Аптану, судя по всему.

    Так и не появилось за год+ ничего. (
    • 0
      К сожалению, я даже и не пытался. Не знаю как под них обвязку написать. Может поможете?
      • 0
        Я тоже не представляю, буду гуглить, может что-то получится
      • 0
        Как вариант для Eclipse, нашел способ запускать csscomb как стороннюю утилиту. Через «external tools».
        Примерный алгоритм настройки описан здесь: www.simplecoding.org/zapusk-storonnix-programm-iz-eclipse.html

        Т.е. в нашем случае:
        — качаем плагин для Notepad++
        — извлекаем из него файл csscomb.php
        — пишем bat файл такого вида: php.exe csscomb.php "%1" (путь к php должен быть внесен в переменную PATH)
        — в Eclipse в Run→External tools→Configuration создаем запуск внешней утилиты (как описано по ссылке)

        Параметры в нашем случае будут примерно такие:


        Для запуска выделяем файл в списке файлов проекта (Eclipse explorer) и выбираем «External tool→CSS_Comb».
        (Ждем 3-7 секунд и файл, если был открыт, автоматически обновиться).
        • 0
          Спасибо!

          Пока перенес инструкцию в Issue 34. Чуть позже попробую оформить как плагин.
    • 0
      Да, очень бы хотелось…
  • +1
    Раньше сортировал свойства вручную, помнил наизусть порядок свойств. За пару лет пользования CSScomb совсем избаловался — пишу как попало, порядок свойств не помню.
  • 0
    Хехе, писал подобную утилитку 3 года назад, до человекоудобного использования так и не довёл, не хватило моральных сил) А так практически весь описанный функционал был реализован.
    Автору спасибо, надеюсь для кого то это будет полезно!
    • +1
      Я этот проект как раз три года назад и начал. Просто не бросаю и довожу до ума.
      • 0
        Это правильно и похвально.
  • 0
    Спасибо! Поставил в Sublime Text — работает :)
    • +6
      Похоже баг какой-то… :)
      • 0
        Наверное, линукс.
  • 0
    Есть небольшой косячек со свойством background-clip, то которое указано без префикса убегает выше остальных
    s2.ipicture.ru/uploads/20121003/YPbSkWzA.png
    • 0
      Я думаю на гитхаб нужно баг запостить, надежнее.
  • 0
    Где скачать плагин для Intellij IDEA? В репозитории его нет, на гитхабе ссылки нет.
    • 0
      Есть.

      csscomb_for_webstorm-pycharm-idea_2-11.zip на страницу загрузок.
      • 0
        Вот спасибо.
        Я искал в репозитории JetBrains, думаю стоит добавить его и туда.
  • 0
    Спасибо! Особенно за Espresso
    Будем попробовать
  • 0
    Wimdows 7 (32), Sublime Text 2:

    Sorter Error: attempt to sort non-existent file
    • 0
      Такая же фигня, хотя по инструкции все сделал, и php --version в консольку отдается
    • 0
      У меня возникает такой баг при большом размере файлы.
    • 0
  • 0
    Для работы плугинов нужен установленный PHP? too bad :(
  • 0
    Не бросайте проект, пожалуйста.
  • 0
    А для несчастных у которых не работает cssComb так как <Sorter Error: attempt to sort non-existent file>, есть какой нибудь альтернативный css процессор? Не обязательно плагин, можно отдельной утилитой. Как-то я достойного ничего не нашел пока
    • 0
      Как минимум нужно понять что является причиной. Это или это. Если что-то другое — нужен новый issue.
      • 0
        Большое спасибо. Еще раз попробовал, оказалось все таки косяк в PHP — не внимательно патч прописал, еще раз перепроверил, исправил на правильный, все заработало.
  • 0
    Очень интересно про плагин для notepad++ узнать больше, в самом редакторе в менеджере плагинов я не нашел его.
    • 0
      Плагин для Notepad++ лежит на сайте: csscomb.com Когда скачаете архив, найдете в нём инструкции по установке.
      • 0
        зашел на csscomb.com
        We are working on something amazing.
        Come back a bit later.

        Ждем онлайн версию.
        • 0
          Да, тоже часто пользуюсь этим инструментом и вдруг такая неожиданность.

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