什么是 JSS ？
一图胜千言：
这图还有点搞笑。。。
CSS 一直困扰着咱前端仔，有点麻烦：已经用上了各类 UI 框架，要么就会遇到组件功能不符合产品的需求，要么就是 UI 妹纸有自己的想法。。。这样的结果就是，除了框架的 CSS，自己还要补充或覆盖很多样式。
CSS 通常就是单文件加上模板页面的 <style> 标签，你覆盖我、我覆盖你，写到后面其实也就没有太多逻辑，就是堆叠。
以上还算是好的，在协同开发的场景下，还有直接把样式写在 DOM 上面的，都不用说样式的命名规范了，反正，通常遇到问题就是：加权重、追加样式、覆盖样式这种。
前段时间，Tailwind CSS 火过一阵，怎么说呢？是简单了，但也复杂了；即写起来简单了，但理解起来需要点基础：
比如：rounded-lg 意味着☞ border-radius: 0.5rem;
言而总之，现在的样式表在前端开发中还是相对独立的，我们又试图找到一种合适的代码样式组织方式。
JSS 试图打破这一困局！
来看代码：
- Module1.css
.a { background-color: red; }
- Module1.jsx
import './Module1.css' function Module1() { return <span class='a'>Hey</span> }
- Module1.jsx using JSS
const useStyles = createUseStyles({ a: { backgroundColor: 'red'; } }) function A() { const styles = useStyles() return <span class={styles.a}>Hi</span> }
JSX 将 DOM 和 JS 写在了一起，那 JSS 则将 DOM + CSS + JS 都写在一起，做到真正聚合。
这也就是 JSS 最大的好处，将 CSS 也纳入到组件化中。
同时，这个库也不大，压缩后才 6 KB；
这个库，不是没人用，著名的 Material UI 框架就用过；只不过现在从 JSS 升级为了 TSS，原理是一样的。
这是 JSS 官网：JSS
Example：
import jss from 'jss' import preset from 'jss-preset-default' import color from 'color' // One time setup with default plugins and settings. jss.setup(preset()) const styles = { '@global': { body: { color: 'green' }, a: { textDecoration: 'underline' } }, withTemplates: ` border-radius: 3px; background-color: green; color: red; margin: 20px 40px; padding: 10px; `, button: { fontSize: 12, '&:hover': { background: 'blue' } }, ctaButton: { extend: 'button', '&:hover': { background: color('blue').darken(0.3).hex() } }, '@media (min-width: 1024px)': { button: { width: 200 } } } const {classes} = jss.createStyleSheet(styles).attach() document.body.innerHTML = ` <button class="${classes.button}">Button</button> <button class="${classes.ctaButton}">CTA Button</button> `
需要考量的是：
样式表通常很长，这样一加进组件的写法中，组件的代码量肯定会增加，如果 JSX 的代码有比较长的代码是样式，会不会也同样增加阅读负担？
