Education Ecosystem Blog

Освоение новых инструментов является архиважным пунктом, а особенно для front-end разработчиков. Отвлекитесь на некоторое время и вы обязательно что-то пропустите!

В данном обзоре мы рассмотрим 6 отличных инструментов для CSS разработки.

ИНСТРУМЕНТЫ БЕЗ КОТОРЫХ МНЕ НЕ ОБОЙТИСЬ

1. File Watcher и компилятор

Если вы все еще компилируете SASS с помощью командной строки, безусловно, попробуйте автоматизировать процесс. Существует много инструментов, которые могут сделать это за вас, я использую Grunt-Watch, однако есть много других.

Некоторые IDE изначально включают в себя встроенные препроцессоры. Попробуйте и выбере то что подходит вам больше всего.

2. SCSS Библиотеки

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

Популярные библиотеки:

• Bourbon
• Compass
• PostCSS

Я использовал Compass в течение нескольких лет, это отличный набор инструментов.

Тем не менее, я обнаружил, что в состоянии сделать гораздо больше, чем было необходимо. Вооружившись полезными знаниями из Compass, я создал легкий пользовательский стек плагинов, которые сократили свое время компиляции моего scss от 4-х секунд до практически мгновенного

3. Автопрефиксер

Больше не нужно беспокоиться об браузерных префиксах.

Автопрефиксер автоматически добавляет необходимые префиксы, основанные на https://caniuse.com. Это самый лучший инструсент для экономии времени из тех что я использовал, настоятельно рекомендую.

4. Animate.css

Я очень люблю создавать свои собственные CSS анимации, но иногда на это просто не хватает времени.

Animate.css позволяет мне быстро добавлять и тестировать анимацию без необходимости самостоятельно продумывать логику создания.

5. KSS styleguide

KSS позволяет создать документированный справочник стилей прямо из вашего CSS, это имеет много преимуществ.

1. Вы получаете подкрепление благодаря документированию CSS.
2. С помощью документации и визуального справочника стилей, намного легче найти компоненты, и повторно их использовать, больше не нужно гадать был ли он уже создан!

6. CSS минификация с CSS NANO

Автоматическая минификация созданного CSS файла.

CSSNANO также удаляет все ненужные/устаревшие префиксы браузеров, если таковые имеются, а также повторяющиеся классы.