关于使用现代CSS新特性布局嵌套评论组件的尝试，希望对你有所启发

在我的好奇心驱使下，我想为什么不去查看一些热门网站，并了解一下它们是如何实现评论组件的布局。起初，我认为这将是一个简单的任务，但实际并非如此。

我花了很多时间试图理解这是如何工作的，以及如何通过现代 CSS（如 :has、size container queries 和 style queries）来改进它。在本文中，我将引导您了解我的思考过程，并分享我在其中所得到的发现。

简介

以下是我们将要构建的布局。乍一看，它可能看起来很简单，但其中有很多微小的细节。

我们有一个评论，可以嵌套两个更深层次。我在本文中将这些称为“深度”。

图中展示了深度是如何根据每个评论的嵌套级别而变化的。

思考布局

在深入细节之前，我更愿意先着手处理布局，并确保它能很好地运作。这样的做法旨在探索现代CSS解决该问题的潜力。

首先要记住的是HTML标记。评论的结构很适合使用无序列表<ul>。

<ul>
  <li>
    <Comment />
  </li>
  <li>
    <Comment />
  </li>
</ul>

< Comment /> 充当评论组件的占位符。这是两条评论的列表的HTML，没有任何回复。

如果对其中一条评论进行回复，那么将会添加一个新的 <ul>。

<ul>
  <li>
    <!-- Main comment -->
    <Comment />
    <ul>
      <!-- Comment reply -->
      <li>
        <Comment />
      </li>
    </ul>
  </li>
  <li>
    <Comment />
  </li>
</ul>

从语义角度来看，上面的描述是合理的。

评论包装器布局 - 填充解决方案

我将标题称为“评论包装器”，以免混淆评论组件本身的含义。在下一节中，我将解释我构建布局以处理评论回复的缩进或间距的想法。

请考虑以下标记：

<ul>
  <li>
    <!-- Main comment -->
    <Comment />
    <ul>
      <!-- Comment reply -->
      <li>
        <Comment />
      </li>
    </ul>
  </li>
  <li>
    <Comment />
  </li>
</ul>

我们有两条主评论和一条回复。从视觉角度来看，它将如下所示：

我更倾向于将所有的间距和缩进处理都保留在 <li> 元素上，因为它们充当了评论组件的容器。

使data据属性来处理间距

我首先考虑的是在 <ul> 和 <li> 元素上使用数据属性。

<ul>
  <li nested="true">
    <!-- Main comment -->
    <Comment />
    <ul>
      <!-- Comment reply -->
      <li>
        <Comment />
      </li>
    </ul>
  </li>
  <li>
    <Comment />
  </li>
</ul>

在CSS中，我们可以这样做：

li[data-nested="true"],
li[data-nested="true"]
  li {
  padding-left: 3rem;
}

虽然前面提到的方法是有效的，但是我们可以通过使用CSS变量和样式查询来进一步改进。

使用CSS样式变量查询

我们可以检查容器中是否添加了CSS变量--nested: true，并根