css基础重要性,谈结构的重要性–从“div+css”看起分享

大家都知道，

可是学过一段时间web标准的人士，都知道这是误解，那么有人提出，摒弃div+css的说法，提倡XHTML+CSS的说法，因为要使用两门语言来架构网页，但是这种称呼也不准确，不完整，因为只提到了XHTML1.0标准和CSS2.0(CSS2.1)规范。

其实web标准就是web标准，叫别的都不对，他就是web开发中的一些列标准的集合，XHTML，XML，CSS，DOM，ECMAScript，制定这些标准是为了更好的约束，web运行平台(浏览器)的开发厂商，而我们遵循web标准开发，也是为自己着想，通过

为什么要遵循web标准进行

更少的代码和组件，容易维护

带宽要求降低(代码更简洁)，成本降低。

更容易被搜寻引擎

改版方便，不需要变动页面内容

提供打印版本而不需要复制内容

提高网站易用性。

当最终老板看到在应用web标准后的代码很简洁，出现了许多未曾谋面的div，然后你给他展示，可以随意改版，多种设备兼容，多种浏览器兼容，很好，老板很欣赏，这么多的好处，我们全力支持web标准，而导致的结果，web标准技术人才火热，应用web标准开发的项目增多，开发效率成为问题，开发模式还在摸索之中，里面出现了，在web标准应用中的一些错误方法，div的滥用，class的滥用，结构一塌糊涂，人们重视css比重视

div是什么？刚开始人们的认识是无语义，应用无语义的事物来布局，是正确的，既然无语义，div这三个字母就不会出现。

Jeffrey Zeldman的解释是“用短语division解释div，是最恰当不过的了”。Div和span一样是用作裁减分割文档的，那么他们也就拥有语义了。Div联合id和class属性，提供了一个把结构添加到文档的通用机制。

Div将文档分割成一块一块的，怎么区分这一块块来进行布局呢？也就是怎么给独有的div赋予一个唯一标识ID，通用的div赋予一个class值，也可以在class的基础上再赋一个id。如果不用id看似也可以，全部class，只要合理的命名就可以，你可以为header区域，添加class,

，类IdHeader告诉你，这里是唯一的而且是header区域。可是ID是最能体现文档结构的一个属性。当你为ID不能重用而牢骚时，想想ID的强大功能吧！

ID的属性有着令人难以置信的强大功能。ID属性可以完成下列功能：

作为一个样式表的选择器，可以让我们创建紧凑的、最小化了的XHTML页面文件。

最为一个超文本链接的目标anchor，用来替代过时的name属性(或者向前兼容和她共存)

作为基于DOM的脚本中特殊元素的引用方法。

作为一个声明的对象元素名字。

作为通常目的流程处理的

现在也经常出现组合class的结构，就是拥有一个CSS框架，然后任意组合class实现布局，看似是提高效率的捷径，可是花费的代价却是破坏结构，(当然也有例外，如Grids CSS)，一般的做法就像土豆网前台编码的设计

这个维护带来了很大的困难，也就是结构设计的不够合理，只是为了div+css而不是为了web标准。

Web标准的要把握几点：

Use structural, semantic markup.

Separate presentation from the (X)HTML document using CSS.

Rely on JavaScript as an enhancement for, not a replacement of, website features.

使用结构化，语义化的标签

使用CSS分离出(X)HTML文档中的表现元素

依靠Javascript去增强，而不是替代，网站的特征(具个例子就是如果css做不了的，交给Javascript而不是替代css去做他能做的)

对于多样式组合的结构我一直是很反感的，可能我理解的不够深入，体会不到他的好处，或许合理的组合可以兼顾结构和开发效率，可是我没有发现，我就要抵触。

对样式组合方式是这样的

举个布局例子

几个类组合成一个左浮动，宽400 背景为白色的一个区域

你可能拥有一个庞类库，页面只需要任意的class的组合就可以完成，省去大部分花费在css上的时间，可是带来的是下次结构的混乱，这样做和table布局没什么两样，只是代码看着好看而以，而且代码量相差也不会太大。在应用web标准初期，合理的table布局也是允许的。如此多的class让我想起了table冗长的属性

难道辛辛苦苦就是想使用div配合css模拟出一个table很容易实现的效果？而且达到和table布局一样的拙劣？

语义化也是结构的一个部分，语义除了合理的使用(X)HTML标记语言，id也是一个语义组成的部分，div的id就像一格即时贴，告诉你div的语义，告诉你这个区块的意义。

微格式(Microformat)是在标准 XHTML 代码中嵌入结构化数据的一种新方法。他的诞生也很明确的说明了web的结构永远是第一位，语义化的优势很现实的体现出来，div的属性规划也体现着语义，而不仅仅是一个传递对样式工作的接口。可以去看看ibm文档中心的一篇“使用 microformats 分离数据与格式”了解它的工作原理。

其实说了这么多，我也有点没头绪了。主要就是我对结构和开发效率之间的矛盾的一个说明，css框架如何才能不破环结构的一个疑问。而且对于结构和效率我的观点就是“只有合理的结构，才是你web标准化的根本动机”，web是承载信息的，没有理由为了

—-想了解更多的linux相关异常处理怎么解决关注

本文来自网络收集，不代表猴子技术宅立场，如涉及侵权请点击右边联系管理员删除。

如若转载，请注明出处：https://www.ssfiction.com/htmljc/71576.html