想成为CSS大师,你倒是学啊 ->30个资源大推荐
点击上方 前端瓶子君,关注公众号
回复算法,加入前端编程面试算法每日一题群
没有前言
本文将爆肝推荐近两年来,最“火爆”、最前沿的4
个预/后处理、12
个CSS框架以及14
个CSS-in-JS库,助你成为CSS大师👨🏻🦲
干货满满记得收藏,好好学哦!🌹
一、预/后处理
1. Sass
npm最新周下载量:3195089
github斩获star数:2797
2021 CSS年度调查报告:使用度排名第一、认知度第一、满意度和关注度排名第二
Sass 是一款强化 CSS 的辅助工具,它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能,这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库(如 Compass[1])有助于更好地组织管理样式文件,以及更高效地开发项目
特色功能:
完全兼容 CSS3 在 CSS 基础上增加变量、嵌套 (nesting)、混合 (mixins) 等功能 通过函数[2]进行颜色值与属性值的运算 提供控制指令 \(control directives\)[3]等高级功能 自定义输出格式
github地址:github.com/sass/dart-s…[4]
![](https://filescdn.proginn.com/1869c9da4925ee0e59b44b7f38f46591/bb8733da056dcbb199772dd8c20f6d90.webp)
官网地址: www.sass.hk/[5]
![](https://filescdn.proginn.com/ca2d94e60973c5f7bdfe2e6fd3571b3d/ab8bfb44c93175a7277cdf34b1cbfc2d.webp)
2. PostCSS
npm最新周下载量:3195089
github斩获star数:25706
2021 CSS年度调查报告:使用度排名第二、认知度第三、满意度和关注度排名第一
PostCSS本身不是预处理器,PostCSS 是一个允许使用 JS 插件转换样式的工具。这些插件可以检查(lint)你的 CSS,支持 CSS Variables 和 Mixins, 编译尚未被浏览器广泛支持的先进的 CSS 语法,内联图片,以及其它很多优秀的功能
github地址:github.com/postcss/pos…[6]
![](https://filescdn.proginn.com/a6328a14d358b12ce33ae6ea0e714b2a/2e1dbdc213d5aa95bdfe983cc22d9854.webp)
官网地址: postcss.org/[7]
![](https://filescdn.proginn.com/52645eb452234e461cbe6900664b7a1a/465b3976e56a70710306290a844005f3.webp)
3. Less
npm最新周下载量:2440518
github斩获star数:16714
2021 CSS年度调查报告:使用度排名第三、认知度第二、满意度和关注度排名第四
跟Sass类似,Less 也是是CSS 预处理,它扩充了 CSS 语言,增加了诸如变量、混合(mixin)、函数等功能,让 CSS 更易维护、方便制作主题、扩充
github地址:github.com/less/less.j…[8]
![](https://filescdn.proginn.com/0e757e37323f6ff01ccf417a5d51d912/d484a01e90235e5eb250a2a9304e1689.webp)
官网地址: lesscss.org/[9]
![](https://filescdn.proginn.com/aec122906fe8441c770371e8f752aa03/8f2d8e35194e05a9d597b3d6047dc43b.webp)
4. Stylus
npm最新周下载量:1652661
github斩获star数:10823
2021 CSS年度调查报告:使用度排名第四、认知度第四、关注度第五,满意度第三
Stylus是一个CSS预处理器,提供一种高效、动态和富有表现力的方式来生成CSS。Stylus 比较激进,利用缩进、空格和换行来减少需要输入的字符。不过同时也兼容CSS语法
github地址:github.com/stylus/styl…[10]
![](https://filescdn.proginn.com/953a2de15b960fe6ebb6465e4f9a009d/b62301cbdfac349c8fa2fa9147a458b8.webp)
官网地址: www.stylus-lang.cn/[11]
![](https://filescdn.proginn.com/3bec0f7899d3841b026af73268f09af2/4c86c5f3fd79f3d0867a4d928821e0ac.webp)
调查报告数据展示
![](https://filescdn.proginn.com/bf461f02357f4625d0e9d3bc74e62562/8f928b6b5bfe79cee45515161a0aec4c.webp)
二、CSS框架
1. Tailwind CSS
npm最新周下载量:1440528
github斩获star数:51843
2021 CSS年度调查报告:满意度排名第一、关注度排名第二、使用度排名第一、认知度排名第二
Tailwind CSS 是一个功能类优先的 CSS 框架,它集成了诸如 flex
, pt-4
, text-center
和 rotate-90
这样的的类,它们能直接在脚本标记语言中组合起来,构建出任何设计
github地址:github.com/tailwindlab…[12]
![](https://filescdn.proginn.com/2ac18589b6e4ad1f2bf88b750c7c7e4a/aceca8e8cf0572176f370c915179b5a3.webp)
官网地址: tailwindcss.com/[13]
![](https://filescdn.proginn.com/8801147acb1ee6b56f1930cb4813219a/09d902a453f0594cb145a5c190749df0.webp)
2. PureCSS
npm最新周下载量:16068
github斩获star数:22127
2021 CSS年度调查报告:满意度排名第二、关注度排名第二、使用度排名第八、认知度排名第九
PureCSS是美国雅虎公司出品的一组轻量级、响应式纯css模块,适用于任何Web项目
github地址:github.com/pure-css/pu…[14]
![](https://filescdn.proginn.com/dc5b1112caf1bd57c8e819e8503f47e2/5e6bce6b779678ca8581c91a0bb39ed9.webp)
官网地址: purecss.io/[15]
![](https://filescdn.proginn.com/156a7629ceb4a5ce4763ff0a04b6ff1a/e062860387a14d28d28a8d96125f05b7.webp)
3. Ant Design
2021 CSS年度调查报告:满意度排名第三、关注度排名第五、使用度排名第六、认知度排名第七
Ant Design 是一个设计体系,其中包括支持React和UI等框架,举例,antd
就是基于 Ant Design 设计体系的 React UI 组件库,主要用于研发企业级中后台产品
特性:
🌈 提炼自企业级中后台产品的交互语言和视觉风格。 📦 开箱即用的高质量 React 组件。 🛡 使用 TypeScript 开发,提供完整的类型定义文件。 ⚙️ 全链路开发和设计工具体系。 🌍 数十个国际化语言支持。 🎨 深入每个细节的主题定制能力。
antd的npm最新周下载量:544381
antd的github斩获star数:76844
github地址:github.com/ant-design/…[16]
![](https://filescdn.proginn.com/f0541234f9cc47827c41267ed8d63cc2/a802b267d7f2af58e8c6710cadb1822b.webp)
官网地址: ant.design/index-cn[17]
![](https://filescdn.proginn.com/65ec4c46ecb4536a938b81bdc4771621/4904695e42cc95cfff2348966cb4e6a6.webp)
4. Bulma
npm最新周下载量:133565
github斩获star数:44866
2021 CSS年度调查报告:满意度排名第四、关注度排名第七、使用度排名第五、认知度排名第六
Bulma是一个开源、简单、现代的CSS框架,它基于flexbox模块(用于开发响应式布局结构),纯css没有js代码
特性:
轻量级的现代CSS框架,使用Flexbox 支持响应式布局,网格等 纯CSS,没有Javascript代码 可定制、模块化
github地址:github.com/jgthms/bulm…[18]
![](https://filescdn.proginn.com/ab9de8fe9817217a7279c05bf0fc00ce/3093d52f1d9f9f49863bbe228dc3e851.webp)
官网地址: bulma.io/[19]
![](https://filescdn.proginn.com/1bbe06b347fe65986ac617d342e6e64a/f5fe7f0af885ede08e1800076aaccf2c.webp)
5. Semantic UI
npm最新周下载量:6189
github斩获star数:49774
2021 CSS年度调查报告:满意度排名第五、关注度排名第四、使用度排名第七、认知度排名第五
Semantic UI—完全语义化的前端界面开发框架,跟 Bootstrap 和 Foundation 比起来,还是有些不同的,在功能特性上、布局设计上、用户体验上均存在很多差异
特点:
文档和演示非常完善 易于学习和使用 配备网格布局 支持 Sass 和LESS 动态样式语言 有一些非常实用的附加配置,例如inverted类 对于社区贡献来说是比较开放的 有一个非常好的按钮实现,情态动词,和进度条 在许多功能上使用图标字体
github地址:github.com/semantic-or…[20]
![](https://filescdn.proginn.com/2a796133841d90889e661d5a7fe5f5c9/b8ad3336a9745824786ff584348d3642.webp)
官网地址: semantic-ui.com/[21]
![](https://filescdn.proginn.com/712352d6213db926bdbd645ef378c202/8ed367f88d00828edfa73f80d15b7d7b.webp)
6. Materialize CSS
github斩获star数:412
fork数: 4881
2021 CSS年度调查报告:满意度排名第六、关注度排名第八、使用度排名第三、认知度排名第三
一个基于Material Design的前端响应式框架
github地址:github.com/materialize…[22]
![](https://filescdn.proginn.com/4344083c03b6b72bb2df3c9d3e7c8494/398fa789e76ca3dd58eb2548bf8cd1ef.webp)
官网地址: materializecss.com/[23]
![](https://filescdn.proginn.com/e870ae37303755c925d9f344024de09a/2a9c7bd1be44193df5e70abcdc99c23f.webp)
7. UIKit
npm最新周下载量:11853
github斩获star数:17280
2021 CSS年度调查报告:满意度排名第七、关注度排名第六、使用度排名第九、认知度排名第八
UIkit 是 YOOtheme 团队开发的一款轻量级、模块化的前端框架,可快速构建强大的web前端界面。UIKit提供了全面的HTML、CSS及JS组件,它们使用简单,容易定制和扩展。它基于LESS开发,代码结构清晰简单,易于扩展和维护,并且具有体积小、反应灵敏的响应式组件,你可以根据 UIKit 基本的风格样式,轻松地自定义创建出自己喜欢的主题样式
github地址:github.com/uikit/uikit[24]
官网地址: getuikit.com/[25]
![](https://filescdn.proginn.com/19e21f2552808276d05a7f3973596ddd/d30010590a366ecedda3aa83f92335b3.webp)
8. Primer
npm最新周下载量:81777
github斩获star数:10706
2021 CSS年度调查报告:满意度排名第八、关注度排名第九、使用度排名第十一、认知度排名第十一
github地址:github.com/primer/css[26]
![](https://filescdn.proginn.com/944afc3dc05d291ae78331cdba565de2/0f17a4fc1f1a8873a1ef7859ef0a3590.webp)
官网地址: primer.style/[27]
![](https://filescdn.proginn.com/0d04fb9a424e407113d2db604475ec94/e3fe1bfa30389dc5534da4437c59087b.webp)
9. Tachyons
npm最新周下载量:29441
github斩获star数:11076
2021 CSS年度调查报告:满意度排名第九、关注度排名第十、使用度排名第十、认知度排名第十
与其他流行的前端框架不同,Tachyons旨在将CSS规则分解为小型的、可管理的、以及可复用的部件。Tachyons可以帮助开发人员创建出具有高度可读性、能够快速加载和响应的网站,而且无需使用大量CSS代码
github地址:github.com/tachyons-cs…[28]
官网地址: tachyons.io/[29]
![](https://filescdn.proginn.com/876439d412a122db2d20fed7e4b156c6/d33369926395079a0e28535007ea4414.webp)
10. Bootstrap
npm最新周下载量:2438422
github斩获star数:154754
2021 CSS年度调查报告:满意度排名第十、关注度排名第十二、使用度排名第一、认知度排名第一
Bootstrap 是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插件系统,能够快速为你的想法开发出原型或者构建整个 app
github地址:github.com/twbs/bootst…[30]
官网地址:getbootstrap.com/[31]
![](https://filescdn.proginn.com/fe885ac6ad78f66fb29710a5202b7029/4b38754fd1c88aba3a213912620fe3f4.webp)
11. Halfmoon
npm最新周下载量:866
github斩获star数:2602
2021 CSS年度调查报告:满意度排名第十一、关注度排名第三、使用度排名第十二、认知度排名第十二
一个内置暗模式和完全定制使用CSS变量的前端框架
github地址:github.com/halfmoonui/…[32]
官网地址: www.gethalfmoon.com/[33]
![](https://filescdn.proginn.com/53e09e571de2c2a5630f1241210ed1ed/0aa08c88e7d5f0a6cc229e60c6487148.webp)
12. Foundation
npm最新周下载量:662
fork 数: 5683
2021 CSS年度调查报告:满意度排名第十二、关注度排名第十一、使用度排名第四、认知度排名第四
github地址:github.com/blai/founda…[34]
官网地址: get.foundation/[35]
![](https://filescdn.proginn.com/560770237915419b82059b793e3eeb11/f9ca520147469a77da832eca3ec23c11.webp)
三、 CSS-in-JS库
简言之,就是使用JS编写CSS库
1. Styled Components
npm最新周下载量:2,183,303
github斩获star数:35,617
2021 CSS年度调查报告:使用度排名第一、认知度排名第一、满意度排名第四、关注度排名第五
styled-components 是一个常用的 css in js 类库。和所有同类型的类库一样,通过 js 赋能解决了原生 css 所不具备的能力
特性:
可以实现仅加载所需的最少代码 解决了 class name 冲突 CSS 更容易移除: 简单的动态样式 无痛维护 自动提供前缀
github地址:github.com/styled-comp…[36]
![](https://filescdn.proginn.com/4d6a6183857214f7dfdb91098225e629/b3e16b0b71ddf4c4444da1272e689517.webp)
官网地址:styled-components.com/[37]
![](https://filescdn.proginn.com/63314f111d715e87d334c28fc4cd4aad/90340832633ade1d7164ad4472856191.webp)
2. CSS Modules
github斩获star数:15628
2021 CSS年度调查报告:使用度排名第二、认知度排名第二、满意度排名第二、关注度排名第一
CSS Modules并不是一个正式的声明或者是浏览器的一个实现,而是通过构建工具(webpack or Browserify)来使所有的class达到scope的一个过程
github地址:github.com/css-modules…[38]
![](https://filescdn.proginn.com/c500979e25f9da89b6b2569aba7d6788/4ccf2331f8a553139f26c44680f916d1.webp)
3. Styled JSX
npm最新周下载量:1,479,156
github斩获star数:6804
2021 CSS年度调查报告:使用度排名第三、认知度排名第三、满意度排名第十一、关注度排名第十一
github地址:github.com/vercel/styl…[39]
![](https://filescdn.proginn.com/82c58e4c1c95bd30aa97f8fa98932029/2b380c574bc036485e40602302b895a4.webp)
4. Emotion
npm最新周下载量:2,502,832
github斩获star数:14248
2021 CSS年度调查报告:使用度排名第四、认知度排名第四、满意度排名第六、关注度排名第十
github地址:github.com/emotion-js/…[40]
官网地址:emotion.sh/docs/introd…[41]
![](https://filescdn.proginn.com/fc4845caf1b6963e5c4db10f523de2f1/d29af63192ba822c3fd368ee9afff444.webp)
5. JSS
npm最新周下载量:1,741,371
github斩获star数:6584
2021 CSS年度调查报告:使用度排名第五、认知度排名第五、满意度排名第十三、关注度排名第十三
github地址:github.com/cssinjs/jss[42]
![](https://filescdn.proginn.com/5a5b3e097bc1713f9202758f2a9e27e3/cfbc60af7fbbcfa2700a16f7d1d051cc.webp)
官网地址:cssinjs.org/from-sass-t…[43]
![](https://filescdn.proginn.com/080273401b88aab75c478ea83112ae14/93a7f79c6ed831dbb039b2994a8fc286.webp)
6. Styled System
npm最新周下载量:368,559
github斩获star数:7132
2021 CSS年度调查报告:使用度排名第六、认知度排名第六、满意度排名第九、关注度排名第八
github地址:github.com/styled-syst…[44]
![](https://filescdn.proginn.com/04c6c867138507553d1f9ed7183d8fa2/2eede8a4b89c335248459e70fafb9074.webp)
官网地址:styled-system.com/[45]
![](https://filescdn.proginn.com/0a3aacdceeea19aed2d6509b8ea7998f/e432978d2441e7a2a7cd359e9d73733c.webp)
7. Theme UI
npm最新周下载量:70,981
github斩获star数:4191
2021 CSS年度调查报告:使用度排名第七、认知度排名第十、满意度排名第七、关注度排名第四
github地址:github.com/system-ui/t…[46]
![](https://filescdn.proginn.com/466ef20fe3835fc3a152076ad3572c0e/a3c7cbb3c3fd162e2d5852411b2c1e85.webp)
官网地址:theme-ui.com/[47]
![](https://filescdn.proginn.com/6960f0b1faa476d1a4273184cb0eeb17/ac04ebfae897d9896338ba08b61f96c1.webp)
8. Stitches
github斩获star数:1033
2021 CSS年度调查报告:使用度排名第八、认知度排名第八、满意度排名第五、关注度排名第三
github地址:github.com/draeton/sti…[48]
官网地址:draeton.github.io/stitches/[49]
![](https://filescdn.proginn.com/d62cd45511f316e7bd848b1961bc551b/033322fbee586ab7a1762cf2f8be5e70.webp)
9. Windi CSS
npm最新周下载量:23,901
github斩获star数:4231
2021 CSS年度调查报告:使用度排名第九、认知度排名第九、满意度排名第三、关注度排名第九
github地址:github.com/windicss/wi…[50]
![](https://filescdn.proginn.com/b4cadfcc0b092e51baa82ad0b0ac20a6/60443e424fe3c7f6b928934ab17ae9b8.webp)
官网地址:windicss.org/[51]
![](https://filescdn.proginn.com/f797ac8a027065d646d2bd8ef6a5b28f/ff8025e87d48d3043966b573e2f1a2b0.webp)
10. Twin
2021 CSS年度调查报告:使用度排名第十、认知度排名第十三、满意度排名第八、关注度排名第七
11. Linaria
npm最新周下载量:11,032
github斩获star数:8485
2021 CSS年度调查报告:使用度排名第十一、认知度排名第十一、满意度排名第十、关注度排名第六
github地址:github.com/callstack/l…[52]
![](https://filescdn.proginn.com/f45371667558b4b6ca3453fcc397b841/f6fda4492c905913680d648b3a7fe669.webp)
12. vanilla-extract
npm最新周下载量:10,614
github斩获star数:4460
2021 CSS年度调查报告:使用度排名第十二、认知度排名第七、满意度排名第一、关注度排名第二
github地址:github.com/seek-oss/va…[53]
![](https://filescdn.proginn.com/34c4e8972430f8ad45d88bbd28db6e13/cf927d95b65f103386e6afe604d6ffe3.webp)
官网地址:vanilla-extract.style/[54]
13. Fela
npm最新周下载量:23,006
github斩获star数:2110
2021 CSS年度调查报告:使用度排名第十三、认知度排名十四、满意度排名第十四、关注度排名第十四
github地址:github.com/robinweser/…[55]
![](https://filescdn.proginn.com/8836be93909ce51b3cf487391e597eb5/405fa2a392aac7f10d62518557c749be.webp)
官网地址:fela.js.org/[56]
![](https://filescdn.proginn.com/66b14a78f6bdb98444b748e7e6958cfb/123878a08c952e14430a9b0b2ecb996f.webp)
14. Astroturf
npm最新周下载量:4,170
github斩获star数:1
2021 CSS年度调查报告:使用度排名第十四、认知度排名第十二、满意度排名第十二、关注度排名第十一
github地址:github.com/4Catalyzer/…[57]
![](https://filescdn.proginn.com/67c9407dd8bdad15a16a63773ba190d0/e1e9481199c99749b3e2b6b1fa8f03d0.webp)
官网地址:4catalyzer.github.io/astroturf/[58]
![](https://filescdn.proginn.com/eab9e3e93aed7b4833802829c5c35769/d60ba056653c840bd006d57a92ec6667.webp)
结语
不求都掌握,但求都多了解一些,等有一天用到时,就会发挥一定的作用
以上就是本文的所有推荐内容啦,欢迎点赞、收藏🤦❤
来自:LBJ
https://juejin.cn/post/7050004833260027935