Свежие инструменты 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 для поддержки внутренних стилей. Он может быть интегрирован непосредственно в вашу среду для разработки в качестве компилятора.

Данная публикация представляет собой перевод статьи «Fresh CSS Tools for Optimizing Your Websites» , подготовленной дружной командой проекта Интернет-технологии.ру