There is no preface

This article will recommend the most “hot”, cutting-edge 4 pre/post processing, 12 CSS frameworks and 14 CSS-in-JS libraries in the past two years to help you become a CSS master 👨🏻🦲

Dry goods full remember to collect, learn oh! 🌹

First, pre/post processing

1. Sass

NPM latest weekly download: 3195089

Github stars: 2,797

2021 CSS Annual Survey Report: Ranked # 1 in usage, # 1 in awareness, # 2 in satisfaction and attention

Sass is an auxiliary tool to enhance CSS. It adds advanced functions such as variables, nested rules, mixins, inline imports and so on on the basis of CSS syntax. These extensions make CSS more powerful and elegant. Using Sass and Sass’s style libraries, such as Compass, can help you better organize and manage style files and develop projects more efficiently

Features:

  • Fully compatible with CSS3
  • Add variables, nesting, mixins, and more to CSS
  • Color and attribute values are computed by functions
  • Provide advanced functions such as control directives
  • Customize the output format

Github address: github.com/sass/dart-s…

Official website: www.sass.hk/

2. PostCSS

NPM latest weekly download: 3195089

Github number of Stars: 25706

2021 CSS Annual Survey Report: Ranked 2nd in usage, 3rd in awareness, 1st in satisfaction and attention

PostCSS itself is not a preprocessor; PostCSS is a tool that allows you to transform styles using JS plug-ins. Lint these plugins examine your CSS, support CSS Variables and Mixins, compile advanced CSS syntax not yet widely supported by browsers, inline images, and many other nice features

Github address: github.com/postcss/pos…

Official website: postcss.org/

3. Less

NPM latest weekly download: 2440518

Github number of Stars: 16,714

2021 CSS Annual Survey Report: Ranked 3rd in usage, 2nd in awareness, 4th in satisfaction and attention

Similar to Sass, Less is also CSS preprocessing, it expands the CSS language, increase such as variables, mixin, functions and other functions, so that CSS is easier to maintain, convenient to make themes, expansion

Github address: github.com/less/less.j…

Lesscss.org/

4. Stylus

NPM latest weekly download: 1652661

Github number of Stars: 10,823

2021 CSS Annual Survey Report: Ranked 4th in usage, 4th in awareness, 5th in attention, 3rd in satisfaction

Stylus is a CSS preprocessor that provides an efficient, dynamic and expressive way to generate CSS. Stylus is radical, using indentation, Spaces, and line breaks to reduce the number of characters you need to type. But it is also CSS compatible

Github address: github.com/stylus/styl…

Official website: www.stylus-lang.cn/

Survey report data presentation

2. CSS framework

1. Tailwind CSS

NPM latest weekly download: 1440528

Github number of Stars: 51,843

2021 CSS annual survey report: Ranked first in satisfaction, second in attention, first in usage, and second in awareness

Tailwind CSS is a feature-first CSS framework that integrates classes such as Flex, PT-4, Text-center and rotate-90, which can be combined directly in scripting markup language to build any design

Github address: github.com/tailwindlab…

Tailwindcss.com/

2. PureCSS

NPM latest weekly download: 16,068

Github number of stars: 22127

2021 CSS annual survey report: Ranked no. 2 in satisfaction, No. 2 in attention, No. 8 in usage and No. 9 in awareness

PureCSS is a set of lightweight, responsive, PureCSS modules produced by yahoo inc., suitable for any Web project

Github address: github.com/pure-css/pu…

Purecs.io /

3. Ant Design

2021 CSS annual survey report: Ranked 3rd in satisfaction, 5th in attention, 6th in usage and 7th in awareness

Ant Design is a Design system that supports React and UI frameworks. For example, ANTD is the React UI component library based on Ant Design system, which is mainly used to develop enterprise-level middle and back-end products

Features:

  • 🌈 abstracting from enterprise-level backend products interactive language and visual style.
  • 📦 High-quality React components out of the box.
  • 🛡, developed in TypeScript, provides a complete type definition file.
  • ⚙️ Full link development and design tool system.
  • 🌍 dozens of international languages supported.
  • 🎨 in-depth theme customization capabilities for every detail.

Antd’s NPM latest weekly download: 544381

Antd’s Github earned 76,844 stars

Github address: github.com/ant-design/…

Website address: ant. Design /index-cn

4. Bulma

