Онлайн – инструменты, которые вам следует использовать при работе с CSS
Сейчас становится все сложнее и сложнее писать CSS код. К счастью, есть инструменты, которые немного облегчат процесс его написания. Начиная от нахождения ошибок в ваших таблицах стилей и заканчивая полезными статистическими данными о вашем коде, данные онлайн инструменты несомненно помогут вам в разработке ваших CSS таблиц стилей.
CSS Lint
Инструмент CSS Lint укажет на синтаксические ошибки в коде, а также подсветит потенциальные проблемные места, связанные с браузерной совместимостью, производительностью, доступностью и другими важными аспектами.
Исходный код инструмента CSS Lint доступен на GitHub, если вы захотите запустить его оффлайн на вашем компьютере или веб-сервере. Назначение: Нахождение проблем с кодом, которые не являются очевидными при визуальном анализе кода и после прохождения CSS валидации.
CSS Stats
Инструмент CSS Stats, исходя из названия, предоставляет огромное количество статистической информации о CSS, используемом на вашем сайте, сообщая вам о том, сколько стилевых правил назначено, какие медиа-запросы используются, какие шрифты подключаются и т.д. Альтернативой данного инструмента является StyleStats.
Назначение: Получение детальной информации о CSS сайта для проведения анализа и поиска потенциальных моментов для улучшения.
CSS Shrink
CSS Shrink — это онлайн инструмент для уменьшения размера файла с вашим CSS кодом, что сказывается на улучшении времени загрузки страницы. Он позволяет убрать все ненужное, например, пробелы, комментарии, лишние переводы строк и отступы. Данный процесс называется минификацией.
Минификация делает ваш код трудночитаемым, поэтому ее следует проводить только после завершения процесса разработки, и вам все равно следует сохранить исходный вариант для дальнейшей работы над ним и поддержки. Назначение: Ускорение вашего сайта.
ProCSSor
Данный онлайн инструмент почистит, отформатирует и структурирует ваш CSS код. Самое замечательное — это то, что данный инструмент имеет множество настроек, поэтому у вас будет потрясающий контроль над тем, как ваш код будет отформатирован.
Другими инструментами для форматирования CSS кода являются CSScomb, Code Beautifier и Styleneat. Назначение: Мгновенное форматирование и чистка вашего CSS кода
Codrops CSS Reference
Полезный CSS справочник, созданный на сайте Codrops, может быть использован в качестве инструмента для изучения определенных CSS свойств, псевдо-классов, функций и т.д. Назначение: Знакомство и изучение незнакомых CSS возможностей.
Can I Use (CSS)
Данный справочный инструмент позволит вам в онлайн режиме узнать, насколько хорошо поддерживается та или иная CSS возможность в популярных браузерах. Зная качество браузерной поддержки, вы сможете принимать более взвешенные решения по применению тех или иных возможностей. Назначение: Получение информации о браузерной поддержке CSS возможностей.
Сервис W3C по валидации CSS кода
Данный онлайн инструмент проверит ваши таблицы стилей на их соответствие стандартам W3C. Назначение: Валидация вашего CSS кода для соблюдения требований стандартов W3C.
Бонус: Инструменты разработчика, встроенные в ваш браузер
Пожалуй, самый важный инструмент при написании CSS кода — это инструмент, который у вас уже наверняка есть: расширение DevTools для браузера Chrome, встроенный и доступный через меню браузера набор инструментов разработчика в браузере Firefox (а также специальная версия браузера Firefox под названием Firefox Developer Edition), расширение Web Inspector в браузере Safari и Инструменты разработчика, вызывающиеся клавишей F12, в браузере IE.
Данные инструменты разработчика не являются, строго говоря, онлайн помощниками, и будут доступны даже при отсутствии Интернет-соединения, но это те инструменты, которые вам точно следует использовать при написании CSS кода. Встроенные инструменты разработчика буквально битком набиты возможностями, которые предназначены для исправления ошибок, анализа и профилирования вашего CSS.
Расширение DevTools в браузере Chrome — мое любимое расширение из всех — может, например, профилировать ваш CSS, чтобы помочь вам выявить проблемные моменты, связанные с производительностью и замедляющие отрисовку и рендеринг страницы.
Назначение: Поиск ошибок, анализ и профилирование вашего CSS.
Источник
