参照: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>
`

必须考虑的是:

页面布局一般较长,这样一增加元件的书写中,元件的编码量一定会提升,假如 JSX 的代码有很长的编码是款式,是否会也是一样提升阅读文章压力?


OK,以上便是这篇共享,希望所有工人喜爱~ 热烈欢迎关注点赞、个人收藏、评价 adminjs.Cn 工作生活学习必备

声明:本文仅供个人学习使用,来源于互联网,本文有改动,本文遵循[BY-NC-SA]协议, 如有侵犯您的权益,请联系本站,本站将在第一时间删除。谢谢你

原文地址:JSS 尝试摆脱这一困境!