Свежие инструменты CSS для оптимизации сайтов

В этой статье мы расскажем вам о 15 новых инструментах CSS для оптимизации сайтов. Данные инструменты просты в использовании и содержат множество полезных функций. Они помогают сделать интересным даже процесс решения очень сложных задач.

1. CSSgram

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

2. CSS Nano

CSSNano - это модульный минимизатор, который в основном использует небольшие модули из PostCSS. Так как он разработан на базе PostCSS, инструмент способен на продвинутые методы оптимизации, такие как пользовательское сокращение идентификаторов, изменение Z-индекса элементов и слияние соседних селекторов.

3. Mimic

Mimic - позволяет легко управлять стилями через классы. Для этого нужно просто изменить имя класса.

4. Motion UI

Motion UI - это библиотека Sass для создания гибкой анимации и переходов CSS. Раньше она являлась частью Foundation для Apps, но затем ее сделали независимой библиотекой с открытым исходным кодом.

5. Corpus

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

6. Jet.js

Jets.js - оригинальный поисковый движок CSS. Jets.js работает с любыми тегами, он значительно быстрее, чем другие поисковые инструменты. Движок работает во всех современных стационарных и мобильных браузерах.

7. PostCSS

PostCSS - инструмент для преобразования стилей с помощью плагинов JS. Эти плагины могут поддерживать переменные и примеси, задавать будущий синтаксис CSS, встроенные изображения и многое другое. Сам PostCSS очень компактен. Он включает в себя только CSS-парсер, API дерева узлов CSS, генератор исходных блоков правил и инструмент разбивки дерева узлов на строки.

8. Fox CSS

Fox CSS - это компактный CSS-фреймворк и набор для сброса стилей одновременно. Защищенный, модульный, он использует систему сеток на базе Flexbox. Каждый класс в этом фреймворке принадлежит пространству имен. Поэтому вы можете использовать его в сочетании с любым другим фреймворком.

9. Sanitize.css

Sanitize.css позволяет выводить элементы последовательно во всех браузерах. С его помощью вы можете использовать лучшие практики на данный момент.

10. UnCSS

UnCSS позволяет удалять неиспользуемые стили CSS. Он поддерживает включения JavaScript в CSS и может работать с несколькими файлами.

11. PocketGrid

PocketGrid - система сеток на CSS. Полностью адаптивная, гибкая, семантически выстроенная, использующая принцип mobile-first.

12. CSS Plus

Инструмент для создания гибких макетов на базе flexbox. Он позволяет задать гибкий родительский контейнер, дочерние элементы которого также меняют свой размер, когда изменяется размер контейнера.

13. ReactCSS

ReactCSS позволяет использовать классы во встроенных стилях. Он использует структуру данных на основе классов, сохраняет все стили вместе и многое другое. Используйте синтаксис “is”, чтобы без особых усилий вложить встроенные стили в HTML-элементы и спрэды и таким образом настроить пользовательские компоненты. Храните HTML и стили компонентов в одном месте. Отделите логику стилей от логики отображения и бизнес-логики.

14. Rucksack

Rucksack разработан на базе PostCSS и включает в себя такие функции, как адаптивные шрифты, входные стили и многое другое.

15. Recess

Простой инструмент для повышения качества CSS кода, разработанный в Twitter на базе Less для поддержки внутренних стилей. Он может быть интегрирован непосредственно в вашу среду для разработки в качестве компилятора.