2018年你应该知道的9个用于CSS组件化的JS库

一个特别有趣的概念是在CSS中使用JS将CSS抽象到组件级别本身，使用JavaScript以声明和可维护的方式描述样式。因此，我们列出了一些有用的入门项目。您还可以阅读此推荐讨论以帮助您做出正确的决定，这是一个非常酷的项目比较。让我们深入了解一下。1.澳大利亚威士忌酒吧Styled组件的一个想法变成了18K的star项目，在社区中被广泛采用。Styled-Components通过使用封装样式定义样式组件而不使用CSS类作为中间层，使得在React组件中使用CSS变得更容易。样式化组件是通过使用ES6模板文字符号定义组件来创建的。可以根据需要将CSS属性添加到组件，就像您通常使用CSS所做的那样。在解析JS时，styled-components会生成唯一的类名，并将CSS注入到DOM中。您可以在MaxStoiber的精彩演讲中了解更多信息。提示：Styled-components也可以与Bit结合使用，以便在应用程序之间共享它们并在视觉游乐场中进行开发。看一看。styled-components/styled-components_styled-components-组件时代的视觉原语。使用ES6和CSS的最佳部分来设计您的应用程序......_github.com[](https://github.com/styled-com..另请参阅：Wix-Eng的Stylable仍在开发中。2.Radium在6.5K星，由FormidableLabs创建，Radium被定义为“用于React组件样式化的工具链”。它是使用React管理的，无需CSS内联样式化的工具集。Radium提供标准接口和抽象，用于处理内联样式化无法轻松容纳的CSS功能.Radium允许您将样式与React组件捆绑在一起，结合javascript、html和样式。它还提供基于props的渲染，允许您根据应用程序的状态设置组件样式。FormidableLabs/radium_radium-React组件样式的工具链._github.com[](https://github.com/Formidable...3.AphroditeAphrodite是一个独立于框架的CSS-in-JS库，支持服务器端渲染,浏览器前缀和最少的CSS生成。Aphrodite将所有内容转换为类并使用class属性。在4Kstars，这个项目可以使用或不使用React，以及注入样式Dom、自动前缀样式等功能。汗/阿芙罗狄蒂_aphrodite-与框架无关的CSS-in-JS，支持服务器端渲染、浏览器前缀和最小CSS..._github.com[](https://github.com/Khan/aphro...4.情感4.2K星，Emotion是一个高性能和灵活的CSS-in-JS库，允许您使用字符串或对象样式来设计您的应用程序。它具有可预测的组合以避免CSS特异性问题。基于glam库及其理念，我们的想法是通过使用babel和PostCSS解析样式来在编写CSS时保持运行时性能。核心运行时为2.3kb，React支持为4kb。emotion-js/emotion_emotion-styleasafunctionofstate_github.com[](https://github.com/emotion-js...5.Glamorous注意：虽然这个项目不再积极维护！它仍然很酷：)在3.6Kstars上，PayPal的Glamorous导向构建“recoverableCSSwithReact”，灵感来自styled-components和jsxtyle。KentC.Dodds将该项目定义为“React组件样式通过优雅的（受启发的）API解决，占地面积小（gzipped不到5kb），性能出色”。它具有与样式化组件非常相似的API，并使用相似的工具。贝宝/魅力四射_glamorous-?可维护的CSS与React_github.com[](https://github.com/paypal/gla...6.Glamour受这个伟大演讲的启发，Glamour虽小但有效。它允许您使用相同的对象CSS语法来在组件中编写内联CSS，React支持样式道具。它快速高效，独立于框架，服务器端/静态渲染，并添加供应商前缀/回退值。这是一个简短的API文档介绍，Glamour中CSS技术的比较和关于GatsbyGlamor的有用教程。threepointone/glamor_glamor-react等的内联cssal_github.com[](https://github.com/threepoint...另请参阅：Glam（仍在工作）7.Fela(

)}/>Fela是一个构建的项目对于JavaScript中的状态驱动样式，它强调三件事：默认使样式动态化、带来框架独立性（React绑定）和高性能。它是动态设计并根据您的应用程序状态呈现样式。它生成原子CSS并支持所有常见的CSS功能，如媒体查询、伪类、关键帧和字体。它可以与任何视图库一起使用，包括Reactnative。您可以在此处阅读有关V6功能的更多信息。rofrischmann/fela_fela-JavaScript_github.com[](https://github.com/rofrischma...8.Styletron有2.5k星，Styletron是一个“面向组件的样式工具包”。Styletron支持无状态、单元素样式的组件作为基本样式，具有用于条件/动态样式的prop接口，以及通过（类型化）JavaScript对象组成的样式，无需额外的工具（例如Webpack加载器、Babel插件等）.它对样式对象的形状也没有意见。您可以在这个有趣的HN线程中阅读更多内容。rtsao/styletron_styletron-面向组件的样式工具包_github.com[](https://github.com/rtsao/styl...9.JSShttps://codesandbox.io/s/z21lpmvv33JSS是对CSS的抽象，它使用以声明和可维护的方式描述样式的JavaScript。它是一种高性能的JS到CSS编译器，可在运行时和服务器端工作。这个核心库是低级的，与框架无关，大约6KB（压缩和gzip压缩）。它也可以通过插件API进行扩展。这是一个很好的转换SCSS(Sass)的教程。另请查看React-JSS，React的JSS集成。JSS是CSS的抽象，它使用JavaScript以声明和可维护的方式描述样式.它是一个高性能的JS到CSS编译器，可以在运行时和服务器端工作。这个核心库是低级的，与框架无关，大约6KB（压缩和gzip压缩）。它也可以通过插件API扩展获得。这个是转换SCSS(Sass)的一个很好的教程。还可以查看React-JSS，它是React的JSS集成。cssinjs/jss_jss-JSS是一种使用JavaScript作为宿主语言的CSS创作工具。_github.com[](https://github.com/cssinjs/jss)随处共享、使用和开发，我们必须非常熟悉人们选择在生态系统中设置组件样式的各种方式。Bit-使用代码组件共享和构建_Bit帮助您在项目和应用程序之间共享、发现和使用代码组件以构建新功能和…