参照: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,以上便是这篇共享,希望所有工人喜爱~ 热烈欢迎关注点赞、个人收藏、评价
声明:本文仅供个人学习使用,来源于互联网,本文有改动,本文遵循[BY-NC-SA]协议, 如有侵犯您的权益,请联系本站,本站将在第一时间删除。谢谢你
原文地址:JSS 尝试摆脱这一困境!