警惕Div和Class的滥用

大概在06年的时候,我刚接触Div+Css的网站布局,那个时候大家对于标准的热情非常高涨,蓝色论坛里经常为了Table还是Div+Css而争论的热火朝天。现在,大家已经形成了共识,Table用来布局是不行的,但是网页里完全不用Table,也是不好的。

于是大家就开始都用Div+Css布局,这样做的目的本来是为了让网页文档更语义化、结构更加清晰、代码更加少、便于维护,这是一个非常好的目标。但是事实告诉我们,有好的目标,不一定能够做出好的事情来。紧接着,就开始出现了Div和Class的过渡使用。特别是在借用了一些Css框架,诸如960.gs,YUI Grid 这样的CSS框架的时候,我们会不自觉的多使用一些Div。

这些CSS框架为我们提供了一套解决方案,使用框架确实能为我们节省不少的时间(其实,我们如果经常写页面的话,也会积累一些常用的CSS,但是并没有汇集成框架),但同时也减少了我们自主考虑的空间,增加了我们的惰性。

以 960.gs 为例,这是一个很著名的理论,国内的一些博客上曾经做过介绍,其原则就是将960px的宽度进行不同程度分割,来达到标准化、模块化使用的目的。如下图,通过使用 960.gs 只需要一个简单的 class 就可以为我们提供不同的标准分割。

在其内部,我们可以按照自己的规划进行布局。

可以看到,这套框架非常好用,但同时,我们不可避免要使用很多的Div以及Class,按照这套框架的要求来进行结构的编写,同时,加上我们页面中个性化的内容时,过度就开始了。

为了避免这种情况,有几个原则可以遵循:

1、只使用必要地类。特别是框架提供的类,需要那种布局,就明确使用哪种类;
2、在除了 html、head、meta、param、script、title、style之外的元素上,都可以使用类,所以如果希望实现三栏的布局,不必一定要 <div class="grid_3"><img src… 完全可以直接在 img 标签上使用 class="grid_3",这样,无疑就减少了三对 div 的使用。而且,有时候这样用起来,更加符合语义文本的目标。
3、在父元素中使用类,而不是在每个子元素中都加。这个貌似是地球人都知道的规则,但其实真正在实际过程中,如果没有对于样式结构及其继承关系做规划的话,很容易的就需要在子元素中写上很多的特殊的类。这就要求我们必须具有抽丝剥茧的精神,将可以共用的元素样式都抽取到上一级元素上。

 

参考资料:
1、Fight Div-itis and Class-itis
2、960 Grid System
3、YUI2 Grid CSS

时间: 2024-10-17 02:47:29

警惕Div和Class的滥用的相关文章

薛兆丰:警惕反垄断法被市场失败者滥用

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 4月14日,北京大学法律经济学研究中心举办了"从360诉腾讯案"看中国反垄断法的研讨会.包括盛杰民.张维迎.黄勇.张昕竹.王勇.薛兆丰.沈岿等在内的知名学者均出席参与了讨论. 会上,北京大学法律经济学研究中心研究员,青年经济学家薛兆丰对广东省高级人民法院关于360诉腾讯垄断地位败诉的判决表示肯定,很值得学习.他指出:&qu

CSS网页布局避免滥用div元素

文章简介:CSS网页布局应该避免滥用div元素一直是我们倡导的,以合适的HTML标签组织文档是CSS网页布局的基??/font> CSS网页布局应该避免滥用div元素一直是我们倡导的,以合适的HTML标签组织文档是CSS网页布局的基础. 页面中div与span元素的使用是一个新问题,我们也容易过多的使用它们.必要及合理的使用div可以明显的增强文档的结构性.这也是webjx.com一直提倡的. 如果你审视你的HTML文档,发现有着很多的div与span,那你就得换一个眼光来看问题了,是不是存在滥

div+css网页布局时不能滥用div元素

