HTML - 标记标签的正确使用，CSS 和 OCSS

Question

HTML - 标记标签的正确使用，CSS 和 OCSS

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或类，并在该ID /类中编写特定的子类CSS呢？

一致性必须是关键，没有它，您最终会得到标记膨胀，最终破坏整个项目的工作流程。

因此，通常我会在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 { 字体大小: 16像素; }

h3 {
  font-size: 12px;
}

h5 {
  font-size: 10px;
}

*/ 特定 ID 子类 */

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

所以这真的取决于编写简单标记和重用CSS代码的平衡，这是我在这里的主要问题。你对此有什么想法？

- Kenny Bones

2

我不明白。这里的实际问题是什么？你一次问了太多不同的事情。 - dsgriffin

嘿，是的，那就是整个事情的结果。由于在标记、oscss等方面有太多不同的意见，问题归结为：标记和CSS的最佳实践是什么？标记应该说明内容如何显示吗？如果不是，oscss的意义是什么？我认为这两个术语有点重叠，导致代码膨胀。 - Kenny Bones

3

这不是一个留言板，我们讨论自己的想法。SO是用于提出具有明确答案的编程问题的地方。 - cimmanon

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nils Kaspersson · Accepted Answer

我不确定这个答案对您是否满意，但通常情况下，虽然确实有很多最佳实践，但它通常取决于具体情况。

正如您所说，可重用性非常好。 "左"， "右"， "加粗"是较少的一种外观类名，因为它们易于理解且易于记忆，因此可重复使用。

然而，使用描述元素功能而非样式的类名的整个目的是即使在运行在响应式布局或整个设计改版的站点时，标记始终具有意义。如果新设计中的块引用向左浮动而不是向右，则必须查看所有页面/模板/数据库以删除左/右类名，否则会发现自己处于以下三种情况之一：

.left { float: right }

或者

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

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

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

至于其他问题：这真的取决于具体情况。编写标记时，不断问自己每个元素的用途是什么。例如：“这被视为标题吗？”，“这用于导航吗？”，“这是文章的不同部分（或部分中的不同文章）吗？”等等。

如果答案是“是”，那么按照这样的方式对标记进行分组可能是正确的选择。

有关何时使用HTML元素的更详细信息，请参阅：http://dev.w3.org/html5/html-author/ 关于CSS选择器的快速提示：始终努力编写尽可能短、高效的选择器。在通用选择器中不要过于具体，例如全局：

h2 { text-transform: uppercase; }

如果你的网站只有某一部分标题为大写，而其他几十个标题却不是，这就没有意义了。因为每次创建新章节时都需要重置文本转换。

但如果你在许多内容元素（例如标题、图像、段落）上编写类名，那么对选择器过于松散也没有意义，你可能需要考虑编写更有效的标记/选择器。