7 CSS инструментов, которые вам следует использовать

7 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.

Автор: Jacob Gube

Источник: http://sixrevisions.com/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree