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

概述我真的对编写标记的正确方法感兴趣,特别是对 HTML5的汇总.并且发现编写标记并没有说明内容的外观真的很难.在阅读面向对象的CSS和类的使用之后,它绝对不容易.我来自一个编程世界,其中代码的变量和逻辑结构是关键.因此,在尝试记住这一点的同时,这里有一些关于整个主题的想法. 我尝试了几种方法,重用类,例如为调色板创建一组类.如： .color_pr1 { color: blue;} 我真的对编写标记的正确方法感兴趣,特别是对 HTML5的汇总.并且发现编写标记并没有说明内容的外观真的很难.在阅读面向对象的CSS和类的使用之后,它绝对不容易.我来自一个编程世界,其中代码的变量和逻辑结构是关键.因此,在尝试记住这一点的同时,这里有一些关于整个主题的想法.

我尝试了几种方法,重用类,例如为调色板创建一组类.如：

.color_pr1 {      color: blue;}.color_pr2 {      color: red;}

还有快速课程,例如：

.left {          float:left;}.right {          float:right;}.bold {          Font-weight:bold;}

旧标准“标记不应该决定内容是如何显示的”,像.left .right和.bold这样的类应该是一个很大的禁忌.但他们是可以重复使用的吗？
可重用的代码很棒！但是,我发现我最终得到的膨胀标记可能看起来像这样：

<div >    <p>Lorem ipsum</p></div>

或者我可以写下这样的标记：

<div clas="right">  <p >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代码(这是我的主要问题)之间的平衡真的很简单.你对此有何看法？

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

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

但是,使用描述元素功能而不是外观的类名称的全部意义在于,即使站点在响应式布局(甚至是整个设计大修)下运行,标记也始终有意义.如果一个新的设计将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,但没有它的几十个其他h2s没有任何意义,因为你必须在创建一个新的部分时重置文本转换.

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

总结

以上是内存溢出为你收集整理的Html – 正确使用标记标记,CSS和OCSS全部内容，希望文章能够帮你解决Html – 正确使用标记标记,CSS和OCSS所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。