- PVSM.RU - https://www.pvsm.ru -
Буквально вчера на Smashing Magazine [1] был опубликован мой текст про CSScomb. Так как узначально я писал его на русском языке, а затем переводил на английский, то я решил опубликовать оригинальный вариант на Хабре.
На момент написания этой статьи браузеры поддерживают около 200 CSS-свойств. Почти все из них вы используете в своих проектах. Самое время задуматься о консистентности не только форматирования кода, но и порядка свойств в рамках каждого селектора. Если вы следите за вашим code style, то эта статья для вас. Представляю вашему вниманию простой способ автоматической сортировки свойств в CSS-коде ваших проектов.
CSScomb — утилита для сортировки CSS-свойств в рамках каждого селектора по заданному порядку. Алгоритм CSScomb максимально повторяет действия веб-технолога при работе с CSS-кодом. Для пересортировки обычно нужно перемещать строки относительно друг друга, учитывая комментарии в коде, многострочные записи значений свойств, хаки и всё, что может встретиться в файле любого серьезного проекта. Это довольно скучное занятие. Но CSScomb без проблем сделает это вместо вас.
Алгоритм CSScomb по своей природе «думает» как человек редактирующий текст, а не как слепой робот, разбирающий CSS по косточкам. Это позволяет утилите оставаться простой.
А теперь немного подробностей для тех зануд и перфекционистов, кому это по душе.
Я работал в нескольких командах, где был разный code style. Это касалось не только принципов именования, длины строки, пробелов, табуляций и отступов, но и порядка, в котором записывались CSS-свойства. Следить за порядком вручную было не слишком комфортно. Кроме того, иногда приходилось работать со старым кодом или чужим кодом, не соответствующим нашему code style. И я решил сделать максимально простую утилиту выполняющую только одну функцию — сортировку свойств в рамках каждого селектора.
CSScomb очень удобен и помогает в профессиональной работе. Вот несколько причин, по которым я рекомендую вам пользоваться этим инструментом для сортировки CSS.
Еще одна причина создания CSScomb: хорошо сортировать свойства не умела ни одна известная мне утилита. Были online-beautifyer-ы, c функцией сортировки. Но, во-первых, это была второстепенная функция, во-вторых, реализованная спустя рукава. Создавалось впечатление, что эти утилиты написали программисты, чтобы продемонстрировать другим программистам свою способность написать хоть что-то.
Особенно поражали настройки. Так, например, очевидно, что сортировка всех свойств длине — это несерьезно. При попытке применить эти сортировки к реальным файлам вы сразу увидите все минусы. Например: top
, right
, bottom
и left
окажутся оторваны друг от друга. Не говоря уже о том, что c алфавитным порядков все свойства с префиксом будут свалены в кучу.
Сортировка свойств по алфавиту вызывает отдельную улыбку. Жаль, что энтузиасты применяющие её не понимают разницу между группировкой ради группировки и группировкой по функциональному признаку. Сортировка селекторов по алфавиту — за пределами добра и зла.
Единственно верный вариант сортировать свойства — делать это по функциональному принципу. Такой порядок входит в CSScomb по умолчанию. Все свойства разделяются на несколько групп и выстраиваются в наиболее логичном порядке внутри группы.
Первоначально я взял порядок сортировки из наверняка известного вам проекта Zen Coding. Но в настоящий момент список свойств-ключей в CSScomb чуть шире. Это связано с нюансами реального CSS. Подробнее о списке сортировки по умолчанию можно посмотреть в репозитории проекта [3] на Github.
В случае необходимости, я предусмотрел две дополнительные возможности:
Для настройки порядка сортировки 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",
...
],
...
]
Хотя я лично придерживаюсь правила «одна строка — одно свойство», расческа абсолютно всеядна в вопросах oneline/multiline и форматирования кода. Её задача просто поменять порядок свойств.
Все одинаковые свойства будут пересортированы друг за другом в том порядке, в котором они встретились в рамках одного селектора.
Все неизвестные свойства (те, что отсутствуют в порядке сортировки) будут перенесены в конец списка, в том порядке, в котором они встретились в рамках одного селектора.
Отдельно я уделил внимание особенностям реального CSS-кода. Расческа прекрасно справляется:
}
expression
для IEdatauri
, 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 это не только онлайн-демо [4] и версия для командной строки, но и целый набор плагинов для различных редакторов:
Весь процесс планирования и разработки прозрачен и доступен на странице проекта [5] на Github. На момент написания этой статьи выпущен CSScomb 2.11 и уже запланирована следующая версия. За обновлениями и новостями можно следить в твиттере проекта [6].
Если вы можете помочь сделать плагин для редактора, которого еще нет в списке (например, Eclipse, Aptana Studio, UltraEdit, Komodo Edit, CSSEdit, Emacs, TopStyle), пожалуйста, свяжитесь со мной.
Вся необходимая информация включая онлайн-сортировщик и подробные группы тестов с описанием есть на сайте проекта CSScomb.ru [7].
Надеюсь, CSScomb поможет сделать качество вашего кода чуть лучше, количество ошибок по недосмотру меньше, а вас счастливее.
Автор: miripiruni
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/css/16395
Ссылки в тексте:
[1] Smashing Magazine: http://coding.smashingmagazine.com/2012/10/02/csscomb-tool-sort-css-properties/
[2] Image: http://CSScomb.ru
[3] в репозитории проекта: https://github.com/miripiruni/CSScomb/wiki/Sort-Order-CSS-Properties-(CSScomb-v2.11)
[4] онлайн-демо: http://csscomb.ru/online/
[5] на странице проекта: http://github.com/miripiruni/CSScomb/
[6] твиттере проекта: http://twitter.com/CSScomb/
[7] CSScomb.ru: http://csscomb.ru/
Нажмите здесь для печати.