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

掘金安东尼

发布于 2022-11-30 11:37:06

25.8K0

发布于 2022-11-30 11:37:06

文章被收录于专栏：掘金安东尼掘金安东尼

CSS in JS

前面写了一篇： CSS in JS = JSS , 这个库你知道吗？ - 掘金

在评论里有人说：

同时还发了一个沸点：

你听说过 JSS 吗？在 JS 中写 CSS，感觉有点奇葩。 - 沸点 - 掘金

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

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

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

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

// *.scss
.item {
  display: flex;
}

A ` // Simply import import './foo.scss';

const App = () => (

 {item}

)

* B

// import as a js module import styles from './foo.scss';

const App = () => (

 {item}

)

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

* A

foo bar

* B

foo bar

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 &amp;&amp; (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 &amp;&amp; (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

然后就可以看到效果了

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

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

来源