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

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坐着

在此示例中,这是确切的标记:

<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

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

正如您自己所说，可重用性很棒，确实如此。“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 没有它就没有意义，因为每当您创建新部分时，您都必须重置文本转换。

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