如何精简纯HTML+CSS实现的13x13矩阵Logo重复代码？

我用纯HTML和CSS制作了一个13×13的彩色矩阵Logo，CSS代码简洁，但HTML存在大量重复标签，想遵循DRY原则精简代码。尝试用<f/>替代<f></f>无效，以下是几种可行的精简方法，且能保留原有颜色：

方法一：使用自闭合自定义标签 #

问题原因 #

HTML中自定义元素（如<f>、<s>）不属于原生空元素（如<img>、<br>），直接写<f/>时，部分浏览器会错误解析标签结构导致布局混乱。但现代浏览器中，只要确保每个自闭合标签独立，grid布局仍能正常识别。

修改后的代码 #

CSS保持不变：

body { width: 100vmin; margin: auto }
logo {
  display: grid;
  grid-template-columns: repeat(13, 1fr);
}

s { }
w { background-color: #d6d6d6; aspect-ratio: 1 }
l { background-color: #d6d6d6; aspect-ratio: 1 }
f { background-color: #d6d6d6; aspect-ratio: 1 }

HTML替换为自闭合标签：

<logo>
<f/><f/><f/><s/><f/><f/><f/><s/><f/><s/><f/><f/><f/>
<f/><s/><f/><s/><s/><s/><f/><s/><f/><s/><s/><s/><s/>
<f/><s/><f/><s/><f/><f/><f/><s/><f/><s/><f/><s/><f/>
<f/><s/><s/><s/><s/><s/><s/><s/><f/><s/><s/><s/><f/>
<f/><s/><l/><l/><l/><l/><l/><s/><f/><s/><f/><s/><f/>
<f/><s/><s/><s/><s/><s/><s/><s/><s/><s/><f/><s/><f/>
<f/><s/><l/><l/><l/><l/><l/><l/><s/><f/><f/><s/><f/>
<f/><s/><l/><s/><s/><s/><s/><s/><s/><s/><s/><s/><s/>
<f/><s/><l/><s/><l/><l/><l/><s/><w/><s/><w/><s/><w/>
<s/><s/><l/><s/><s/><s/><l/><s/><s/><s/><w/><s/><s/>
<l/><l/><l/><s/><l/><l/><l/><w/><w/><w/><w/><s/><w/>
<l/><s/><s/><s/><s/><s/><s/><s/><s/><s/><s/><s/><w/>
<l/><l/><l/><l/><l/><l/><l/><l/><l/><l/><s/><w/><w/>
</logo>

这种方式直接减少了一半的标签字符，代码更紧凑，且不影响原有样式和布局。

方法二：纯CSS绘制（HTML仅需单个标签） #

将整个矩阵通过CSS的background-image和linear-gradient实现，HTML只保留<logo>标签，完全消除重复代码。

示例代码 #

body { width: 100vmin; margin: auto }
logo {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  background-size: calc(100% / 13) calc(100% / 13);
  /* 按13×13矩阵定义每个方块的颜色 */
  background-image: 
    /* 第1行 */
    linear-gradient(#d6d6d6 0 0), linear-gradient(#d6d6d6 0 0), linear-gradient(#d6d6d6 0 0), 
    linear-gradient(transparent 0 0), 
    linear-gradient(#d6d6d6 0 0), linear-gradient(#d6d6d6 0 0), linear-gradient(#d6d6d6 0 0), 
    linear-gradient(transparent 0 0), 
    linear-gradient(#d6d6d6 0 0), 
    linear-gradient(transparent 0 0), 
    linear-gradient(#d6d6d6 0 0), linear-gradient(#d6d6d6 0 0), linear-gradient(#d6d6d6 0 0),
    /* 第2行 */
    linear-gradient(#d6d6d6 0 0), 
    linear-gradient(transparent 0 0), 
    linear-gradient(#d6d6d6 0 0), 
    linear-gradient(transparent 0 0), linear-gradient(transparent 0 0), linear-gradient(transparent 0 0), 
    linear-gradient(#d6d6d6 0 0), 
    linear-gradient(transparent 0 0), 
    linear-gradient(#d6d6d6 0 0), 
    linear-gradient(transparent 0 0), linear-gradient(transparent 0 0), linear-gradient(transparent 0 0), linear-gradient(transparent 0 0),
    /* 第3行到第13行按相同格式补充 */
    linear-gradient(#d6d6d6 0 0), linear-gradient(transparent 0 0), linear-gradient(#d6d6d6 0 0), linear-gradient(transparent 0 0), linear-gradient(#d6d6d6 0 0), linear-gradient(#d6d6d6 0 0), linear-gradient(#d6d6d6 0 0), linear-gradient(transparent 0 0), linear-gradient(#d6d6d6 0 0), linear-gradient(transparent 0 0), linear-gradient(#d6d6d6 0 0), linear-gradient(transparent 0 0), linear-gradient(#d6d6d6 0 0),
    linear-gradient(#d6d6d6 0 0), linear-gradient(transparent 0 0), linear-gradient(transparent 0 0), linear-gradient(transparent 0 0), linear-gradient(transparent 0 0), linear-gradient(transparent 0 0), linear-gradient(transparent 0 0), linear-gradient(transparent 0 0), linear-gradient(#d6d6d6 0 0), linear-gradient(transparent 0 0), linear-gradient(transparent 0 0), linear-gradient(transparent 0 0), linear-gradient(#d6d6d6 0 0),
    linear-gradient(#d6d6d6 0 0), linear-gradient(transparent 0 0), linear-gradient(#d6d6d6 0 0), linear-gradient(#d6d6d6 0 0), linear-gradient(#d6d6d6 0 0), linear-gradient(#d6d6d6 0 0), linear-gradient(#d6d6d6 0 0), linear-gradient(transparent 0 0), linear-gradient(#d6d6d6 0 0), linear-gradient(transparent 0 0), linear-gradient(#d6d6d6 0 0), linear-gradient(transparent 0 0), linear-gradient(#d6d6d6 0 0),
    linear-gradient(#d6d6d6 0 0), linear-gradient(transparent 0 0), linear-gradient(transparent 0 0), linear-gradient(transparent 0 0), linear-gradient(transparent 0 0), linear-gradient(transparent 0 0), linear-gradient(transparent 0 0), linear-gradient(transparent 0 0), linear-gradient(transparent 0 0), linear-gradient(transparent 0 0), linear-gradient(#d6d6d6 0 0), linear-gradient(transparent 0 0), linear-gradient(#d6d6d6 0 0),
    linear-gradient(#d6d6d6 0 0), linear-gradient(transparent 0 0), linear-gradient(#d6d6d6 0 0), linear-gradient(#d6d6d6 0 0), linear-gradient(#d6d6d6 0 0), linear-gradient(#d6d6d6 0 0), linear-gradient(#d6d6d6 0 0), linear-gradient(#d6d6d6 0 0), linear-gradient(transparent 0 0), linear-gradient(#d6d6d6 0 0), linear-gradient(#d6d6d6 0 0), linear-gradient(transparent 0 0), linear-gradient(#d6d6d6 0 0),
    linear-gradient(#d6d6d6 0 0), linear-gradient(transparent 0 0), linear-gradient(#d6d6d6 0 0), linear-gradient(transparent 0 0), linear-gradient(transparent 0 0), linear-gradient(transparent 0 0), linear-gradient(transparent 0 0), linear-gradient(transparent 0 0), linear-gradient(transparent 0 0), linear-gradient(transparent 0 0), linear-gradient(transparent 0 0), linear-gradient(transparent 0 0), linear-gradient(transparent 0 0),
    linear-gradient(#d6d6d6 0 0), linear-gradient(transparent 0 0), linear-gradient(#d6d6d6 0 0), linear-gradient(transparent 0 0), linear-gradient(#d6d6d6 0 0), linear-gradient(#d6d6d6 0 0), linear-gradient(#d6d6d6 0 0), linear-gradient(transparent 0 0), linear-gradient(#d6d6d6 0 0), linear-gradient(transparent 0 0), linear-gradient(#d6d6d6 0 0), linear-gradient(transparent 0 0), linear-gradient(#d6d6d6 0 0),
    linear-gradient(transparent 0 0), linear-gradient(transparent 0 0), linear-gradient(#d6d6d6 0 0), linear-gradient(transparent 0 0), linear-gradient(transparent 0 0), linear-gradient(transparent 0 0), linear-gradient(#d6d6d6 0 0), linear-gradient(transparent 0 0), linear-gradient(transparent 0 0), linear-gradient(transparent 0 0), linear-gradient(#d6d6d6 0 0), linear-gradient(transparent 0 0), linear-gradient(transparent 0 0),
    linear-gradient(#d6d6d6 0 0), linear-gradient(#d6d6d6 0 0), linear-gradient(#d6d6d6 0 0), linear-gradient(transparent 0 0), linear-gradient(#d6d6d6 0 0), linear-gradient(#d6d6d6 0 0), linear-gradient(#d6d6d6 0 0), linear-gradient(#d6d6d6 0 0), linear-gradient(#d6d6d6 0 0), linear-gradient(#d6d6d6 0 0), linear-gradient(#d6d6d6 0 0), linear-gradient(transparent 0 0), linear-gradient(#d6d6d6 0 0),
    linear-gradient(#d6d6d6 0 0), linear-gradient(transparent 0 0), linear-gradient(transparent 0 0), linear-gradient(transparent 0 0), linear-gradient(transparent 0 0), linear-gradient(transparent 0 0), linear-gradient(transparent 0 0), linear-gradient(transparent 0 0), linear-gradient(transparent 0 0), linear-gradient(transparent 0 0), linear-gradient(transparent 0 0), linear-gradient(transparent 0 0), linear-gradient(#d6d6d6 0 0),
    linear-gradient(#d6d6d6 0 0), linear-gradient(#d6d6d6 0 0), linear-gradient(#d6d6d6 0 0), linear-gradient(#d6d6d6 0 0), linear-gradient(#d6d6d6 0 0), linear-gradient(#d6d6d6 0 0), linear-gradient(#d6d6d6 0 0), linear-gradient(#d6d6d6 0 0), linear-gradient(#d6d6d6 0 0), linear-gradient(#d6d6d6 0 0), linear-gradient(transparent 0 0), linear-gradient(#d6d6d6 0 0), linear-gradient(#d6d6d6 0 0)
  ;
  /* 定位每个方块的位置 */
  background-position:
    /* 第1行 */
    0 0, calc(100%/13) 0, calc(200%/13) 0, calc(300%/13) 0, calc(400%/13) 0, calc(500%/13) 0, calc(600%/13) 0, calc(700%/13) 0, calc(800%/13) 0, calc(900%/13) 0, calc(1000%/13) 0, calc(1100%/13) 0, calc(1200%/13) 0,
    /* 第2行 */
    0 calc(100%/13), calc(100%/13) calc(100%/13), calc(200%/13) calc(100%/13), calc(300%/13) calc(100%/13), calc(400%/13) calc(100%/13), calc(500%/13) calc(100%/13), calc(600%/13) calc(100%/13), calc(700%/13) calc(100%/13), calc(800%/13) calc(100%/13), calc(900%/13) calc(100%/13), calc(1000%/13) calc(100%/13), calc(1100%/13) calc(100%/13), calc(1200%/13) calc(100%/13),
    /* 第3行 */
    0 calc(200%/13), calc(100%/13) calc(200%/13), calc(200%/13) calc(200%/13), calc(300%/13) calc(200%/13), calc(400%/13) calc(200%/13), calc(500%/13) calc(200%/13), calc(600%/13) calc(200%/13), calc(700%/13) calc(200%/13), calc(800%/13) calc(200%/13), calc(900%/13) calc(200%/13), calc(1000%/13) calc(200%/13), calc(1100%/13) calc(200%/13), calc(1200%/13) calc(200%/13),
    /* 第4行 */
    0 calc(300%/13), calc(100%/13) calc(300%/13), calc(200%/13) calc(300%/13), calc(300%/13) calc(300%/13), calc(400%/13) calc(300%/13), calc(500%/13) calc(300%/13), calc(600%/13) calc(300%/13), calc(700%/13) calc(300%/13), calc(800%/13) calc(300%/13), calc(900%/13) calc(300%/13), calc(1000%/13) calc(300%/13), calc(1100%/13) calc(300%/13), calc(1200%/13) calc(300%/13),
    /* 第5行 */
    0 calc(400%/13), calc(100%/13) calc(400%/13), calc(200%/13) calc(400%/13), calc(300%/13) calc(400%/13), calc(400%/13) calc(400%/13), calc(500%/13) calc(400%/13), calc(600%/13) calc(400%/13), calc(700%/13) calc(400%/13), calc(800%/13) calc(400%/13), calc(900%/13) calc(400%/13), calc(1000%/13) calc(400%/13), calc(1100%/13)