CSS in JS = JSS , 这个库你知道吗？

参考：JSS or CSS…What to use and why ?. If you guys haven't heard of JSS its… | by Sumeet Bhalla | Geek Culture | Medium

什么是 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 的代码有比较长的代码是样式，会不会也同样增加阅读负担？

OK，以上便是本篇分享，希望各位工友喜欢~ 欢迎点赞、收藏、评论