当我们语法突出显示CSS编码时，我们通常使用JavaScript库，该库将CSS变成具有不同class的<span>-tags。
我认为对于HTML ify the css并将其变成有意义的语义可能会很有趣。但是哪些标签应代表CSS规则？
css写为规则，由选择器组组成和声明块。
后者包含一个或多个属性/值 -
示例：
.selector {
/* declaration block */
property: value;
}
至少对我来说，样式表就像一个无序的列表（<ul>），每个项目（<li>）代表 rule 。
任何标签标签（<h2>, <h3>等）都将作为选择器组 - 和description list（<dl>）是声明块 <<<<<。 /p>
使用<dt>-tag，css属性将为术语，每个CSS值将使用<dd>-tag。
<var>-tag将用于 css自定义属性。
示例：
<ul>
<li>
<h3>body</h3>
<dl>
<dt>accent-color</dt>
<dd><var>AccentColor</var></dd>
<dt>background-color</dt>
<dd>Canvas</dd>
<dt>color</dt>
<dd><var>ColorGray-80</var></dd>
<dt>color-scheme</dt>
<dd>light dark</dd>
<dt>font-family</dt>
<dd><var>ff-sans</var></dd>
<dt>font-size</dt>
<dd>clamp(1rem, 0.8661rem + 0.4286vw, 1.1875rem)</dd>
<dt>line-height</dt>
<dd>1.5</dd>
<dt>margin-inline</dt>
<dd>auto</dd>
<dt>max-inline-size</dt>
<dd>70ch</dd>
<dt>padding-inline</dt>
<dd>2ch</dd>
</dl>
</li>
<li>
<h3>img</h3>
<dl>
<dt>height</dt>
<dd>auto</dd>
<dt>max-width</dt>
<dd>100%</dd>
</li>
<li>
<h3>td</h3>
<dl>
<dt>border</dt>
<dd>1px solid</dd>
<dt>font-size</dt>
<dd>smaller</dd>
<dt>padding</dt>
<dd>1ch</dd>
</li>
</ul>
开箱即用，这看起来不是特别好：
但是，在CSS的几行中，我们可以将其变成：
...并仅添加一个 css-declaration：
.dark {
color-scheme: dark;
}
我们得到：
造型语法亮点
首先，我们需要一些颜色和基本CSS的变量。列表本身：
ul {
--_property: color-mix(in srgb, HighLight, CanvasText 30%);
--_selector: cornflowerblue;
--_value: orange;
background: color-mix(in srgb, Canvas 95%, CanvasText 5%);
font-family: ui-monospace, monospace;
list-style: none;
margin: 0;
overflow: auto;
padding: 2ch;
}
这里与system colors一起使用color-mix方法。这些将自动在dark mode中自动更改。
接下来，使用本机CSS嵌套，我们确保所有孩子都按照自己的意愿行事：
ul {
& * {
font-size: 1em;
font-style: normal;
font-weight: 400;
margin: 0;
white-space: nowrap;
}
}
对于选择器，我们允许<em>，<strong>或任何<h>eading-tag。我们在每个 rule （<li>）之后添加一个{-char，我们添加了}和一个线路：
ul {
& :is(em, h2, h3, h4, h5, h6, strong) {
color: var(--_selector);
&::after { content: " {"; }
}
& li::after {
color: var(--_selector);
content: "}\a"; white-space: pre;
}
}
对于<var>iables，我们补充说：
ul {
& var {
&::before { content: "var(--"; }
&::after { content: ")"; }
}
}
我们想将属性/值对显示为inline，因此它们不会突破单独的行。我们在每个属性之后添加:-char - 对于 value ，我们希望用;-char和line-Break结束线路：
ul {
& dd, & dt { display: inline; }
& dd {
color: var(--_value);
&::after {
content: ";\a";
white-space: pre;
}
}
& dl { margin: 0 0 0 2ch; }
& dt {
color: var(--_property);
&::after { content: ":"; }
}
}
就是这样！
免费的黑暗模式
因为我们使用了系统颜色，所以我们免费获得深色模式。
将color-scheme: light dark;添加到body风格中，然后将操作系统更改为浅色或暗模式，您应该看到语法风格的更新。
关于color-scheme的伟大之处是，即使您的操作系统设置为相反，您也可以 force 。
如果您的操作系统设置为“光模式”，并且您在<ul>-tag上设置了color-scheme: dark，它将以“暗模式”呈现，即使页面的其余部分处于“灯模式”。
代码
以供您参考
ul {
--_property: color-mix(in srgb, HighLight, CanvasText 30%);
--_selector: cornflowerblue;
--_value: orange;
background: color-mix(in srgb, Canvas 95%, CanvasText 5%);
font-family: ui-monospace, monospace;
list-style: none;
margin: 0;
overflow: auto;
padding: 2ch;
& * {
font-size: 1em;
font-style: normal;
font-weight: 400;
margin: 0;
white-space: nowrap;
}
& dd, & dt { display: inline; }
& dd {
color: var(--_value);
&::after {
content: ";\a";
white-space: pre;
}
}
& dl { margin: 0 0 0 2ch; }
& dt {
color: var(--_property);
&::after { content: ":"; }
}
& :is(em, h2, h3, h4, h5, h6, strong) {
color: var(--_selector);
&::after { content: " {"; }
}
& li::after {
color: var(--_selector);
content: "}\a"; white-space: pre;
}
& var {
&::before { content: "var(--"; }
&::after { content: ")"; }
}
}
注意：代码使用本机嵌套和
color-mix，当前是 shower-a-flag 或在“夜间”浏览器中。
使用提示：
封面图像。使用术语“级联样式表”和“语法亮点”，以萨尔瓦多·达利（Salvador dali）的风格生成绘画