CSS 状态机：利用 Radio/Checkbox Hack 管理复杂的 UI 状态切换

大家好，今天我们来聊聊一个有点“hacky”，但非常实用，而且能让你对 CSS 理解更深入的技术：利用 Radio/Checkbox Hack 构建 CSS 状态机，来管理复杂的 UI 状态切换。

什么是状态机？

状态机，英文叫做 State Machine，是一种抽象的计算模型。它描述了一个系统在不同状态之间转换的行为。一个状态机通常包含以下几个要素：

状态 (State): 系统可能存在的不同情况。
事件 (Event): 触发状态转换的因素。
转换 (Transition): 从一个状态到另一个状态的改变。
动作 (Action): 在状态转换过程中执行的操作。

举个例子，一个简单的电灯开关就是一个状态机。它有两个状态：开 (On) 和 关 (Off)。按下开关 (Event) 会导致状态从 关 (Off) 转换到 开 (On)，或者从 开 (On) 转换到 关 (Off)。点亮灯泡 (Action) 就是在 开 (On) 状态下的行为。

为什么需要 CSS 状态机？

前端开发中，我们经常需要处理复杂的 UI 状态，比如：

选项卡切换
导航菜单展开/折叠
表单验证状态
模态框显示/隐藏
步骤条的不同步骤

传统的 JavaScript 方法可以实现这些效果，但如果状态逻辑变得复杂，JavaScript 代码也会变得难以维护。这时候，利用 CSS 状态机，可以将部分状态逻辑转移到 CSS 中，利用 CSS 的选择器和伪类来实现状态切换，从而简化 JavaScript 代码，提高性能。

Radio/Checkbox Hack 的原理

Radio/Checkbox Hack 的核心原理是利用 radio 和 checkbox 的 checked 状态，以及 CSS 的兄弟选择器 (+ 或 ~) 和子选择器 (>)，来控制其他元素的样式。

checked 状态: Radio 和 Checkbox 元素在被选中时，会进入 checked 状态。
兄弟选择器 (+ 和 ~):
- + (相邻兄弟选择器): 选择紧跟在指定元素后的第一个元素。
- ~ (通用兄弟选择器): 选择指定元素后的所有兄弟元素。
子选择器 (>): 选择父元素的直接子元素。

通过将 radio 或 checkbox 元素隐藏起来，然后利用它们的 checked 状态来触发 CSS 选择器，就可以实现对其他元素的样式控制。

构建简单的选项卡

我们先来看一个简单的选项卡示例，使用 Radio Hack 实现。

HTML:

<div class="tabs">
  <input type="radio" name="tab" id="tab1" checked>
  <label for="tab1">Tab 1</label>
  <div class="tab-content" id="content1">
    Content for Tab 1
  </div>

  <input type="radio" name="tab" id="tab2">
  <label for="tab2">Tab 2</label>
  <div class="tab-content" id="content2">
    Content for Tab 2
  </div>

  <input type="radio" name="tab" id="tab3">
  <label for="tab3">Tab 3</label>
  <div class="tab-content" id="content3">
    Content for Tab 3
  </div>
</div>

CSS:

.tabs {
  width: 400px;
  border: 1px solid #ccc;
}

/* 隐藏 radio 按钮 */
input[type="radio"] {
  display: none;
}

/* tab label 的样式 */
label {
  display: inline-block;
  padding: 10px 15px;
  background-color: #eee;
  border: 1px solid #ccc;
  border-bottom: none;
  cursor: pointer;
}

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

/* 当 radio 按钮被选中时，显示对应的 content */
#tab1:checked + label + .tab-content#content1,
#tab2:checked + label + .tab-content#content2,
#tab3:checked + label + .tab-content#content3 {
  display: block;
}

/* 选中 tab label 的样式 */
input[type="radio"]:checked + label {
  background-color: #fff;
  font-weight: bold;
}

代码解释:

我们使用 radio 按钮来表示不同的选项卡。 name 属性相同，保证了同一组 radio 按钮只能选中一个。
label 元素与 radio 按钮关联，点击 label 相当于点击 radio 按钮。
tab-content 元素包含了每个选项卡的内容，默认情况下隐藏。
CSS 中，我们使用 #tab1:checked + label + .tab-content#content1 这样的选择器，当 tab1 这个 radio 按钮被选中时，选择紧跟在其后的 label 元素，以及再后面的 tab-content 元素（并且id为content1），将其显示出来。
input[type="radio"]:checked + label 选择器用来改变选中 tab label 的样式。

构建更复杂的状态机：导航菜单

现在，我们来构建一个更复杂的例子：一个可展开/折叠的导航菜单，使用 Checkbox Hack 实现。

HTML:

<div class="nav">
  <input type="checkbox" id="nav-toggle">
  <label for="nav-toggle" class="nav-toggle-label">
    <span></span>
  </label>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</div>

