甲壳虫乐队重聚

Question

我真的对编写标记的正确方法感兴趣，尤其是对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;
  }
}

这不是比用标记结束更好的方法吗？那个场景怎么样，你有一个看起来像这样的布局：

2013年3月15日

一些图片

音乐新闻

甲壳虫乐队重聚

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代码（这是我的主要问题）之间的平衡真的很简单。你对此有何看法？

Answer 1

我不确定这个答案对你来说是否令人满意，但是当然有很多最佳实践，它通常归结为逐案情景。

正如你所说的那样，可重用性很棒，确实如此。 “左”，“右”，“大胆”属于较为邪恶的表象类名称，因为它们易于理解，易于记忆，因此可以重复使用。

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

接受像

这样的CSS

.left { float: right }

或

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

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

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

至于你的其他问题：这是真正归结为个案情景的地方。在编写标记时，不断问自己一切都填充的目的。 “这是作为标题获得的吗？”，“这用于导航吗？”，“这是文章的不同部分（或该部分的不同文章）？”。

如果这个问题的答案是“是”，那么你可能不会错误地将你的标记分段。

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

关于CSS选择器的快速说明; 始终致力于尽可能短而有效的选择器。在全局选择器中不要太具体，做全局：

h2 { text-transform: uppercase; }

然后在你的网站的一个部分只有大写的h2s，但没有它的数十个其他的h2没有任何意义，因为你必须在创建新的部分时重置文本转换。

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

Html - 正确使用标记标记，CSS和OCSS

2013年3月15日

甲壳虫乐队重聚

1 个答案: