如何实现CSS ID样式继承，避免多LED效果下重复编写CSS代码

你可以通过通用类选择器+修饰类的方式实现样式复用，完全不需要复制多份CSS代码，具体调整如下：

第一步：调整CSS代码 #

把原来绑定ID的样式改成通用的.led类，基础样式所有LED共用，如需不同颜色的LED可以额外加颜色修饰类即可：

/* 所有LED共用的基础样式，只需要写1次 */
.led {
  position: relative;
  width: 3em;
  height: 3em;
  border: 2px solid #000;
  border-radius: 2.5em;
  /* 默认红色熄灭状态 */
  background-image: radial-gradient(farthest-corner at 50% 20%, #b30000 0%, #330000 100%);
  box-shadow: 0 0.5em 1em rgba(102, 0, 0, 0.3);
}
/* 所有LED点亮的通用样式 */
.led.on {
  background-image: radial-gradient(farthest-corner at 50% 75%, red 0%, #990000 100%);
  box-shadow: 0 1em 1.5em rgba(255, 0, 0, 0.5);
}
/* 所有LED的高光伪元素样式 */
.led:after {
  content: '';
  position: absolute;
  top: .3em;
  left: 1em;
  width: 60%;
  height: 40%;
  border-radius: 60%;
  background-image: linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1));
}

/* 如果需要不同颜色的LED，额外加修饰类即可，比如绿色LED */
.led.green {
  background-image: radial-gradient(farthest-corner at 50% 20%, #006600 0%, #001a00 100%);
  box-shadow: 0 0.5em 1em rgba(0, 102, 0, 0.3);
}
.led.green.on {
  background-image: radial-gradient(farthest-corner at 50% 75%, #00ff00 0%, #009900 100%);
  box-shadow: 0 1em 1.5em rgba(0, 255, 0, 0.5);
}

第二步：调整HTML结构 #

每个LED只需要套用通用的.led类，加对应的ID或者自定义属性区分不同设备即可，5个LED的写法如下：

<!-- 第1个LED -->
<div class="panel">
  <div class="led %button1%" id="led1"></div>
  <button id="toggle1">Snowman</button>
</div>
<!-- 第2个LED -->
<div class="panel">
  <div class="led %button2%" id="led2"></div>
  <button id="toggle2">设备2</button>
</div>
<!-- 第3个LED -->
<div class="panel">
  <div class="led %button3%" id="led3"></div>
  <button id="toggle3">设备3</button>
</div>
<!-- 第4个LED -->
<div class="panel">
  <!-- 如果要绿色就加green类 -->
  <div class="led green %button4%" id="led4"></div>
  <button id="toggle4">设备4</button>
</div>
<!-- 第5个LED -->
<div class="panel">
  <div class="led %button5%" id="led5"></div>
  <button id="toggle5">设备5</button>
</div>

第三步：JS逻辑适配 #

原来的websocket交互逻辑只需要根据按钮ID或者LED的ID区分不同设备的指令即可，不需要修改样式相关的逻辑，只要切换对应LED元素的on类就可以实现点亮/熄灭效果。

内容的提问来源于stack exchange，提问作者Arnizzle