我很感兴趣正确编写标记的方法,特别是关于HTML5的总结。我发现编写不涉及内容外观的标记确实很困难。在阅读了面向对象CSS和类使用方面的相关知识后,问题并没有得到解决。我来自程序员的世界,在代码中变量和逻辑结构至关重要。因此,在尝试考虑这个整体主题的同时,以下是我的一些思考。
我尝试过很多事情,例如重复使用类,为颜色调色板创建一组类,如:
我可以这样编写标记语言:
无论如何,我认为这是混乱的。为什么不给父div一个ID或类,并在该ID /类中编写特定的子类CSS呢?
一致性必须是关键,没有它,您最终会得到标记膨胀,最终破坏整个项目的工作流程。
因此,通常我会在SASS中创建一组颜色调色板变量。基本的大小集并将h1到h6分配为默认值。然后,如果我需要稍微混合一下,我要么使用新的颜色类分配标签,要么创建类似于以下内容的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代码的平衡,这是我在这里的主要问题。你对此有什么想法?