NPM latest weekly download: 133565

Github number of Stars: 44,866

2021 CSS annual survey report: Ranked 4th in satisfaction, 7th in attention, 5th in usage and 6th in awareness

Bulma is an open source, simple, modern CSS framework based on the Flexbox module (for developing responsive layout structures), pure CSS with no JS code

Features:

  • Lightweight modern CSS framework, using Flexbox
  • Support responsive layout, grid, etc
  • Pure CSS, no Javascript code
  • Customizable and modular

Github address: github.com/jgthms/bulm…

Official website: Bulma. IO /

5. Semantic UI

NPM latest weekly download: 6189

Github number of Stars: 49,774

2021 CSS annual survey Report: Ranked 5th in satisfaction, 4th in attention, 7th in usage and 5th in awareness

Semantic UI — a completely Semantic front-end interface development framework, which is somewhat different from Bootstrap and Foundation, with many differences in functions and features, layout design, and user experience

Features:

  • Documentation and presentations are excellent
  • Easy to learn and use
  • Equipped with grid layout
  • Support Sass and LESS dynamic style languages
  • There are some very useful add-ons, such as the Inverted classes
  • It’s more open to community contributions
  • There is a very nice button implementation, modal verbs, and a progress bar
  • Use icon fonts for many functions

Github address: github.com/semantic-or…

Official site: Semantic-uenter

6. Materialize CSS

Github stars: 412

Fork number: 4881

2021 CSS annual survey report: Ranked 6th in satisfaction, 8th in attention, 3rd in usage and 3rd in awareness

A front-end responsive framework based on Material Design

Github address: github.com/materialize…

Official website: Materializecss.com/

7. UIKit

NPM latest weekly download: 11853

Github stars: 17,280

2021 CSS annual survey Report: Ranked 7th in satisfaction, 6th in attention, 9th in usage and 8th in awareness

UIkit is a lightweight and modular front-end framework developed by the YOOtheme team, which can quickly build powerful Web front-end interfaces. UIKit provides a comprehensive set of HTML, CSS, and JS components that are easy to use, customize, and extend. Developed based on LESS, it has a clear and simple code structure, easy to expand and maintain, and has small, responsive components. You can easily create your favorite theme styles according to the basic STYLE of UIKit

Github address: github.com/uikit/uikit

Getuikit.com/

8. Primer

NPM latest weekly download: 81777

Github star count: 10,706

2021 CSS annual survey report: Ranked 8th in satisfaction, 9th in attention, 11th in usage and 11th in awareness

Github address: github.com/primer/css

Primer. Style /

9. Tachyons

NPM latest weekly download: 29441

Github number of Stars: 11076

2021 CSS annual survey report: Ranked 9th in satisfaction, 10th in attention, 10th in usage and 10th in awareness

Unlike other popular front-end frameworks, Tachyons aims to break CSS rules down into small, manageable, and reusable components. Tachyons help developers create highly readable websites that load and respond quickly without using a lot of CSS code

Github address: github.com/tachyons-cs…

Website: Tachyons.io /

10. Bootstrap

NPM latest weekly download: 2438422

Github number of Stars: 154,754

2021 CSS annual survey report: Ranked 10th in satisfaction, 12th in attention, 1st in usage and 1st in awareness

Bootstrap is an open source toolset for HTML, CSS, and JS development. You can quickly prototype your idea or build an entire app using the Sass variables and a large number of mixins, a responsive grid system, extensible prefabricated components, and a powerful plugin system based on jQuery

Github address: github.com/twbs/bootst…

Website: getbootstrap.com/

11. Halfmoon

NPM latest weekly download: 866

Github number of Stars: 2602

2021 CSS annual survey report: Ranked 11th in satisfaction, 3rd in attention, 12th in usage and 12th in awareness

A built-in dark mode and fully customized front-end framework using CSS variables

Github address: github.com/halfmoonui/…

Official website: www.gethalfmoon.com/

12. Foundation

NPM latest weekly downloads: 662

Fork number: 5683

2021 CSS annual survey report: Ranked 12th in satisfaction, 11th in attention, 4th in usage and 4th in awareness

Github address: github.com/blai/founda…

Get.foundation /

Three, CSS – in – JS library

In short, write CSS libraries using JS

1. Styled Components

NPM latest week downloads: 2,183,303

Github stars: 35,617