CSS:

.nav {
  position: relative;
  background-color: #333;
  color: #fff;
}

/* 隐藏 checkbox */
#nav-toggle {
  display: none;
}

/* 导航切换按钮 */
.nav-toggle-label {
  position: absolute;
  top: 0;
  left: 0;
  margin-left: 1em;
  height: 100%;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
  display: block;
  background: white;
  height: 2px;
  width: 2em;
  border-radius: 2px;
  position: relative;
}

.nav-toggle-label span::before,
.nav-toggle-label span::after {
  content: '';
  position: absolute;
  left: 0;
}

.nav-toggle-label span::before {
  top: -0.7em;
}

.nav-toggle-label span::after {
  bottom: -0.7em;
}

/* 导航菜单 */
nav {
  position: absolute;
  top: 100%;
  left: 0;
  background: #333;
  width: 100%;
  transform: scale(1, 0); /* 初始状态：折叠 */
  transform-origin: top;
  transition: transform 400ms ease-in-out;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  margin-bottom: 1em;
  margin-left: 1em;
}

nav a {
  color: white;
  text-decoration: none;
  opacity: 0;
  transition: opacity 150ms linear;
}

/* 当 checkbox 被选中时，展开导航菜单 */
#nav-toggle:checked ~ nav {
  transform: scale(1, 1); /* 展开 */
}

/* 当 checkbox 被选中时，显示导航链接 */
#nav-toggle:checked ~ nav a {
  opacity: 1;
  transition: opacity 250ms ease-in-out 250ms;
}

代码解释:

我们使用 checkbox 来控制导航菜单的展开/折叠状态。
nav-toggle-label 是一个 hamburger 图标，点击它可以切换 checkbox 的 checked 状态。
nav 元素包含了导航菜单的内容，初始状态下使用 transform: scale(1, 0) 将其折叠。
当 checkbox 被选中时，使用 #nav-toggle:checked ~ nav 选择器，将 nav 元素的 transform 属性设置为 scale(1, 1)，从而展开导航菜单。
同时，使用 #nav-toggle:checked ~ nav a 选择器，将导航链接的 opacity 设置为 1，使其显示出来。 transition-delay 属性可以延迟动画的执行，让展开效果更自然。

更复杂的状态管理：模态框

再来看一个模态框的例子，使用 Checkbox Hack 实现。

HTML:

<button id="open-modal">Open Modal</button>

<input type="checkbox" id="modal-toggle">
<div class="modal">
  <label for="modal-toggle" class="modal-overlay"></label>
  <div class="modal-content">
    <h2>Modal Title</h2>
    <p>This is the modal content.</p>
    <label for="modal-toggle" class="modal-close">Close</label>
  </div>
</div>

CSS:

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: none; /* 初始状态：隐藏 */
  align-items: center;
  justify-content: center;
}

.modal-content {
  background-color: white;
  padding: 20px;
  border-radius: 5px;
}

.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

#modal-toggle {
  display: none;
}

#modal-toggle:checked + .modal {
  display: flex; /* 当 checkbox 被选中时，显示模态框 */
}

.modal-close{
  cursor: pointer;
}

JavaScript (用于打开模态框):

document.getElementById('open-modal').addEventListener('click', function() {
  document.getElementById('modal-toggle').checked = true;
});

代码解释:

我们使用 checkbox 来控制模态框的显示/隐藏状态。
modal 元素包含了模态框的内容，初始状态下隐藏。
modal-overlay 是一个覆盖整个屏幕的半透明遮罩层，点击它可以关闭模态框。
#modal-toggle:checked + .modal 选择器，当 checkbox 被选中时，显示模态框。
JavaScript 代码用于点击按钮时，设置 checkbox 的 checked 状态为 true，从而打开模态框。

高级技巧：使用 CSS 变量

为了让 CSS 状态机更加灵活和可维护，我们可以结合 CSS 变量 (Custom Properties) 来使用。

例如，在选项卡示例中，我们可以使用 CSS 变量来控制选中 tab label 的背景颜色：

:root {
  --tab-active-bg-color: #fff;
}

input[type="radio"]:checked + label {
  background-color: var(--tab-active-bg-color);
  font-weight: bold;
}

这样，我们只需要修改 --tab-active-bg-color 变量的值，就可以改变所有选中 tab label 的背景颜色，而不需要修改多个选择器。

Radio/Checkbox Hack 的优缺点

优点:

减少 JavaScript 代码: 可以将部分状态逻辑转移到 CSS 中，简化 JavaScript 代码。
提高性能: CSS 的选择器和伪类通常比 JavaScript 更高效。
可维护性: 将状态逻辑集中在 CSS 中，更容易维护。
声明式: 使用 CSS 进行状态管理更具声明性，代码可读性更强。

缺点:

