CSS `Custom States` (`:–my-state`) (提案)：自定义伪类与 JavaScript 交互

各位前端界的父老乡亲们，晚上好！我是你们的老朋友，今天咱们来聊点新鲜玩意儿，关于 CSS Custom States (:--my-state) 的那些事儿。这玩意儿，说白了，就是想让 CSS 也能像 JavaScript 一样，拥有更强的交互能力，让咱们写代码更优雅，更省事儿。

一、什么是 CSS Custom States？

简单来说，CSS Custom States 是一种提案，允许我们自定义伪类，这些伪类可以根据 JavaScript 的状态来切换样式。想想看，以前我们需要用 JavaScript 来操作 class，然后 CSS 根据 class 来改变样式，现在有了 Custom States，我们可以直接用 JavaScript 控制 CSS 的伪类，是不是感觉更直接了？

二、为什么要用 CSS Custom States？

解耦： 将 JavaScript 和 CSS 的逻辑分离，让代码更易于维护。JavaScript 专注于状态管理，CSS 专注于样式展示。
性能： 避免频繁操作 DOM，减少重绘和重排，提升页面性能。直接操作 CSS 伪类，浏览器可以更好地进行优化。
可读性： 代码更简洁，更易于理解。看到 :--my-state，就知道这个样式是根据 JavaScript 的状态来控制的。

三、CSS Custom States 的语法

Custom States 的语法很简单，就是在伪类前面加上 --。例如：

:--is-active {
  color: red;
  font-weight: bold;
}

这个 :--is-active 就是一个自定义的伪类，我们可以用 JavaScript 来激活或禁用它。

四、如何用 JavaScript 控制 CSS Custom States？

要控制 CSS Custom States，我们需要用到 Element.toggleAttribute() 方法。这个方法可以添加或移除一个属性，如果属性存在，则移除，如果属性不存在，则添加。

const element = document.getElementById('my-element');

// 激活 :--is-active 状态
element.toggleAttribute('data-is-active');

// 禁用 :--is-active 状态
element.toggleAttribute('data-is-active');

然后在 CSS 中，我们可以使用属性选择器来匹配这个状态：

#my-element[data-is-active] {
  /* 当 data-is-active 属性存在时，应用这些样式 */
  color: red;
  font-weight: bold;
}

注意： 这里的 data-is-active 只是一个例子，你可以用任何你喜欢的属性名。关键是 CSS 中的属性选择器要和 JavaScript 中 toggleAttribute() 方法使用的属性名一致。

五、一个简单的例子

咱们来做一个简单的例子，一个按钮，点击后改变颜色和文字：

HTML:

<button id="my-button">点击我</button>

CSS:

#my-button {
  background-color: lightblue;
  color: black;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

#my-button[data-is-active] {
  background-color: lightcoral;
  color: white;
}

#my-button[data-is-active]::after {
  content: " (已激活)";
}

JavaScript:

const button = document.getElementById('my-button');

button.addEventListener('click', () => {
  button.toggleAttribute('data-is-active');
});

在这个例子中，我们定义了一个 data-is-active 属性，当按钮被点击时，toggleAttribute() 方法会切换这个属性的状态。CSS 则根据这个属性的状态来改变按钮的颜色和文字。

六、更复杂的例子：选项卡 (Tabs)

咱们再来一个更复杂的例子，选项卡 (Tabs)。这玩意儿在各种网站上都常见，以前我们通常用 JavaScript 来控制 class 的切换，现在可以用 Custom States 来简化代码：

HTML:

<div class="tabs">
  <div class="tab-headers">
    <button id="tab1-button" data-tab="tab1">选项卡 1</button>
    <button id="tab2-button" data-tab="tab2">选项卡 2</button>
    <button id="tab3-button" data-tab="tab3">选项卡 3</button>
  </div>
  <div id="tab1" class="tab-content">选项卡 1 的内容</div>
  <div id="tab2" class="tab-content">选项卡 2 的内容</div>
  <div id="tab3" class="tab-content">选项卡 3 的内容</div>
</div>

CSS:

