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 ？

一图胜千言：

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；

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>
`