前端大统一：H5+JS+CSS 三者统一，及未来 UI 库发展的方向

简介

在当今的前端开发领域，H5、JS 和 CSS 是构建用户界面的核心技术。本文聚焦于探讨这三者统一的原理，着重研究 CSS 如何与 JS、H5 深度融合。基于这种融合原理，开发者能够更加便捷地编写样式，高效地搭建友好的组件，甚至能够构建无样式的 UI 库（styleless ui），从而巧妙地解决 当今UI 库在主题样式定义与样式覆盖方面的两大问题，为前端开发带来全新的开发模式与体验。

背景

先讲H5与JS的整合。其实，早在JS响应式框架问世的时候，这二者就已整合了，只是大家还没有整合的概念。如vue, react其实就是H5与JS整合的框架。而实现这两者的整合，核心是响应式函数defineProperty或Proxy，此外，还需要支持h5内写变量的模板、编绎工具，以及虚拟DOM等技术，如此才能形成一个完整的框架。

而现在，还差一个CSS没有整合。但事实上，整合起来非常简单，只需要TS及一些核心概念，然后基于这两者创造一些工具，即可实现CSS+H5+JS三者的整合。

一、先感受一下CSS+H5+JS三者整合的代码

直接上干货，下面是一个简单的tag标签组件的使用方法：

<SlTag :bg="'blue'" :color="'white'" label="蓝底白色的标签" />

这个tag设置了两个样式，bg背景为蓝色，color字体为白色。
这个写法，有几个非常直观的亮点：

• 写样式非常自由，直接写在组件里。
• 样式语义化了，即不用去UI稿拷贝16进制的颜色，而可以直接用blue, white, warn, error, pink等这些语义化的单词
• 单词TS枚举化了，即不用去记有哪些颜色，有auto-complete自动提示功能。熟练后可以直接看UI稿开发，不用查任何定义。
• 最后一个，就是UI组件无样式化了。即SlTag这个组件，虽然上面好像接收了blue, white这些颜色，但它内部其实是没有任何style样式的，你可以任意传，几百几万种类型都行。它的原码如下：

<template>
  <div class="flex-inline">
    <div :class="[`bg-${bg}`, `color-${color}`, bodyClz]">
      {
  { label }}
    </div>
  </div>
</template>

<script setup lang="ts">
  import type {
      PropType } from 'vue';

  defineProps({
     
    bg: {
     
      type: String as PropType<IColor>,
      default: 'primary',
    },
    color: {
     
      type: String as PropType<IColor>,
      default: 'white',
    },
    label: {
     
      type: String,
      default: '',
    },
    bodyClz: {
     
      type: String,
      default