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 🤦❤