Question

以下是一些标记的示例：

<div class="document">
  <div class="main">
    <div class="title" />
    <div class="description />
  </div>
  <div class="sections">
    <div class="section">
       <div class="title" />
       <div class="description" />
    </div>
    <div class="section">
       <div class="title" />
       <div class="description" />
    </div>
  </div>
</div>

在我的样式表中，我的规则可能如下所示：

.document .main .title { ... }
.document .sections .section .description { ... }

我喜欢这个。这种方法对我来说一直很好，我认为越来越具体的选择器使得它非常清楚是什么（几乎就像读一个句子）。

最近我被告知这种方法很糟糕，我应该做以下的事情：

<div class="document">
  <div class="main">
    <div class="mainTitle" />
    <div class="mainDescription />
  </div>
  <div class="sections">
    <div class="section">
       <div class="sectionTitle" />
       <div class="sectionDescription" />
    </div>
    <div class="section">
       <div class="sectionTitle" />
       <div class="sectionDescription" />
    </div>
  </div>
</div>

原因是它避免了类标题所引用的含糊不清。

我很好奇这里的人们在想什么？我的方法是不好的（即令人困惑，有问题）？是否有一种为复杂标记格式化css的首选方法？

Answer 1

我已经开始使用LESS样式表了，不能推荐它们。嵌套选择器通过像HTML一样构造代码，使代码具有令人难以置信的可读性：

.document {
    .main {
        .title {
            ...
        }

        .foo {
            ...
        }
    }

    .sections {
        .section .description {
            ...
        }

        // Same as `.sections.hidden`
        &.hidden {
            ...
        }
    }
}

至于你的HTML，没有必要多余。 title类引用一个充当标题的元素，并且可以通过查看父元素来推断标题的类型。如果您没有发现它们具有吸引力，那么使用长名称确实没有任何好处。

Answer 2

嗯，我对CSS不是很有经验，但你想平衡可读性和压缩。你曾经这样做的方式是压缩程度很高，而你所说的建议你做这件事的方式似乎很重要。但我已经尝试过后者，而男孩，那是很多工作。它几乎没有增加可读性，因为CSS中的大多数东西不仅出现在任何给定网站结构中的一个地方 - 它们出现在多个地方，使得建议的结构无法实际变得可读。

如果你问我，没什么好评。

// *如果您正在尝试轻松找到CSS的各个部分，即使您快速浏览也会引起很多关注的标题是要走的路* //

确保胜过标签CSS的所有工作。就像我之前所说的那样，CSS声明的可重用性使得无法轻易跟上标签。

关于构建复杂CSS的最优雅方式的思考？

2 个答案: