5

我对编写标记的正确方式非常感兴趣，尤其是 HTML5 的汇总。并且发现很难编写不说明内容外观的标记。在阅读了面向对象的 CSS 和类的使用之后，这绝对不是一件容易的事。我确实来自一个编程世界，其中代码的变量和逻辑结构是关键。因此，在尝试牢记这一点的同时，这里有一些关于整个主题的想法。

我尝试了几件事，重用类，例如为调色板创建一组类。如：

.color_pr1 {
      color: blue;
}

.color_pr2 {
      color: red;
}

还有快速课程，例如：

.left {
          float:left;
}

.right {
          float:right;
}

.bold {
          font-weight:bold;
}

“标记不应该决定内容的显示方式”的旧哲学，像 .left .right 和 .bold 这样的类应该是一个很大的禁忌。但是它们是可重复使用的，不是吗？可重用的代码很棒！但是，我发现我最终得到了可能看起来有点像这样的臃肿标记：

<div class="color_pr1 bold right">
    <p>Lorem ipsum</p>
</div>

或者我可以这样写标记：

<div clas="right">
  <p class="color_pr1 bold">Lorem ipsum</p>
</div>

无论如何，我认为这很混乱。为什么不给父 div 一个 ID 或类，并在 CSS 中的该 ID/类中编写特定的子类？

一致性在这里必须是关键，没有它，你最终会导致标记膨胀，最终破坏项目的工作流程。

所以通常我会在 SASS 中创建一组调色板作为变量。一组基本尺寸并将 h1 分配给 h6 其默认值。然后，如果我需要将它们混合一下，我要么为标签分配一个新的颜色类，要么创建如下所示的 CSS：

#somediv, .someclass {
  h1 {
     color: $color_pr1;
  }
}

这难道不比最终得到与大量类相关联的标记更好吗？在这种情况下，您的布局看起来像这样：

15.03.2013

一些图像

音乐新闻

披头士乐队重聚

Lorem ipsum dolor sit amet

在此示例中，这是确切的标记：

<h3>15.03.2013</h3>
<img>Some image</img>
<h5><strong>Music news</strong></h5>
<h1>The Beatles reunited</h1>
<p>Lorem ipsum dolor sit amet</p>

首先，什么时候用<h>标签比较合适？第一个h3标签用在日期上。真的是标题吗？h5标签呢？这不是一个真正的标题是吗？它定义了文章发布的类别。我应该使用<strong>标签吗？不是真的，这并不重要，标记明智。它只是粗体文本，因为它是这样设计的。

这会是更好的方法吗？

<section id="news_articles">
  <article>
   <h3>15.03.2013</h3>
   <img>Some image</img>
   <h5>Music news</h5>
   <h1>The Beatles reunited</h1>
   <p>Lorem ipsum dolor sit amet</p>
  </article>
</section>

并编写看起来更像这样的 CSS？

*/ 默认值 */ h1 { font-size: 16px; }

h3 {
  font-size: 12px;
}

h5 {
  font-size: 10px;
}

*/ 特定的 ID 子类 */

#news_articles {
  h3 {
    font-weight: bold;
  }
}

所以这真的取决于编写简单标记的平衡，以及重用 CSS 代码，这是我的主要问题。您对此有何看法？

4

1 回答 1

3

我不确定这个答案是否会让您满意，但是虽然肯定有很多最佳实践，但通常归结为具体情况。

正如您自己所说，可重用性很棒，确实如此。“Left”、“Right”、“Bold”属于不太邪恶的表示类名称，因为它们易于理解且易于记忆，因此可以重复使用。

然而，使用描述元素功能而不是外观的类名的全部意义在于，即使网站在响应式布局甚至整个设计大修下运行，标记也始终有意义。如果新设计的块引用浮动到左侧而不是右侧，您要么必须挖掘所有页面/模板/数据库以删除左/右类名称，否则您会发现自己处于其中任何一个三种场景：

接受 CSS 之类的

.left { float: right }

或者

.general-class blockquote { float: left !important; }

或者最终在标记和/或样式表中编写未使用的 CSS 选择器。

这显然不是世界末日，但是，如果您想创建语义正确、易于使用的项目或片段，每一点都会有所帮助。在较小的项目中，您可能会发现手动更改标记非常容易，在这种情况下，它甚至更不划算。

至于您的其他问题：这是真正归结为具体情况的地方。在编写标记时，不断问自己所有内容的目的是什么。“这是否被视为标题？”，“这是用于导航吗？”，“这是文章的不同部分（或该部分的不同文章）？” .

如果对此类问题的回答是“是”，那么您可能不会错将您的标记分割成这样。

有关何时适合使用 HTML 元素的更多详细信息，请参阅：http ://dev.w3.org/html5/html-author/

以及关于 CSS 选择器的快速说明；始终努力编写尽可能短、高效的选择器。不要在你的一般选择器中太具体，做一个全局：

h2 { text-transform: uppercase; }

然后在您的网站的一部分上只有大写的 h2，但没有它的其他几十个 h2 是没有意义的，因为每当您创建一个新部分时，您都必须重置文本转换。

但是选择器太松也是没有意义的。如果您发现自己在许多内容元素（例如标题、图像、段落）上编写类名，您可能需要考虑编写更有效的标记/选择器。

于 2013-05-15T12:05:44.913 回答