啊,Web 开发的世界——您可以从学习 HTML、JavaScript,当然还有 CSS 等基础知识开始。
但是一旦你在现实世界中构建应用程序,纯 CSS 就不再适用了。
挣扎是真的。
因此,今天我们将深入探讨使用 NextJS 为 React 应用程序编写 CSS 的七种不同方法(如果这不是您的问题,请不要担心;这些概念也适用于其他地方)。
系好安全带,准备好进行权衡取舍!
1. 全局 CSS:Old School Cool
我们可以创建适用于我们整个应用程序的全局 CSS。
它有效……但只有当事情又小又简单的时候。
随着项目的增长,由于级联样式表的方式,命名事物变得更加困难。
您可能会发现自己遵循 BEM(块元素修饰符)之类的命名约定,但说实话 - 没有人喜欢完美地做到这一点。
不要忘记加载时间!更大的包大小等于更慢的应用程序加载——不是没有人有时间这样做。
2. 模块化:分而治之
NextJS 内置了对CSS 模块的支持,它允许你在单个组件中本地化你的样式,而不用担心名称冲突或搞乱代码库的其他部分。
作为一个额外的好处,这有助于减少包的大小,因为 NextJS 确切地知道每个组件需要什么样式。
专业提示:composes
如果需要在多个组件之间共享,您甚至可以使用另一个模块的属性!
3. 预处理器:Sassier 样式表
当我们有 SCSS、Less 和 Stylus 等预处理器时,为什么还要坚持使用普通的香草呢?
这些坏小子让你用更高级的特性编写 CSS,比如变量、mixins 和函数。
还觉得时髦吗?
您只需要在 NextJS 中安装 Sass 编译器并相应地更改您的文件名。
其余的在幕后神奇地发生。
4. 样式化 JSX:JavaScript + CSS = ❤️
进入带有样式组件、情感、JSS Style Tron(不胜枚举!)等实用程序库的样式组件的全新世界。
它们都有一个共同点——直接在 JavaScript 代码中编写 CSS!
Styled JSX 内置于 NextJS 中;只需使用该属性在组件内打开一个样式标签jsx
。
现在您可以根据状态变化动态更改样式——这有多酷?
5.实用类:微风造型的Tailwind和Windy
为什么不通过导入实用程序类库(如Tailwind或WindiCSS)来让我们的生活更轻松?
为由 IDE IntelliSense 支持的快速 UI 开发做好准备——不用再担心未使用的类,因为它们会自动清除!
请记住,这种方法可能需要预先设置一些额外的工具,如果组织不当,可能会导致组件 HTML 代码混乱。
6. 预建组件库:Bootstrap & Bulma
或者您可能更喜欢来自Bootstrap或Bulma等流行框架的预构建组件?
这些为按钮、卡片等提供了现成的样式——只需将它们从 Node 模块导入到您的项目中!
不足之处?与 Tailwind 相比,这里没有太多定制,而且由于未使用的类,包大小可能更大。
7. React 组件库:固执己见的一群人
如果您只关心组件库,请查看Mantine、ant、Material UI、Rebase、Chakra 和 Tomagui 等选项!
这些不仅可以处理您的 CSS,还可以为 JavaScript 提供广泛的实用程序(想想钩子和 API)。
请记住,这些库在其设计选择中可能会自以为是,因此请选择适合您口味的库!
您在此处的选择将塑造您的应用程序的外观和感觉。
好了——在 React 中处理 CSS 的七种不同方法!根据需要混合搭配这些技巧,或者坚持使用最适合您的技巧。
在推特上关注我,我每天都在那里发帖:johnrushx
编码愉快!🚀
- 感谢 fireship 的视频,大部分是从那里拍摄的
PS
为什么网络开发人员离开餐厅?因为table
布局!