Освоение новых инструментов является архиважным пунктом, а особенно для front-end разработчиков. Отвлекитесь на некоторое время и вы обязательно что-то пропустите!
В данном обзоре мы рассмотрим 6 отличных инструментов для CSS разработки.
ИНСТРУМЕНТЫ БЕЗ КОТОРЫХ МНЕ НЕ ОБОЙТИСЬ
-
File Watcher и компилятор
Если вы все еще компилируете SASS с помощью командной строки, безусловно, попробуйте автоматизировать процесс. Существует много инструментов, которые могут сделать это за вас, я использую Grunt-Watch, однако есть много других.
Некоторые IDE изначально включают в себя встроенные препроцессоры. Попробуйте и выбере то что подходит вам больше всего.
-
SCSS Библиотеки
SCSS библиотеки это большие наборы инструментов, которые включают в себя всевозможные решения для CSS, начиная от кросс-браузерных фоновых градиентов и заканчивая удобными математическими рассчетами для определения размера шрифта с использованием золотой пропорции.
Популярные библиотеки:
Я использовал Compass в течение нескольких лет, это отличный набор инструментов.
Тем не менее, я обнаружил, что в состоянии сделать гораздо больше, чем было необходимо. Вооружившись полезными знаниями из Compass, я создал легкий пользовательский стек плагинов, которые сократили свое время компиляции моего scss от 4-х секунд до практически мгновенного
-
Автопрефиксер
Больше не нужно беспокоиться об браузерных префиксах.
Автопрефиксер автоматически добавляет необходимые префиксы, основанные на https://caniuse.com. Это самый лучший инструсент для экономии времени из тех что я использовал, настоятельно рекомендую.
-
Animate.css
Я очень люблю создавать свои собственные CSS анимации, но иногда на это просто не хватает времени.
Animate.css позволяет мне быстро добавлять и тестировать анимацию без необходимости самостоятельно продумывать логику создания.
-
KSS styleguide
KSS позволяет создать документированный справочник стилей прямо из вашего CSS, это имеет много преимуществ.
- Вы получаете подкрепление благодаря документированию CSS.
- С помощью документации и визуального справочника стилей, намного легче найти компоненты, и повторно их использовать, больше не нужно гадать был ли он уже создан!
-
CSS минификация с CSS NANO
Автоматическая минификация созданного CSS файла.
CSSNANO также удаляет все ненужные/устаревшие префиксы браузеров, если таковые имеются, а также повторяющиеся классы.