CSS网页布局应避免滥用DIV元素一直是我们所倡导的,以合适的HTML标签组织文档是CSS网页布局的基础. 页面中div与span元素的使用是一个新问题,我们也容易过多的使用它们.必要及合理地使用div可以明显的增强文档的结构性,这也是我们一直提倡的. 如果你审视你的HTML文档,发现有着很多的div与span,那你就得换一个眼光来看问题了,是不是存在滥用的情况?是不是还有更好的标记来替代它们?如h1可以更好地表示所标记的内容,那你就得放弃p或span来定义. 或许这是一对矛盾,我们本身也较难把

专家评360诉腾讯垄断案:警惕反垄断法被滥用

中介交易 SEO诊断 淘宝客 云主机 技术大厅 11月26日,备受瞩目的奇虎360诉腾讯垄断一案的二审将在最高人民法院开庭.该案今年3月在广东高级人民法院一审,一审判决奇虎360败诉,奇虎360随后提起了上诉.此案被称为是中国"互联网反垄断第一案",因此引起各界关注. 应当尊重互联网特性 反垄断法第十九条规定,推定企业具有市场支配地位原则,即以企业对市场的占有份额作为推定的依据,根据该条规定,一个经营者在相关市场的市场份额达到二分之一,两个经营者在相关市场的市场份额合计达到三分之二,三

人们也应该警惕日益强大的亚马逊可能会滥用它的主导地位

摘要: 导语:最新一期英国<经济学人>杂志刊登题为< 亚马逊 能走多远?>(How far can Amazon go?)的封面文章称,虽然亚马逊颠覆过多个行业,甚至改变了人们的生活方式,但在它给我们带来 导语:最新一期英国<经济学人>杂志刊登题为< 亚马逊 能走多远?>(How far can Amazon go?)的封面文章称,虽然亚马逊颠覆过多个行业,甚至改变了人们的生活方式,但在它给我们带来便利的同时,人们也应该警惕日益强大的亚马逊可能会滥用它的主导

从“div+css”说起谈结构的重要性

大家都知道,web标准在中国传播初期,人们使用"div+css"描述web标准,似乎有点道理,根据国内网页设计师的编码水平,看似就是使用div配合css来替代table布局. 可是学过一段时间web标准的人士,都知道这是误解,那么有人提出,摒弃div+css的说法,提倡XHTML+CSS的说法,因为要使用两门语言来架构网页,但是这种称呼也不准确,不完整,因为只提到了XHTML1.0标准和CSS2.0(CSS2.1)规范. 其实web标准就是web标准,叫别的都不对,他就是web开发中的

初学DIV+CSS应该理解HTML标签的语义

css|初学 如今Web标准都被通俗的叫做"div+css"或者"层布局".我不反对这种便宜行事的叫法.但是这样会陷入一个误区:即大量的使用div标签作为结构元素.事实上这是一种更高级的div滥用(Jeffrey Zeldman在<网站重构>一书中提到). HTML为我们提供了相当丰富的标签,每个标签都有它各自的含义.我认为在设计时,除了遵循HTML语法以外,应该充分利用并遵守各标签的"语义".如标题文字应该包含在h1-h6中,大段的

Web网页标准学习:从“div+css”说起谈结构的重要性

css|web|标准|网页 大家都知道,web标准在中国传播初期,人们使用"div+css"描述web标准,似乎有点道理,根据国内网页设计师的编码水平,看似就是使用div配合css来替代table布局. 可是学过一段时间web标准的人士,都知道这是误解,那么有人提出,摒弃div+css的说法,提倡XHTML+CSS的说法,因为要使用两门语言来架构网页,但是这种称呼也不准确,不完整,因为只提到了XHTML1.0标准和CSS2.0(CSS2.1)规范. 其实web标准就是web标准,叫别的

从“div+css”说起谈结构的合理

css  大家都知道,web标准在中国传播初期,人们使用"div+css"描述web标准,似乎有点道理,根据国内网页设计师的编码水平,看似就是使用div配合css来替代table布局. 可是学过一段时间web标准的人士,都知道这是误解,那么有人提出,摒弃div+css的说法,提倡XHTML+CSS的说法,因为要使用两门语言来架构网页,但是这种称呼也不准确,不完整,因为只提到了XHTML1.0标准和CSS2.0(CSS2.1)规范. 其实web标准就是web标准,叫别的都不对,他就是we