Инструменты форматирования, организации и приведения в порядок кода CSS

admin

9 лет назад

Если вы уже супер-опытный веб-дизайнер, то, возможно, не столкнетесь с этой проблемой. Ваши файлы CSS окажутся связно и лаконично структурированными, каждый селектор будет заботливо размещен, каждое свойство идеально отформатировано… в общем, ваш CSS будет смотреться как тщательно созданное произведение искусства. Если это описание вам подходит, то, пожалуйста, проходите мимо, этот пост – не для вас.
Но если вы один из 99,9% веб-дизайнеров, постоянно работающих с CSS, то читайте.

Сами знаете, как это бывает – начинаете новый веб-проект с «голым» файлом CSS и по мере построения сайта ваш CSS быстро растет. И продолжит расти. Он станет неорганизованным, а временами запутанным и даже нечитаемым. Структура окончательно потеряется. Будет сделана тьма ошибок. Однако не волнуйтесь, такое случается со всеми.
На этом этапе вы можете сделать одно из двух: останавливаться на разных уровнях и переструктурировать CSS, или же подождать окончания работы над сайтом и исправить все разом. Так или иначе, в зависимости от размера сайта это займет много времени.

Ах, если бы только для форматирования, организации и сортировки CSS был набор инструментов нам в помощь. К счастью, он существует. Учтите, эти инструменты не имеют «защиты от дурака». Они ничего не знают о том уникальном стиле, который вы применяете при написании CSS, но помогут вам и сэкономят много времени. Времени, которое можно потратить на приведение в беспорядок еще одного файла CSS!

CSS Comb – инструмент сортировки свойств CSS в определенном порядке

Обычно для переупорядочения кода CSS вы перемещаете строки одну над другой, принимая во внимание комментарии, многострочные записи значений свойств, хаки и все прочее, имеющееся в реально существующем файле. CSScomb делает это за вас. Это – умный инструмент, который отсортирует свойства CSS из вашей таблицы стилей и, исходя из установок, позволит расставить их в определенном порядке.

csscss – анализатор избыточности CSS

csscss – тот драгоценный камень, который произведет анализ любого файла CSS и скажет вам, какие наборы правил объявлены дважды. Чтобы узнать, как применяется cssscss, щелкните здесь.

Helium CSS – инструмент JS для сканирования сайта и показа неиспользуемого CSS

Helium – инструмент, находящий неиспользуемый CSS на множестве страниц вебсайта. Helium берет список URL’ов различных разделов сайта, затем загружает и подвергает анализу каждую страницу, выстраивая список всех таблиц стилей. Затем посещает каждую страницу из списка URL’ов и проверяет, используются ли на страницах селекторы из таблиц стилей. Далее он генерирует подробный отчет по каждой таблице стилей и селекторах, которые не применяются на данных страницах.

CSSO –оптимизация структурны CSS файлов

Будучи, кроме прочего, программой минимизации CSS, CSSO также способен выполнять структурную оптимизацию файлов CSS, в результате чего получается гораздо меньший файл по сравнению с другими минимизаторами. Он объединит блоки с идентичными селекторами и свойствами, удалит отмененные свойства и двойные селекторы, частично объединит блоки, уберет пустые наборы правил и, кроме прочего, минимизирует свойства полей и отступов.

CSS Beautifier – автоматически сделает чиаемым ваш CSS

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

CSS Beautifier возьмет следующий CSS…

menu{color:red} navigation{background-color:#333}

…и произведет:

menu {
color: red
}
navigation {
background-color: #333
}

CSS Lint- помогает отыскать ошибки вашего кода CSS

CSS Lint – это инструмент, помогающий определить проблемы внутри кода CSS. Он проверяет базовый синтаксис, а также применяет к коду набор правил, отыскивающий проблемные шаблоны или признаки неэффективности. Все правила сменные, поэтому вы можете с легкостью написать свои собственные или пропустить ненужные.