可访问性问题: 隐藏 radio 和 checkbox 元素可能会导致可访问性问题。需要使用 ARIA 属性来改善可访问性。
hacky: 这种方法本质上是一种 hack，可能会让人觉得不优雅。
复杂性: 对于非常复杂的状态逻辑，CSS 状态机可能会变得难以维护。
语义化问题: 使用 radio/checkbox 仅仅为了状态管理，而不是为了表单提交，可能会导致 HTML 语义化不清晰。

替代方案

虽然 Radio/Checkbox Hack 在某些情况下非常有用，但也有一些替代方案可以考虑：

JavaScript 框架 (React, Vue, Angular): 这些框架提供了更强大的状态管理机制。
CSS Houdini: CSS Houdini 是一组新的 CSS API，可以让你扩展 CSS 的功能，实现更高级的样式控制。
Web Components: Web Components 允许你创建可重用的自定义 HTML 元素，可以封装复杂的状态逻辑。

一个更复杂的步骤条的例子

以下是一个使用 Radio Hack 实现的步骤条（Stepper）例子，包含 CSS 变量和一些过渡效果。

HTML:

<div class="stepper">
  <input type="radio" name="step" id="step1" checked>
  <input type="radio" name="step" id="step2">
  <input type="radio" name="step" id="step3">

  <div class="steps">
    <label for="step1">
      <span>1</span>
      <p>Step 1</p>
    </label>
    <label for="step2">
      <span>2</span>
      <p>Step 2</p>
    </label>
    <label for="step3">
      <span>3</span>
      <p>Step 3</p>
    </label>
  </div>

  <div class="step-content" id="content1">
    Content for Step 1
  </div>
  <div class="step-content" id="content2">
    Content for Step 2
  </div>
  <div class="step-content" id="content3">
    Content for Step 3
  </div>

  <div class="actions">
    <button onclick="goToNextStep()">Next</button>
  </div>
</div>

<script>
  function goToNextStep() {
    const currentStep = document.querySelector('input[name="step"]:checked');
    const nextStep = currentStep.nextElementSibling;
    if (nextStep) {
      nextStep.checked = true;
    }
  }
</script>

CSS:

:root {
  --stepper-bg-color: #f0f0f0;
  --stepper-active-color: #4CAF50;
  --stepper-inactive-color: #ccc;
  --stepper-border-radius: 50%;
  --stepper-transition-duration: 0.3s;
}

.stepper {
  width: 500px;
  margin: 20px auto;
  background-color: var(--stepper-bg-color);
  padding: 20px;
  border-radius: 5px;
}

/* 隐藏 radio 按钮 */
input[type="radio"] {
  display: none;
}

.steps {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.steps label {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: color var(--stepper-transition-duration) ease;
  color: var(--stepper-inactive-color);
}

.steps label span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--stepper-border-radius);
  border: 2px solid var(--stepper-inactive-color);
  margin-bottom: 5px;
  transition: border-color var(--stepper-transition-duration) ease,
              background-color var(--stepper-transition-duration) ease,
              color var(--stepper-transition-duration) ease;
  color: var(--stepper-inactive-color);
}

/* 激活状态的步骤 */
input[type="radio"]:checked + .steps label {
  color: var(--stepper-active-color);
}

input[type="radio"]:checked + .steps label span {
  border-color: var(--stepper-active-color);
  background-color: var(--stepper-active-color);
  color: white;
}

.step-content {
  padding: 20px;
  border: 1px solid var(--stepper-inactive-color);
  border-radius: 5px;
  display: none;
}

/* 显示激活步骤的内容 */
#step1:checked ~ .step-content#content1,
#step2:checked ~ .step-content#content2,
#step3:checked ~ .step-content#content3 {
  display: block;
}

.actions {
  text-align: right;
}

.actions button {
  padding: 10px 20px;
  background-color: var(--stepper-active-color);
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

代码解释:

HTML 结构: 使用 radio 按钮表示步骤，label 关联步骤按钮，step-content 包含每个步骤的内容。
CSS 变量: 使用 CSS 变量定义颜色、圆角、过渡时间等，方便修改和维护。
状态切换: 使用 input[type="radio"]:checked 选择器来改变选中步骤的样式。
过渡效果: 使用 transition 属性为步骤按钮和内容添加过渡效果，使状态切换更平滑。
JavaScript: 简单的 JavaScript 用于切换到下一步。

总结

今天我们学习了如何利用 Radio/Checkbox Hack 构建 CSS 状态机，来管理复杂的 UI 状态切换。虽然这种方法有一些缺点，但在某些情况下，它可以简化 JavaScript 代码，提高性能。希望今天的分享能帮助你更好地理解 CSS，并在实际项目中灵活运用。

思考与实践

回顾Radio/Checkbox Hack原理、适用场景、优缺点，并尝试在项目中应用，结合CSS变量和过渡效果，实现更复杂的状态管理。

更多IT精英技术系列讲座，到智猿学院