1

这是一些标记的示例：

<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？

4

2 回答 2

4

我已经开始使用LESS样式表，而且推荐得还不够。嵌套选择器通过像 HTML 一样构建代码，使您的代码具有难以置信的可读性：

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

        .foo {
            ...
        }
    }

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

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

至于您的 HTML，无需多余。title类引用充当标题的元素，并且可以通过查看父元素来推断标题的类型。如果您觉得长名称不吸引人，那么使用长名称确实没有任何好处。

于 2013-03-30T03:31:18.997 回答
3

好吧，我对 CSS 不是很有经验，但你想平衡可读性和压缩。您过去执行此操作的方式对压缩很重，而您所说的建议您这样做的方式似乎对可读性很重。但是我已经尝试过后一种，而且男孩，工作量很大。而且它几乎没有增加可读性，因为 CSS 中的大多数内容不仅出现在任何给定站点结构中的一个位置——它们出现在多个位置，使得您建议的结构不可能真正变得可读。

如果你问我，没有什么能比得上好的评论。

//* 如果您想轻松定位 CSS 的各个部分，那么即使您快速浏览，标题本身也会引起很多关注*//

当然胜过所有为 CSS 设置标签的工作。就像我之前所说的，CSS 声明的可重用特性使得标签无论如何都无法轻松遵循。

于 2013-03-30T03:19:46.570 回答