splitcss — как получить больше контроля над вашим и не вашим css кодом или Мой микро-сервис по работе с css в стиле web 2.0

Вы когда нибудь сталкивлись с css кошмаром? Единственным файлом, наполненным стилями 5-6 разработчиков, без четкой организации, группировки по типам и разделения по группам?

Я вот сталкивался. Не раз. И в очередной раз не выдержал.

Так появился микро веб-сервис splitcss.com splitcss.kozachek.net — первоначальная цель которого — разделение css кода

Нужно было перелопатить целую кучу css кода, убрать повторы, убрать ошибки, хаки, проверить вендорные селекторы для css3 свойств. В общем много чего нужно было. А файл был больше 2 тысяч строк и ни во всех местах каждое свойство было на своей собственной строчке.

В общем дорога предстояла дальняя и не легкая, а действовать нужно было быстро. К небольшому удивлению для себя, начал я с программирования. Я решил, что чтобы идти быстрее, можно потратить некоторое время «на переобувку».

Изначально, когда я сделал первый рабочий набросок splitcss.com splitcss.kozachek.net, он выглядел как два текстовых поля и кнопка на белом листе. В первом поле я вставлял код, во втором получал нужный результат. Все настройки делал прямо в коде.

Сейчас splitcss выглядит несколько иначе:

Методов загрузки css кода три — прямая вставка, загрузка по url и загрузка с диска. С drug’n’drop я выпендриваться не стал, все равно это не критично, так что оставил на потом.

Настройки я конечно же вынес в интерфейс:

В разделе настроек «Разделение CSS» можно отделить:

цвет — все свойства, которые содержать color (в том числе background-color, border-color и другие)

шрифт — соответственно все содержащее font

изображения — background-image, list-style-image, etc

псевдоселекторы — :hover, :active, ::selection и другие

вендорные свойства — имеющие префиксы -moz-, -o-, -webkit, -ms-, а также filter и expression для IE.

В зависимости от выбранных пунктов, на странице результата будут заполнены соответствующие текстовые поля. Все, что не попало под фильтры будет выведено в поле «Остальное»

Внимание: При вырезании фильтры псевдоселекторов и допустим цвета могут перекрывать друг друга, для чуть большего контроля над этим существует раздел настроек «Приоритеты».

С параметрами в разделах «Сортировка» и «Стиль кода» думаю все понятно и так.

Раздел настроек «Кроссбраузерность» содержит пока единственную настройку «Реструктурировать вендорные свойства». Если выбрать этот пункт, то вендорные свойства для border-radius, text-shadow, box-shadow и opacity будут удалены и прописаны заново в соответствии с задекларированными css свойствами. Если вендорных не будет вовсе, то они будут созданы.

На владке «Результат» можно получить выбранные части вашего css файла. Во вкладке «Все, форматировано» находится весь листинг кода без каких либо изменений в содержании (ну по идее) ).

Внизу страницы находятся кнопки скачивания разных версий кода.

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

Вообще по большому счет проект задумывался как «задача на выходные», а получилось, что с момента задумки до момента запуска прошло около месяца.

Проект находится в стадии beta. Из текущих и непофиксенных багов знаю только о том, что множественные background’ы (какие в основном используются для linear-gradient, насколько я знаю) не поддерживаются. Постараюсь, чтобы это было временно.

О следующих сервисах я знал. Я не ровнялся на них, я нашёл их когда проверял, не реализовал ли кто-то splitcss до меня.

http://www.prettyprinter.de/module.php?name=PrettyPrinter

http://www.cssoptimiser.com/

http://iceyboard.no-ip.org/projects/css_compressor

http://www.codebeautifier.com/

http://styleneat.com/

http://www.cleancss.com/

http://www.lonniebest.com/FormatCSS/

Полезно(0)Бесполезно(0)

Добавить комментарий