CSS 思考 ☞『CSS in JS』 or 『JS in CSS』 ?

CSS in JS

前面写了一篇: CSS in JS = JSS , 这个库你知道吗? – 掘金

在评论里有人说:

image.png

image.png

image.png

同时还发了一个沸点:

你听说过 JSS 吗?在 JS 中写 CSS,感觉有点奇葩。 – 沸点 – 掘金

image.png

image.png

image.png


大家都很有才,视野很开阔~~

本瓜所在的项目组技术栈主要是 Vue2,平常又疏于 CSS 探究,对 JSX 里融合写 CSS 这种全面组件化的写法了解不多。

我现在是意识到了,这种写法其实早就有了,可参见阮一峰的这篇:CSS Modules 用法教程 – 阮一峰的网络日志

简而言之,代码组织形式类似如下,从 A 到 B 的过程:

// *.scss
.item {
  display: flex;
}
  • A
// Simply import
import './foo.scss';

const App = () => (
  <div className="item">
    {item}
  </div>
)
  • B
// import as a js module 
import styles from './foo.scss';

const App = () => (
  <div className={styles.item}>
    {item}
  </div>
)

编译出来的结果也不一样:

  • A
<!-- Normal SCSS -->
<div class="item">foo bar</div>

  • B
<!-- SCSS with Class Module will have 
     hash values suffixed to the class name -->
<div class="item-35ada5">foo bar</div>

CSS in JS ,将样式也整合在模板组件里面,确实就像有人所说的:“分久必合、合久必分”。

JS in CSS

后来又了解到:

除了 CSS in JS,还有一种方向是 JS in CSS;尤雨溪在 Vue3.2 提出,目的是:让我们可以在 css 中使用 js 变量。SFC style CSS variable injection (new edition) by yyx990803 · Pull Request #231 · vuejs/rfcs

CSS in JS 是把 CSS 写在 JSX 模板中;

JS in CSS 是把 JS 变量写入 CSS 中;

想想我们在 Vue2 中,想动态控制样式,我们通常这样:

<template>
    <h1 :style="{opacity: opacity}">Vue</h1>
</template>

<script>
export default {
    data () {
        return { opacity: 0 }
    },
    mounted () {
        setInterval(() => {
            this.opacity >= 1 && (this.opacity = 0)
            this.opacity += 0.2
        }, 300)
    }
}
</script>

<style>
h1 {
    color: rgb(65,184,131);
}
</style>

在 Vue3.2 中:

<template>
    <h1>Vue</h1>
</template>
<script>
export default {
    data () {
        return { opacity: 0 }
    },
    mounted () {
        setInterval(() => {
            this.opacity >= 1 && (this.opacity = 0)
            this.opacity += 0.2
        }, 300)
    }
}
</script>

<style> 
h1 {
    color: rgb(65,184,131);
    opacity: v-bind(opacity);
}
</style>

这个要借助 vite 编译:

npm init vite-app vars

npm i

npm run dev

image.png

然后就可以看到效果了

GIF 2022-11-17 14-10-13.gif

再补充一个颜色选择器的例子

<template>
  <div class="Example">
    <div class="area">
      <div class="form">
        <label>Select Color (SCSS)</label>
        <input type="color" v-model="themeColors.bgColor" />
      </div>
      <div class="preview">
        <span>{{ themeColors.bgColor }}</span>
        <div class="customColor"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from "vue";

export default {
   setup() {
    const themeColors = ref({
      bgColor: ''
    })

    return {
      themeColors
    };
  },
};
</script>

<style lang="scss">

.Example {
  $customColor: v-bind('themeColors.bgColor');

  .customColor {
    background: $customColor;
    width: 100px;
    height: 50px;
  }
}

</style>

124126368-49e13900-da83-11eb-9dc2-94ec2a69e33e_2.gif

来源

小结

不管是 CSS in JS 还是 JS in CSS,总之都想整合 JS 和 CSS 的能力,梳理一个新的模板规范。

后面还会怎么变?拭目以待。

image.png


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

我是掘金安东尼 🤠 100 万人气前端技术博主 💥 INFP 写作人格坚持 1000 日更文 ✍ 关注我,安东尼陪你一起度过漫长编程岁月 🌏

😺我的博客:https://tuaran.github.io

😸公众号:掘金安东尼

😹V我加群一起学习:anthony1453

本文正在参加「金石计划 . 瓜分6万现金大奖」

© 版权声明
THE END
喜欢就支持一下吧
点赞14 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容