我真的对编写标记的正确方法感兴趣,特别是对 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代码(这是我的主要问题)之间的平衡真的很简单.你对此有何看法？

.left { float: right }

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

h2 { text-transform: uppercase; }