без предисловия
В этой статье будут рекомендованы самые «популярные» и передовые технологии за последние два года.4пре/пост обработка,12CSS-фреймворк и14Библиотека CSS-in-JS, которая поможет вам стать мастером CSS 👨🏻🦲
Сухих товаров полно, не забудьте собрать их и усердно учитесь! 🌹
Во-первых, предварительно / после обработки
1. Sass
Последние еженедельные загрузки на npm:3195089
Количество звезд, выигранных github:2797
Годовой отчет CSS за 2021 год: 1-е место по использованию, 1-е место по осведомленности, 2-е место по удовлетворенности и вниманию
Sass — это вспомогательный инструмент для усиления CSS. Он добавляет расширенные функции, такие как переменные, вложенные правила, примеси и встроенный импорт на основе синтаксиса CSS. Эти расширения делают CSS более мощным и элегантным. Используйте Sass и библиотеку стилей Sass, напримерCompass) помогает лучше организовать файлы стилей и более эффективно разрабатывать проекты
Особая функция:
- Полностью совместим с CSS3.
- Добавляйте в CSS переменные, вложенность, примеси и т. д.
- пройти черезфункцияВыполнять операции над значениями цвета и значениями атрибутов
- поставкауправляющие директивыи другие расширенные функции
- Пользовательский формат вывода
адрес гитхаба:GitHub.com/sass/hot-day-is…
Адрес официального сайта:www.sass.hk/
2. PostCSS
Последние еженедельные загрузки на npm:3195089
Количество звезд, выигранных github:25706
Годовой отчет CSS за 2021 год: второй по использованию, третий по осведомленности, первый по удовлетворенности и вниманию
Сам PostCSS не является препроцессором, PostCSS — это инструмент, позволяющий преобразовывать стили с помощью JS-плагинов. Эти плагины могут анализировать ваш CSS, поддерживать CSS-переменные и миксины, компилировать расширенный синтаксис CSS, еще не широко поддерживаемый браузерами, встроенные изображения и многие другие замечательные функции.
адрес гитхаба:GitHub.com/post CSS/сломанный…
Адрес официального сайта:postcss.org/
3. Less
Последние еженедельные загрузки на npm:2440518
Количество звезд, выигранных github:16714
Годовой отчет CSS за 2021 г.: 3-е место по использованию, 2-е место по осведомленности, 4-е место по удовлетворенности и вниманию
Подобно Sass, Less также выполняет предварительную обработку CSS, расширяя язык CSS и добавляя такие функции, как переменные, примеси, функции и т. д., упрощая поддержку CSS, создание тем и расширение.
адрес гитхаба:GitHub.com/less/less Просто…
Адрес официального сайта:lesscss.org/
4. Stylus
Последние еженедельные загрузки на npm:1652661
Количество звезд, выигранных github:10823
Годовой отчет CSS за 2021 год: четвертое место по использованию, четвертое по осведомленности, пятое по вниманию и третье по удовлетворенности.
Stylus — это препроцессор CSS, обеспечивающий эффективный, динамичный и выразительный способ создания CSS. Стилус агрессивен, используя отступы, пробелы и символы новой строки, чтобы уменьшить количество символов, которые необходимо ввести. Но также совместим с синтаксисом CSS
адрес гитхаба:Github.com/stylus/The World горячий и холодный ...
Адрес официального сайта:www.stylus-lang.cn/
Отображение данных отчета о расследовании
2. CSS-фреймворк
1. Tailwind CSS
Последние еженедельные загрузки на npm:1440528
Количество звезд, выигранных github:51843
Годовой отчет CSS за 2021 год: первое место по удовлетворенности, второе по вниманию, первое по использованию, второе по осведомленности.
Tailwind CSS — это ориентированная на функции CSS-инфраструктура, которая интегрируется сflex, pt-4, text-center а также rotate-90Такие классы, которые можно комбинировать непосредственно в скриптовом языке разметки для построения любого дизайна
адрес гитхаба:GitHub.com/tailwind horn…
Адрес официального сайта:tailwindcss.com/
2. PureCSS
Последние еженедельные загрузки на npm:16068
Количество звезд, выигранных github:22127
Годовой отчет CSS за 2021 год: второй по удовлетворенности, второй по вниманию, восьмой по использованию, девятый по осведомленности
PureCSS — это набор легких, отзывчивых чистых модулей css, созданных Yahoo USA, подходящих для любого веб-проекта.
адрес гитхаба:GitHub.com/чистый-CSS/чистый…
Адрес официального сайта:purecss.io/
3. Ant Design
Годовой отчет CSS за 2021 год: третье место по удовлетворенности, пятое по вниманию, шестое по использованию и седьмое по осведомленности.
Ant Design — это система дизайна, включающая поддержку таких фреймворков, как React и UI, например,antdЭто библиотека компонентов пользовательского интерфейса React, основанная на системе проектирования Ant Design, которая в основном используется для разработки продуктов среднего и внутреннего уровня на уровне предприятия.
характеристика:
- 🌈 Извлечено из интерактивного языка и визуального стиля продуктов среднего и внутреннего уровня для предприятий.
- 📦 Высококачественные компоненты React из коробки.
- 🛡 Разработано с помощью TypeScript, предоставляя полные файлы определения типов.
- ⚙️ Полная система инструментов для разработки и дизайна ссылок.
- 🌍 Поддержка десятков интернационализированных языков.
- 🎨 Возможности глубокой настройки темы в каждой детали.
Последние еженедельные загрузки npm от antd:544381
Гитхаб Antd выигрывает по количеству звезд:76844
адрес гитхаба:GitHub.com/Анта-дизайн/…
Адрес официального сайта:ant.design/index-cn
4. Bulma
Последние еженедельные загрузки на npm:133565
Количество звезд, выигранных github:44866
Годовой отчет CSS за 2021 год: четвертое место по удовлетворенности, седьмое по вниманию, пятое по использованию, шестое по осведомленности
Bulma — это простой и современный CSS-фреймворк с открытым исходным кодом, основанный на модуле flexbox (для разработки адаптивной структуры макета), чистый css без кода js.
характеристика:
- Легкий современный фреймворк CSS с использованием Flexbox
- Поддерживает адаптивные макеты, сетки и многое другое.
- Чистый CSS, без кода Javascript
- Настраиваемый и модульный
адрес гитхаба:GitHub.com/Хотя скоро/Бремен…
Адрес официального сайта:bulma.io/
5. Semantic UI
Последние еженедельные загрузки на npm:6189
Количество звезд, выигранных github:49774
Годовой отчет CSS за 2021 год: 5-е место по удовлетворенности, 4-е место по вниманию, 7-е место по использованию и 5-е место по осведомленности.
Semantic UI — полностью семантический фреймворк для разработки интерфейсов, по сравнению с Bootstrap и Foundation, все же несколько отличается, есть много отличий в функциональных характеристиках, дизайне компоновки и пользовательском опыте.
Функции:
- Документация и демо очень хороши
- Простота в освоении и использовании
- Оснащен сеткой
- Поддержка языков динамического стиля Sass и LESS.
- Есть несколько очень полезных дополнительных конфигураций, таких как инвертированный класс
- относительно открыт для вклада сообщества
- Имеет очень хорошую реализацию кнопок, модальных окон и индикаторов выполнения.
- Используйте иконочные шрифты для многих функций
адрес гитхаба:GitHub.com/semantic-или…
Адрес официального сайта:semantic-ui.com/
6. Materialize CSS
Количество звезд, выигранных github:412
Количество вилок:4881
Годовой отчет CSS за 2021 год: 6-е место по удовлетворенности, 8-е место по вниманию, 3-е место по использованию и 3-е место по осведомленности.
Интерфейсная адаптивная структура, основанная на Material Design.
адрес гитхаба:GitHub.com/materialize…
Адрес официального сайта:materializecss.com/
7. UIKit
Последние еженедельные загрузки на npm:11853
Количество звезд, выигранных github:17280
Годовой отчет CSS за 2021 год: 7-е место по удовлетворенности, 6-е место по вниманию, 9-е место по использованию и 8-е место по осведомленности.
UIkit — это легкий и модульный интерфейсный фреймворк, разработанный командой YOOtheme, с помощью которого можно быстро создать мощный веб-интерфейс. UIKit предоставляет комплексные компоненты HTML, CSS и JS, которые просты в использовании, легко настраиваются и расширяются. Он разработан на основе LESS, структура кода понятна и проста, его легко расширять и поддерживать, он имеет небольшие и отзывчивые адаптивные компоненты.Вы можете легко настраивать и создавать свои любимые стили темы в соответствии с основными стилями UIKit.
адрес гитхаба:github.com/uikit/uikit
Адрес официального сайта:getuikit.com/
8. Primer
Последние еженедельные загрузки на npm:81777
Количество звезд, выигранных github:10706
Годовой отчет CSS за 2021 год: 8-е место по удовлетворенности, 9-е место по вниманию, 11-е место по использованию и 11-е место по осведомленности.
адрес гитхаба:github.com/primer/css
Адрес официального сайта:primer.style/
9. Tachyons
Последние еженедельные загрузки на npm:29441
Количество звезд, выигранных github:11076
Годовой отчет CSS за 2021 год: 9-е место по удовлетворенности, 10-е место по вниманию, 10-е место по использованию и 10-е место по осведомленности.
В отличие от других популярных интерфейсных фреймворков, Tachyons стремится разбить правила CSS на небольшие, управляемые и повторно используемые части. Tachyons помогает разработчикам создавать хорошо читаемые, быстро загружаемые и отзывчивые веб-сайты без использования большого количества кода CSS.
адрес гитхаба:GitHub.com/tachyons — В настоящее время…
Адрес официального сайта:tachyons.io/
10. Bootstrap
Последние еженедельные загрузки на npm:2438422
Количество звезд, выигранных github:154754
Годовой отчет CSS за 2021 год: 10-е место по удовлетворенности, 12-е место по вниманию, первое место по использованию и первое место по осведомленности.
Bootstrap — это набор инструментов с открытым исходным кодом для разработки HTML, CSS и JS. Быстро создайте прототип своей идеи или создайте целое приложение с нашими вариантами Sass и множеством миксинов, адаптивной системой сетки, расширяемыми готовыми компонентами и мощной системой плагинов на основе jQuery.
адрес гитхаба:GitHub.com/TaiwanNot/boots T…
Адрес официального сайта:getbootstrap.com/
11. Halfmoon
Последние еженедельные загрузки на npm:866
Количество звезд, выигранных github:2602
Ежегодный отчет CSS за 2021 год: 11-е место по удовлетворенности, 3-е место по вниманию, 12-е место по использованию, 12-е место по осведомленности.
Внешний фреймворк со встроенным темным режимом и полной настройкой с использованием переменных CSS.
адрес гитхаба:GitHub.com/интерфейс полумесяца/…
Адрес официального сайта:www.gethalfmoon.com/
12. Foundation
Последние еженедельные загрузки на npm:662
количество вилок:5683
Годовой отчет CSS за 2021 год: 12-е место по удовлетворенности, 11-е место по вниманию, 4-е место по использованию и 4-е место по осведомленности.
адрес гитхаба:GitHub.com/originally/found А…
Адрес официального сайта:get.foundation/
3. Библиотека CSS-in-JS
Короче говоря, используйте JS для написания библиотеки CSS.
1. Styled Components
Последние еженедельные загрузки на npm:2,183,303
Количество звезд, выигранных github:35,617
Годовой отчет CSS за 2021 год: первое место по использованию, первое по осведомленности, четвертое по удовлетворенности и пятое по вниманию.
styled-components — это широко используемая библиотека классов css в js. Как и все библиотеки классов того же типа, расширение возможностей js решает проблемы, которых нет в нативном css.
характеристика:
- Можно загрузить только минимальный необходимый код
- конфликт имени класса разрешен
- CSS легче удалить:
- простой динамичный стиль
- Безболезненное обслуживание
- Автоматически предоставлять префикс
адрес гитхаба:GitHub.com/styled-comp…
Адрес официального сайта:styled-components.com/
2. CSS Modules
Количество звезд, выигранных github:15628
Годовой отчет CSS за 2021 год: второй по использованию, второй по осведомленности, второй по удовлетворенности и первый по вниманию
Модули CSS — это не формальное объявление или реализация браузера, а процесс приведения всех классов в область действия с помощью инструмента сборки (webpack или Browserify).
адрес гитхаба:GitHub.com/CSS-модули…
3. Styled JSX
Последние еженедельные загрузки на npm:1,479,156
Количество звезд, выигранных github:6804
Ежегодный отчет CSS за 2021 год: третье место по использованию, третье место по осведомленности, одиннадцатое место по удовлетворенности и одиннадцатое внимание
адрес гитхаба:GitHub.com/verstrategy/В мире и жарко, и холодно…
4. Emotion
Последние еженедельные загрузки на npm:2,502,832
Количество звезд, выигранных github:14248
Ежегодный отчет CSS за 2021 год: 4-е место по использованию, 4-е место по осведомленности, 6-е место по удовлетворенности и 10-е место по вниманию
адрес гитхаба:GitHub.com/emotion-just/…
Адрес официального сайта:эмоции. взято из /docs/intro…
5. JSS
Последние еженедельные загрузки на npm:1,741,371
Количество звезд, выигранных github:6584
Годовой отчет CSS за 2021 год: 5-е место по использованию, 5-е место по осведомленности, 13-е место по удовлетворенности и 13-е место по вниманию
адрес гитхаба:github.com/cssinjs/jss
Адрес официального сайта:Сиси Чен, это.org/from-sass-he…
6. Styled System
Последние еженедельные загрузки на npm:368,559
Количество звезд, выигранных github:7132
Годовой отчет CSS за 2021 год: шестое место по использованию, шестое по осведомленности, девятое по удовлетворенности и восьмое по вниманию.
адрес гитхаба:GitHub.com/styled-Вор года…
Адрес официального сайта:styled-system.com/
7. Theme UI
Последние еженедельные загрузки на npm:70,981
Количество звезд, выигранных github:4191
Годовой отчет CSS за 2021 год: 7-е место по использованию, 10-е место по осведомленности, 7-е место по удовлетворенности и 4-е место по вниманию
адрес гитхаба:GitHub.com/system-UI/he…
Адрес официального сайта:theme-ui.com/
8. Stitches
Количество звезд, выигранных github:1033
Годовой отчет CSS за 2021 год: 8-е место по использованию, 8-е место по осведомленности, 5-е место по удовлетворенности и 3-е место по вниманию
адрес гитхаба:GitHub.com/Конечно, Итон/Тело…
Адрес официального сайта:draeton.github.io/stitches/
9. Windi CSS
Последние еженедельные загрузки на npm:23,901
Количество звезд, выигранных github:4231
Годовой отчет CSS за 2021 год: девятое место по использованию, девятое по осведомленности, третье по удовлетворенности и девятое по вниманию
адрес гитхаба:GitHub.com/win-css/i...
Адрес официального сайта:windicss.org/
10. Twin
Годовой отчет CSS за 2021 год: 10-е место по использованию, 13-е место по осведомленности, 8-е место по удовлетворенности и 7-е место по вниманию
11. Linaria
Последние еженедельные загрузки на npm:11,032
Количество звезд, выигранных github:8485
Годовой отчет CSS за 2021 год: 11-е место по использованию, 11-е место по осведомленности, 10-е место по удовлетворенности и 6-е место по вниманию
адрес гитхаба:GitHub.com/стек вызовов/приходите…
12. vanilla-extract
Последние еженедельные загрузки на npm:10,614
Количество звезд, выигранных github:4460
Годовой отчет CSS за 2021 год: 12-е место по использованию, 7-е место по осведомленности, первое место по удовлетворенности и второе место по вниманию
адрес гитхаба:GitHub.com/seek-OSS/VA…
Адрес официального сайта:vanilla-extract.style/
13. Fela
Последние еженедельные загрузки на npm:23,006
Количество звезд, выигранных github:2110
Годовой отчет CSS за 2021 год: 13-е место по использованию, 14-е место по осведомленности, 14-е место по удовлетворенности и 14-е место по вниманию
адрес гитхаба:GitHub.com/Робин Везер/…
Адрес официального сайта:fela.js.org/
14. Astroturf
Последние еженедельные загрузки на npm:4,170
Количество звезд, выигранных github:1
Годовой отчет CSS за 2021 год: 14-е место по использованию, 12-е место по осведомленности, 12-е место по удовлетворенности и 11-е место по вниманию
адрес гитхаба:GitHub.com/4catalyzer/…
Адрес официального сайта:4catalyzer.github.io/astroturf/
Эпилог
Не обязательно все осваивать, но чтобы больше в этом разбираться, это сыграет определенную роль, когда однажды будет использовано.
Вышеизложенное — это весь рекомендуемый контент в этой статье, добро пожаловать в избранное 🤦❤