首页 >> 大全

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

2023-12-16 大全 30 作者:考证青年

一个特别有趣的概念是在CSS中使用JS将CSS抽象到组件级别本身,使用以声明性和可维护的方式描述样式。所以,我们已经列出了一些有用的项目来开始。

您还可以阅读这个推荐的讨论 ,以帮助您做出正确的决定,这是一个非常酷的项目比较。让我们深入了解一下吧。

1.

_组件库有哪些_组件库规范

在 bar 的一个想法变成了一个18K星的项目,在社区中被广泛采用。样式组件使得在React组件中使用CSS变得更加容易,方法是使用封装样式定义样式化组件,而不使用CSS类作为中介层。

通过使用ES6模板文字表示法定义组件来创建样式组件。可以根据需要将CSS属性添加到组件中,就像通常使用CSS一样。解析JS时,样式组件将生成唯一的类名,并将CSS注入DOM。您可以在Max 的精彩演讲中了解更多信息。

提示:-也可以与 Bit组合,在 应用程序之间共享它们并在 可视化的游乐场中进行开发。看一看。

-/- - - for the age. Use the best bits of ES6 and CSS to style your apps…[](

2.

_组件库有哪些_组件库规范

在6.5K星,由创建,被定义为“React组件样式的工具链”。它是使用React而不使用CSS来管理内联样式的工具集。 提供标准接口和抽象,用于处理内联样式无法轻松容纳的CSS功能。

允许您将样式与React组件捆绑在一起,将,html和样式结合在一起。它还提供基于道具的渲染,允许您根据应用的状态设置组件样式。

/ - A for React [](

3.

是一个与框架无关的CSS-in-JS库,支持服务器端渲染,浏览器前缀和最小的CSS生成。 将所有内容转换为类并使用class属性。

组件库规范__组件库有哪些

在,这个项目有或没有React工作,都一并提供诸如注入风格的Dom,自动前缀样式等功能。

Khan/ - - CSS-in-JS with for -side , , and CSS…[](

4.

组件库规范_组件库有哪些_

组件库有哪些_组件库规范_

在4.2K星级,是一个高性能且灵活的CSS-in-JS库,允许您使用字符串或对象样式设置应用程序样式。它具有可预测的组合,以避免CSS的特殊性问题。基于glam 库及其理念,我们的想法是通过使用babel和解析样式来编写CSS时保持运行时性能。核心运行时为2.3kb,React支持为4kb。

-js/ - style as a of [](

5. 注意:虽然该项目不再积极维护!但它还是很酷:)

组件库规范_组件库有哪些_

在3.6K星级,的面向构建“可恢复的CSS with React”,其灵感来自样式组件和。 Kent C. Dodds 将该项目定义为“ React组件样式通过优雅(灵感)API解决,占地面积小(小于5kb ),以及出色的性能”。它具有与样式组件非常相似的API,并使用类似的工具。

/ - ? CSS with [](

6.

_组件库规范_组件库有哪些

受到这场精彩演讲的启发,小而有效。它允许您使用相同的 CSS语法在组件中编写内联CSS,React支持样式prop。它快速高效,独立于框架,服务器端/静态渲染,并添加了供应商前缀/后备值。这是一篇简短的 API docs 介绍,中CSS技术的比较和 的有用教程 。

/ - css for react et [](

组件库规范__组件库有哪些

7. Fela

 (
I am red on blue.
)} />

Fela是一个为中的状态驱动样式构建的项目,强调了三件事:默认情况下使样式动态化,带来框架无关(React的绑定)和高性能。它是动态的设计,并根据您的应用程序状态呈现样式。它生成原子CSS并支持所有常见的CSS功能,如媒体查询,伪类,关键帧和字体。它可以与任何视图库一起使用,包括React 。您可以在此处阅读有关V6功能的更多信息。

/fela _fela - State- in [](

8.

组件库规范_组件库有哪些_

拥有2.5k stars,是“面向组件的样式工具包”。 支持无状态,单元素样式的组件作为基本样式,具有用于条件/动态样式的prop接口,以及通过(类型化)对象组合的样式,无需额外工具(例如加载器,Babel插件等)。它对风格对象的形状也没有任何意见。您可以在这个有趣的 HN 中了解更多信息。

rtsao/ - for - [](

9. JSS

JSS is an over CSS which uses to in a and way. It is a high JS to CSS which works at and -side. This core is low level and , and is about 6KB ( and ). It can also be via API. Here’s a nice for SCSS (Sass). Also check out React-JSS, a JSS for React.

JSS是CSS的抽象,它使用以声明和可维护的方式描述样式。它是一个高性能的JS to CSS编译器,可在运行时和服务器端运行。这个核心库是低级别和框架不可知的,大约6KB(缩小和gzip压缩)。它也可以通过插件API进行扩展。这是一个很好的转换SCSS(Sass)的教程。还可以查看React-JSS,它是React的JSS集成。

/jss _jss - JSS is an tool for CSS which uses as a host []()

ps:

在构建 Bit时,将组件转换为可在任何地方共享,使用和开发的构建块,我们必须深入熟悉人们选择在生态系统中设置组件样式的各种方式。

Bit - Share and build with code _Bit helps you share, and use code and to build new and….io[]( )

关于我们

最火推荐

小编推荐

联系我们


版权声明:本站内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 88@qq.com 举报,一经查实,本站将立刻删除。备案号:桂ICP备2021009421号
Powered By Z-BlogPHP.
复制成功
微信号:
我知道了