公用样式模板的设计制作（4）

能够供不同专业背景的人员使用则要求：

2. 使用方便，易于自学

(1). 简单易记的命名规则

1. 结构语义性：class=”newsList” wrapper、nav

2. 表现语义性：class=”textLeft” cRed、f14px

具有语义的内容是最容易理解记忆的。有一种记忆法就是使用一些有一定意义的联想来增强对陌生内容的记忆。公用模板中可以使用具有简明语义的名称来对选择符进行命名，这样，非专业做重构开发的模板使用者，不必具有专业的CSS方面的知识或者是阅读很复杂的说明文档即可从命名上对模板中的选择符的用法进行理解，掌握了其中的规律，就可以非常快速地自学以达到熟练运用。

Web标准的所谓的语义性，主要是指(X)THML标签上的语义，强调要按照标签元素最初的定义去使用他们；同时提倡要使用具有结构属性语义的标签，而避免使用具有表现语义的标签。例如使用h(n)来标识各级标题，ol用来建立一个有序列表，li来标识列表项；对于small、b、i、blink、center这类含有元素视觉表现语义的标签，则要尽量避免使用。事实上除了(X)HTML标签名上固定的语义，还可以通过一些标签自定义的属性值来增强语义。例如后来出现的微格式（Microformat），就是基于class属性值的语义性的应用。

由于id的唯一性，使用id选择符的样式在同一个页面中不能重用。为了保证定义样式的可重用性，通常需要使用类定义（class）作为选择符。在对class属性值进行语义化命名的时候，严格遵循web标准结构与表现分离准则的人可能会排斥使用表现性语义，他们认为一旦需要通过改变CSS定义来更新元素的外观，类选择符所含有的表现语义就会与它修改后的实际外观不符合。例如设置左对齐并且类命名为“textLeft”的样式，如果把CSS定义更改为右对齐，则类选择器的命名语义与它的实际内容并不符合。首先要承认这种考虑是非常细致的。但实际项目的开发往往非常复杂，要综合考虑多方面需求，很难在某一方面达到理想状态。在一个大型系统的诸多页面中，要将所有使用到样式的元素都用某个结构特征来进行描述，从我的个人经验来看这是非常伤神的一件事。这些具有细枝末节的结构语义的样式的通用性也很成问题——有些元素只是使用了相同的样式，比如相同的字体、颜色等，但他们代表的结构属性却并不相同，如果选择器全部以结构语义来进行命名，很多外观相同但结构语义不同的样式就要重复定义了。例如，我们在如下两个地方都用到了红色字体，一个是报错警示信息，一个是地方是股票上涨点数，如果全部用语义命名方式，就需要分别命名一个“error”和一个“strengthen”的类定义，并且都设置属性“color:red”，这个“color:red”就在这两个地方重复定义了。如果有一个以表现语义命名的类“cRed”并设置表现语义所对应的红色样式，就可以在这两个地方同时使用“cRed”这个类了。另外还需要强调的是，我们设计制作的是“公用样式模板”，已经是经过整体规划高度抽象化了的具有代表性的元素样式，应该保持已有CSS的稳固，在需求有变的情况下宁愿去改变(X)HTML端的选择器挂钩，而不应该随意改变CSS中已定义好的属性。在必要的地方使用表现语义进行命名也是有一定合理性的。

所以，任何固有的规则都会有两面性，需要我们根据实际情况去权衡利弊。在对可变需求有一定的预见性的情况下，灵活地打破规则书写更易维护代码这也是开发人员的一项专业素质。“遵守规范的一个重要标准，就是知道何时打破它，并大胆地打破。”不应该死守教条，这样只会画地为牢自筑樊篱。只有搁置争议，综合运用，才能在项目需求、开发成本、维护成本的多方博弈中取得均衡。

(2). 简单易理解的嵌套层次

1. 布局最好可视化，能通过 IDE 操作，局部运用table

2. table布局的弊端：不符语义性、解析慢、重用性

学业启蒙时代习字本上的方格子，办黑板报也先用三角尺来画格子，这些少年时的记忆都直观地给了我们这样的印象，规整的格子是来排版布局的最好辅助。互联网发展初期的网页也是用表格（table）来进行布局的，这个时期的Web设计人员直接在IDE的可视化视图下就可以完成页面的排版布局。随着技术的深入发展，table布局方式的弊端也逐步暴露出来——语义性差不利于搜索引擎，整个table全部加载完才显示出来导致浏览器解析缓慢，代码不够精简冗余度高等。网页设计制作人员开始使用更专业的方式来进行网页布局——(X)HTML来标记数据组织结构，CSS设置外观样式。这种新的方式克服了table布局时代的一些缺陷，也对网页制作人员有了更高的要求，需要专业的代码编写知识甚至一些复杂的技巧。比如，为实现三列等高自适应的布局，有些重构人员通过运用复杂的标签嵌套，配合一些奇异的CSS hack方式来最终实现效果。

在提供给其他专业背景人员使用的公用样式模板中，我们也推荐使用CSS进行布局，但那些复杂的嵌套方式则是不可取的。这对于使用者来说不易理解，也难以使用。简单易理解的嵌套层次是必要的，甚至，为了给使用者带来方便，我们还可以对web标准进行一些折衷——鉴于table布局的直观和在IDE可视化视图里可以直接进行操作，我们可以在局部范围使用一些小的table来实现多列的布局。如下图例：

整体框架布局采用CSS控制，在局部的小模块里，使用table（图中红色部分所示，实际运用中边框不可见）来实现多列的布局，其他地方，web标准推荐使用什么就采用什么标签。这样，一定程度保持了语义性（实际上，页面语义性标签对于搜索引擎的引导作用会越来越小，随着搜索引擎越来越智能化，分词技术、数据挖掘技术的进一步发展，搜索引擎完全可以脱离页面标记而直接从文本内容来分析页面。语义化更大的作用将会体现在方便数据共享(例如RSS、微格式等)和利于代码维护。个人观点，接受有风险，参考须谨慎），分散的小表格克服了浏览器对于大的table解析缓慢的弊端，这些仅供实现多列布局的table也不会影响代码重用而造成代码冗余。

对于一些网页元素，根据其特点扬长避短灵活地运用，才能最大程度地裨益我们的项目。

设计开发人员的专业水准