使用 JSS 为您的前端增添工程风格

在众多选项中选择适合你应用风格的选项本身可能就是一个项目。🤯

我已经尝试了几种前端样式解决方案和方法，例如：

• 原始 CSS
• CSS 扩展，例如Sass或Less
• CSS 模块（和 Sass）

使用它们的项目要么是用 Vanilla JS 编写的，要么是用一些现代 JavaScript 框架编写的，比如 AngularJS、Angular 4、React ⚛️ 甚至 React Native。

毕竟，我还有一个非常钟爱的造型选项世界，上面没有提到。我随时都会在新项目中投票支持它（抱歉，克罗地亚很快就要举行地方选举了🗳️）。

最后，说得更贴切一点，我喜欢像编写应用程序的其他部分一样，用 JavaScript 来编写样式。这意味着我会使用相同的编程语言和语法来处理逻辑和样式。这很酷，但这并不是我这样做的主要动机。是因为我发现 JavaScript 比 CSS 更强大💪，也更实用。

JavaScript 为应用程序样式设计过程增添了更多工程特色。这可以通过CSS-in-JS解决方案（或更短的 JSS）实现。

我第一次使用 JSS 是在使用 Material UI 构建的项目上。在他们的文档中，你可以找到为什么他们在放弃 Less 和自定义内联样式方案后选择了这种方法。实际上，他们在选择样式方案时做了一些非常有趣的比较📊。

我已经提到了工程风格，所以让我们展示一些我所想到的例子。

变量

您可以简单地将任何样式保存在变量中。

const COLOR_PRIMARY = "black";
const COLOR_SECONDARY = "#f0f0f0";

还将它们分组到 JS 对象中。

baseTitle: {
    fontSize: 24,
    fontWeight: 600,
    color: COLOR_PRIMARY
}

你现在可能会想：没什么特别的，用扩展 CSS 也能做到。耐心点……😃

扩展、默认属性和覆盖

假设我们想扩展这个基本标题以供其他用途。

sectionTitle:  {
  ...baseTitle,
  //override font weight from base title
  fontWeight: 800, 
  //extend base title
  fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
  fontStyle: 'italic',
}

请注意，您不需要学习任何新语法，您实际上编写的是 CSS，但只需使用camelCase: kebab-case➡️font-size即可fontSize。并在其之上拥有 JS 的力量。

主题

然后，您还可以将所有可重复使用的样式保存在一个地方并构建整个主题 - 这只是 JS 对象。

const theme = {
  backgroundColor: COLOR_PRIMARY,
  color: COLOR_SECONDARY,
  ...
};

该主题可以被视为一个配置文件，但用于样式💅。使用Material UI 主题来获取灵感。从断点、排版到配色方案和间距。

将 JSS 与 React 集成

有一个JSS Core库可以在任何 Javascript 应用程序中使用，但 React 开发人员对React-JSS更感兴趣。

动态值

关注动态值。

JSS 使用 Hooks API，您可以在其中使用类似这样的钩子createUseStyles。

我从 JSS 文档中借用了一个很酷的例子来说明如何开始。我会将样式与组件分开，因为避免在一个文件中造成混乱始终是一个好习惯。此外，它还让人想起了 CSS 模块方法，即为每个组件提供单独的、独立的样式。

useButtonStyles.js

import { createUseStyles } from 'react-jss'

export const useButtonStyles = createUseStyles({
  myButton: {
    padding: props => props.spacing
  },
  myLabel: props => ({
    display: 'block',
    color: props.labelColor,
    fontWeight: props.fontWeight,
    fontStyle: props.fontStyle
  })
})

请注意，您可以多么优雅地根据从组件传递的 props 值来更改样式。

index.js

import React from 'react'
import { useButtonStyles } from "./useButtonStyles";

const Button = ({children, ...props}) => {
  const classes = useButtonStyles(props)
  return (
    <button className={classes.myButton}>
      <span className={classes.myLabel}>{children}</span>
    </button>
  )
}

Button.defaultProps = {
  spacing: 10,
  fontWeight: 'bold',
  labelColor: 'red'
}

const App = () => <Button fontStyle="italic">Submit</Button>

请随意使用CodeSandbox 上的示例。

主题

除了用于创建样式的钩子之外，它还useTheme与ThemeProvider包装器结合使用。它还提供了一个主题解决方案，使您可以更轻松地开始使用可重用样式编写主题应用程序，并快速启动新项目。

你会尝试一下吗？

❓ 你有什么想法？
❓ 你更喜欢哪种样式方案？
❓ 你如何处理主题和可复用样式？