参考：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 in JS = 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；

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

这个库，不是没人用，闻名的 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，以上便是本篇共享，期望各位工友喜爱~ 欢迎点赞、收藏、谈论

我是安东尼 100 万人气前端技能博主 INFP 写作品格坚持 1000 日更文 ✍ 重视我，安东尼陪你一同度过绵长编程岁月

加我微信 ATAR53，拉你入群，定时抽奖、粉丝福利多多。只学习结交、不推文卖课~

我的大众号：安东尼，在上面，不止编程，更多还有生活感悟~

我的 GithubPage: tuaran.github.io，它现已被保护 4 年+ 啦~

本文正在参加「金石方案 . 分割6万现金大奖」