2021 CSS Annual Survey Report: Ranked 1st in usage, 1st in awareness, 4th in satisfaction and 5th in attention

Styled – Components is a commonly used CSS in JS class library. As with all libraries of the same type, js empowerment addresses capabilities that native CSS does not

Features:

  • It is possible to load only the minimum code required
  • Class name conflicts resolved
  • CSS is easier to remove:
  • Simple dynamic styles
  • Painless maintenance
  • Provide prefixes automatically

Github address: github.com/styled-comp…

Www.styled-components.com/

2. CSS Modules

Github number of Stars: 15,628

2021 CSS annual survey Report: Ranked no. 2 in usage, No. 2 in awareness, No. 2 in satisfaction and No. 1 in attention

CSS Modules are not a formal declaration or an implementation of a browser, but rather a process of building tools (webpack or Browserify) to bring all classes up to scope

Github address: github.com/css-modules…

3. Styled JSX

NPM latest week downloads: 1,479,156

Github number of Stars: 6,804

2021 CSS annual Survey Report: Ranked 3rd in usage, 3rd in awareness, 11th in satisfaction and 11th in attention

Github address: github.com/vercel/styl…

4. Emotion

NPM latest week downloads: 2,502,832

Github number of Stars: 14,248

2021 CSS Annual Survey Report: Ranked 4th in usage, 4th in awareness, 6th in satisfaction and 10th in attention

Github address: github.com/emotion-js/…

Official website: emotion.sh/docs/ Introd…

5. JSS

NPM latest weekly downloads: 1,741,371

Github number of Stars: 6,584

2021 CSS Annual Survey Report: Ranked 5th in usage, 5th in awareness, 13th in satisfaction and 13th in attention

Github address: github.com/cssinjs/jss

Official website: cssinjs.org/from-sass-t…

6. Styled System

NPM latest week downloads: 368,559

Github stars: 7,132

2021 CSS Annual Survey Report: Ranked 6th in usage, 6th in awareness, 9th in satisfaction and 8th in attention

Github address: github.com/styled-syst…

Www.styled-system.com/

7. Theme UI

NPM latest week downloads: 70,981

Github stars: 4,191

2021 CSS Annual Survey Report: Ranked 7th in usage, 10th in awareness, 7th in satisfaction and 4th in attention

Github address: github.com/system-ui/t…

Website address: theme-uenterp rise

8. Stitches

Github number of stars: 1,033

2021 CSS Annual Survey Report: Ranked 8th in usage, 8th in awareness, 5th in satisfaction and 3rd in attention

Github address: github.com/draeton/sti…

Website address: draeton. Making. IO/stitches

9. Windi CSS

NPM latest week downloads: 23,901

Github stars: 4,231

2021 CSS Annual Survey Report: Ranked 9th in usage, 9th in awareness, 3rd in satisfaction and 9th in attention

Github address: github.com/windicss/wi…

Website: windicss.org/

10. Twin

2021 CSS Annual Survey Report: Ranked 10th in usage, 13th in awareness, 8th in satisfaction and 7th in attention

11. Linaria

NPM latest weekly downloads: 11,032

Github stars: 8485

2021 CSS Annual Survey Report: Ranked 11th in usage, 11th in awareness, 10th in satisfaction and sixth in attention

Github address: github.com/callstack/l…

12. vanilla-extract

NPM latest week downloads: 10,614

Github number of Stars: 4,460

2021 CSS Annual Survey Report: Ranked 12th in usage, 7th in awareness, 1st in satisfaction and 2nd in attention

Github address: github.com/seek-oss/va…

Vanilla -extract. Style /

13. Fela

NPM latest week downloads: 23,006

Github number of Stars: 2,110

2021 CSS Annual Survey Report: 13th in usage, 14th in awareness, 14th in satisfaction, 14th in attention

Github address: github.com/robinweser/…

Official website: fela.js.org/

14. Astroturf

NPM latest week downloads: 4,170

Github stars: 1

2021 CSS Annual Survey Report: Ranked 14th in usage, 12th in awareness, 12th in satisfaction, 11th in attention

Github address: github.com/4Catalyzer/…

Website address: 4 catalyzer. Making. IO/astroturf /

conclusion

Do not master, but ask to understand more, and so on one day when used, will play a certain role

That’s all the recommended content of this article, please like and bookmark 🤦❤