.tab-headers button {
  background-color: lightgray;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

.tab-headers button[data-is-active] {
  background-color: lightgreen;
  font-weight: bold;
}

.tab-content {
  display: none; /* 默认隐藏所有内容 */
  padding: 20px;
  border: 1px solid #ccc;
}

.tab-content[data-is-active] {
  display: block; /* 激活的选项卡显示内容 */
}

JavaScript:

const tabButtons = document.querySelectorAll('.tab-headers button');
const tabContents = document.querySelectorAll('.tab-content');

tabButtons.forEach(button => {
  button.addEventListener('click', () => {
    // 移除所有按钮和内容的激活状态
    tabButtons.forEach(btn => btn.removeAttribute('data-is-active'));
    tabContents.forEach(content => content.removeAttribute('data-is-active'));

    // 激活当前按钮和内容
    const tabId = button.dataset.tab;
    const tabContent = document.getElementById(tabId);

    button.setAttribute('data-is-active', '');
    tabContent.setAttribute('data-is-active', '');
  });
});

// 默认激活第一个选项卡
tabButtons[0].setAttribute('data-is-active', '');
tabContents[0].setAttribute('data-is-active', '');

在这个例子中，我们为每个选项卡按钮和内容都添加了 data-is-active 属性。当点击一个按钮时，JavaScript 会移除所有按钮和内容的 data-is-active 属性，然后激活当前按钮和内容。CSS 则根据 data-is-active 属性来改变按钮的样式和显示选项卡内容。

七、Custom States 的优势与劣势

优势：

代码更简洁： 减少了 JavaScript 中操作 class 的代码，让代码更易于阅读和维护。
性能优化： 避免频繁操作 DOM，减少重绘和重排，提升页面性能。
解耦： 将 JavaScript 和 CSS 的逻辑分离，让代码更易于测试和复用。
更符合语义： 使用自定义伪类可以更清晰地表达状态的含义。

劣势：

浏览器兼容性： 这是一个新的提案，目前浏览器支持还不够广泛。需要使用 Polyfill 或者渐进增强策略。
学习成本： 需要学习新的语法和 API。
调试难度： 可能会增加调试难度，需要借助开发者工具来查看元素的属性状态。

八、浏览器兼容性与 Polyfill

目前，CSS Custom States 还是一个提案，浏览器支持还不够广泛。如果要在生产环境中使用，需要考虑浏览器兼容性问题。

渐进增强： 先使用传统的 JavaScript 和 CSS 来实现基本功能，然后在使用 Custom States 来优化代码。
Polyfill： 使用 Polyfill 来模拟 Custom States 的行为。目前还没有成熟的官方 Polyfill，需要自行开发或者寻找第三方库。

九、Custom States 的应用场景

Custom States 可以应用于各种需要根据 JavaScript 状态来改变样式的场景，例如：

表单验证： 根据表单字段的验证状态来改变样式。
加载状态： 根据数据加载状态来显示不同的 loading 动画。
动画控制： 根据用户的交互来触发 CSS 动画。
主题切换： 根据用户选择的主题来改变页面样式。
复杂组件： 选项卡、轮播图、模态框等复杂组件的状态管理。

十、Custom States 与 CSS Variables 的结合

Custom States 可以和 CSS Variables 结合使用，实现更灵活的样式控制。例如：

:root {
  --active-color: lightgreen;
}

.tab-headers button {
  background-color: lightgray;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

.tab-headers button[data-is-active] {
  background-color: var(--active-color); /* 使用 CSS Variable */
  font-weight: bold;
}

在这个例子中，我们使用 CSS Variable --active-color 来定义激活状态的颜色。这样，我们就可以通过修改 --active-color 的值来改变所有激活状态的按钮的颜色，而不需要修改每个按钮的 CSS 代码。

十一、总结与展望

CSS Custom States 是一种非常有潜力的技术，它可以让我们用更简洁、更高效的方式来管理 CSS 的状态。虽然目前浏览器兼容性还不够广泛，但是随着浏览器的不断更新，相信 Custom States 会得到越来越广泛的应用。

表格总结:

特性	描述	优势	劣势
定义	一种提案，允许自定义伪类，根据 JavaScript 状态切换样式。	解耦 JavaScript 和 CSS，提升性能，代码更简洁，更易于理解。	浏览器兼容性差，需要学习新的语法和 API，可能会增加调试难度。
语法	使用 `:--my-state` 的形式定义自定义伪类。	简单易懂。	无。
JavaScript 控制	使用 `Element.toggleAttribute()` 方法来添加或移除属性，CSS 使用属性选择器来匹配状态。	可以直接控制 CSS 伪类，避免频繁操作 DOM。	需要注意属性名的一致性。
应用场景	表单验证，加载状态，动画控制，主题切换，复杂组件的状态管理。	适用性广泛。	无。
兼容性	目前浏览器支持还不够广泛，需要使用 Polyfill 或者渐进增强策略。	无。	增加了开发成本。
与 CSS Variables 结合	可以和 CSS Variables 结合使用，实现更灵活的样式控制。	可以更方便地修改样式。	无。

希望今天的分享对大家有所帮助。记住，技术是为我们服务的，我们要用最合适的技术来解决问题。别被新技术冲昏头脑，也不要固步自封。保持学习，保持好奇，才能在这个快速发展的时代立于不败之地。

散会！咱们下回再见！

发表回复 取消回复

发表回复取消回复