关于layui3.0，会不会使用CSS variables？

[cvpv]

在现代浏览器中，基本已经完全支持了Custom properties (--*): CSS variables，即css变量。

layui作为历久弥坚的原生html框架，很大概率会使用css变量重构样式系统吧？

抛砖引玉，例如一个按钮组件：

.btn {
  --button-primary-border-color: #91caff;
  --button-text-color: rgba(0, 0, 0, 0.88);
  --button-font-weight: 400;
  --button-font-size: 14px;
  --button-bg-color: #fff;
  --button-border-width: 1px;
  --button-border-style: solid;
  --button-border-color: #d9d9d9;
  --button-border-radius: 6px;
  --button-hover-text-color: #4096ff;
  --button-hover-border-color: #4096ff;
  --button-hover-bg-color: #fff;
  --button-active-text-color: #0958d9;
  --button-active-border-color: #0958d9;
  --button-active-bg-color: #fff;
}
.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  line-height: 1;
  height: 32px;
  white-space: nowrap;
  cursor: pointer;
  color: var(--button-text-color);
  text-align: center;
  box-sizing: border-box;
  outline: none;
  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  font-weight: var(--button-font-weight);
  user-select: none;
  touch-action: manipulation;
  vertical-align: middle;
  background-color: var(--button-bg-color);
  border: var(--button-border-width) var(--button-border-style) var(--button-border-color);
  padding: 6px 15px;
  font-size: var(--button-font-size);
  border-radius: var(--button-border-radius);
}
.btn:hover {
  color: var(--button-hover-text-color);
  border-color: var(--button-hover-border-color);
  background: var(--button-hover-bg-color);
}
.btn:active {
  color: var(--button-active-text-color);
  border-color: var(--button-active-border-color);
  background: var(--button-active-bg-color);
}
.btn:focus-visible {
  outline: 4px solid var(--button-primary-border-color);
  outline-offset: 1px;
  transition: outline-offset 0s, outline 0s;
}

[cvpv]

为什么2024年，layui还是很火，从我个人经历来看，是因为有很大的需求。

例如我所在的公司，很多项目都是基于原生HTML来开发，且不让用vue + nuxt 。项目既要求seo优化，也要求纯静态，不让用新的技术栈，怕增加维护成本，所以代码必须严格要求用原生HTML /CSS /JS。另外的项目，是基于前后端不分离的，php和Java（jsp和thymeleaf模板引擎）这时候要求直接在java项目上开发模板引擎，也不让用vue等框架。不知道我这样情况是不是隔离。还有一些jquery老项目，无法迁移，只能在上面的代码上开发。

市面上不基于任何框架的，没有任何依赖的UI组件库，且受众多的，除了这个就只有bootstrap了吧

[sentsim]

必然会大量用到。