Education Ecosystem Blog

Russian

Front End инструменты для CSS

Освоение новых инструментов является архиважным пунктом, а особенно для 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 также удаляет все ненужные/устаревшие префиксы браузеров, если таковые имеются, а также повторяющиеся классы.

Dr. Michael J. Garbade

I, Dr. Michael J. Garbade is the co-founder of the Education Ecosystem (aka LiveEdu), ex-Amazon, GE, Rebate Networks, Y-combinator. Python, Django, and DevOps Engineer. Serial Entrepreneur. Experienced in raising venture funding. I speak English and German as mother tongues. I have a Masters in Business Administration and Physics, and a Ph.D. in Venture Capital Financing. Currently, I am the Project Lead on the community project -Nationalcoronalvirus Hotline I write subject matter expert technical and business articles in leading blogs like Opensource.com, Dzone.com, Cybrary, Businessinsider, Entrepreneur.com, TechinAsia, Coindesk, and Cointelegraph. I am a frequent speaker and panelist at tech and blockchain conferences around the globe. I serve as a start-up mentor at Axel Springer Accelerator, NY Edtech Accelerator, Seedstars, and Learnlaunch Accelerator. I love hackathons and often serve as a technical judge on hackathon panels.