对级联样式表的规则集进行优化的方法和装置与流程

本发明涉及软件工程领域，更具体地涉及一种对级联样式表的规则集进行优化的方法和装置。

背景技术：

随着互联网的发展，为了开发复杂、界面功能强大的WEB应用，用来表现HTML或XML等文件样式的CSS(级联样式表)文件内容变得越来越庞大、复杂。目前，大规模的WEB应用的表现层往往由多个前端开发人员共同开发，每个前端开发人员都可能编辑自己的CSS规则，所有这些CSS规则汇集起来，不可避免会存在规则冗余、规则冲突等问题，影响网站开发效率以及给后续的网站维护增加负担。另一方面，由于开发人员各自独立，其定义的CSS规则，往往只针对网页中的一两个元素，利用率极低，也缺乏灵活性。

通常情况下，一个小型WEB应用的CSS规则大约在1千条左右，而大型应用的规则可能成千上万，维护、修改、再利用CSS规则比较麻烦。因此需要一种能够对CSS规则进行精简优化的方法，以可视化的形式展示规则及规则间的从属关系，从而提高CSS代码的灵活性和可重用性，并且提高CSS代码的开发质量。

技术实现要素：

在下文中给出关于本发明的简要概述，以便提供关于本发明的某些方面的基本理解。应当理解，这个概述并不是关于本发明的穷举性概述。它并不是意图确定本发明的关键或重要部分，也不是意图限定本发明的范围。其目的仅仅是以简化的形式给出某些概念，以此作为稍后论述的更详细描述的前序。

本发明的一个主要目的在于，提供一种对级联样式表的规则集进行优化的方法，包括：对级联样式表的规则集中的规则的语法进行归一化以消 除数据在格式上的不一致；用规则和其对应的特征构成多值关系二维表，多值关系二维表的每一行为级联样式表的规则集中的规则，列为该规则所对应的特征；将多值关系二维表转换为形式背景表，形式背景表为单值关系二维表；以及基于形式背景表生成规则之间的从属关系。

根据本发明的一个方面，提供了对级联样式表的规则集进行优化的装置，包括：语法归一化单元，被配置为对级联样式表的规则集中的规则的语法进行归一化以消除数据在格式上的不一致；多值关系二维表构成单元，被配置为用规则和其对应的特征构成多值关系二维表，多值关系二维表的每一行为级联样式表的规则集中的规则，列为该规则所对应的特征；形式背景表形成单元，被配置为将多值关系二维表转换为形式背景表，形式背景表为单值关系二维表；以及从属关系生成单元，被配置为基于形式背景表生成规则之间的从属关系。

另外，本发明的实施例还提供了用于实现上述方法的计算机程序。

此外，本发明的实施例还提供了至少计算机可读介质形式的计算机程序产品，其上记录有用于实现上述方法的计算机程序代码。

通过以下结合附图对本发明的最佳实施例的详细说明，本发明的这些以及其他优点将更加明显。

附图说明

参照下面结合附图对本发明实施例的说明，会更加容易地理解本发明的以上和其它目的、特点和优点。附图中的部件只是为了示出本发明的原理。在附图中，相同的或类似的技术特征或部件将采用相同或类似的附图标记来表示。

图1示出了根据本发明的一个实施例的对级联样式表(CSS)的规则集进行优化的方法100的示例性过程的流程图；

图2是示出一个CSS规则集的实例的图；

图3是示出图2中的规则1合并了规则3的特征后的示意图；

图4是示出规则2所扩展的潜在规则的示意图；

图5是示出多值关系二维表的示意图；

图6是示出由图2中的规则集所生成的规则从属关系的示意图；

图7A是示出了在可视化的规则从属关系之间可能存在规则冲突的示意图；

图7B是示出了可以对规则进行合并的示意图；

图7C是示出了可以对规则进行删除的示意图；以及

图8是示出根据本发明的一个实施例的对级联样式表的规则集进行优化的装置800的示例性配置的框图；以及

图9是示出可以用于实施本发明的对级联样式表的规则集进行优化的装置和方法的计算设备的示例性结构图。

具体实施方式

下面参照附图来说明本发明的实施例。在本发明的一个附图或一种实施方式中描述的元素和特征可以与一个或更多个其它附图或实施方式中示出的元素和特征相结合。应当注意，为了清楚的目的，附图和说明中省略了与本发明无关的、本领域普通技术人员已知的部件和处理的表示和描述。

本发明提出了一种基于形式概念分析的CSS规则优化及可视化方法。它通过将CSS规则集变换为形式概念中的形式背景，将CSS规则优化和可视化的问题，转化为从数据实体中抽取形式概念的外延与内涵的问题。其中一个形式概念的外延对应一组CSS规则，形式概念的内涵对应该组CSS规则所共同具有的特征集。

通过将CSS规则集转换为形式概念，本发明利用概念格生成算法，抽取出CSS规则间的从属关系，发现规则集中最通用的特征集和最具体的规则。同时，利用构建的概念格，可视化地展示了规则及规则间的关系。

利用概念分析理论，本发明可视化地展示了CSS规则间的谱系结构，相同功能的规则为聚合于概念谱系结构的同一个结点上，规则间的特征继承关系通过概念间的上下位体现出来。通过规则间的从属关系展示，开发人员可以方便地对规则进行裁剪、归并，并发现规则中的冲突。

下面结合附图详细说明根据本发明的一个实施例的对级联样式表的规则集进行优化的方法和装置。

图1示出了根据本发明的一个实施例的对级联样式表(CSS)的规则集进行优化的方法100的示例性过程的流程图。

图2是示出一个CSS规则集的实例的图。图2中包括规则1至规则5。

首先，在步骤S102中，对CSS的规则集中的各个规则的语法进行归一化以消除数据在格式上的不一致。

在一个示例中，对各个规则的语法进行归一化的方法包括以下中的一项或多项：将规则中作用相同的特征用统一的方式进行描述；将规则中的复合特征分解为多个单一特征；以及将规则的同一个类的多个声明合并。

步骤S102为数据的预处理过程，其目的是消除数据在格式上的不一致。

下面以图2中示出的CSS规则集为例分别说明以上所述的规则的归一化方法。

1.将规则中作用相同的特征用统一的方式进行描述：

图2中的CSS规则集中包括“background:#00ff00”和“background:red”，这里，将颜色统一表示为数值表示法：即将red(红色)表示为#ff0000。

2.将规则中的复合特征分解为多个单一特征：

图2中的CSS规则集中包括特征border:1px solid#0000ff，将其分解为三个单一特征，即：border-style:solid；border-color:blue；border-weight:1px。

3.将规则的同一个类的多个声明合并：

规则1和规则3中都包括类“content”，将“content”的特征的声明进行合并，可以得到合并后的规则1，如图3所示。

在完成了数据的预处理之后，在步骤S104中，用规则和其对应的特征构成多值关系二维表。在多值关系二维表中，每一行为CSS的规则集中的一个规则，列为该规则所对应的特征。

在一个示例中，在构成多值关系二维表之前，首先对规则进行扩展，生成潜在规则。潜在规则所对应的特征集为当前规则中所有特征的组合集。

潜在规则定义为：假设某规则X，其特征集A＝{pi,其中i属于[1..n]},则X的任意潜在规则Xi，其特征为{P1...Pn}的特征的任意组合。

以图2中的CSS规则集中的规则2为例，其所生成的潜在规则R2-1至R2-6如图4所示。在图4中，0表示该潜在规则不包含该特征。

将原规则及所生成的潜在规则与其各自对应的特征构成多值关系二维表。如图5，示出了图2所示的规则集中的规则及所生成的潜在规则与其各自对应的特征所构成的多值关系二维表的示意图。

接下来，在步骤S106中，将多值关系二维表转换为单值关系二维表，即为形式背景表。

从图5中可以看到，其中background、border-style和border-color为多值特征，需要转换为单值特征。转换方式为按值分类，每个特征的值分类为一个新的列。比如background有两类值，#00ff00和#ff0000，则原有background的列变换为两个列，分别为background-#00ff00列和background-#ff0000。

这样，将图5所示的多值关系二维表变换为单值形式背景表时，所对应的列为：

Background-#00ff00,background-#ff0000；borderstyle-solid；borderstyle-dotted；bordercolor-red,bordercolor-blue；margin,font,borderweight；width；clear。

接下来，在步骤S108中，基于形式背景表生成规则之间的从属关系。

规则之间的从属关系的生成过程即为从形式背景中生成概念格的过程，即从形式背景表中提取形式概念来构建概念格。

其中一个形式概念的外延对应一组CSS规则，形式概念的内涵对应该组CSS规则所共同具有的特征集。通过将CSS规则集转换为形式概念，本发明利用概念格生成算法，抽取出CSS规则间的从属关系，发现规则集中最通用的特征和最具体的特征。

在本发明中，可以采用CHEIN算法自底向上生成概念格。还可以采用BORDAT算法或GODIN算法等其它经典的概念格生成算法来获得规则之间的从属关系。有关CHEIN算法、CHEIN的改进、BORDAT算法以及GODIN算法等算法不属于本发明内容，在此不做赘述。

利用构建的概念格和概念分析理论，可以可视化地展示规则及规则间的关系，相同功能的规则聚合于概念谱系结构的同一个结点上，规则间的特征继承关系通过概念间的上下位体现出来。

如图6所示，示出了由图2中的规则集所生成的规则从属关系。

在生成规则从属关系生成后，基于CSS规则的从属关系能够可视化地 展示规则间的谱系关系，开发人员可以方便地检查规则中的特征冗余、发现规则冲突以及对规则进行合并精简。对CSS的从属关系进行可视化的方法对于本领域普通技术人员来说是已知的，在此不做赘述。

下面结合图7A-7C说明基于CSS规则的可视化的谱系关系，删除冗余规则、发现规则冲突及进行规则精简的方法。其中，图7A是示出了在可视化的规则从属关系之间可能存在规则冲突的示意图，图7B是示出了可以对规则进行合并的示意图，图7C是示出了可以对规则进行删除的示意图。

在基于规则的从属关系构建的可视图中，将没有儿子的结点称为单独结点，拥有多个后代的结点为多子结点。如图7A所示，X为单独结点，B为多子结点。

通过比较同一父结点下的单独结点和多子结点，可以发现规则冲突的情况。对同一父结点下的单独结点进行合并，可对规则进行精简。

在图7A示出的冲突示例中，X结点可能与其兄弟结点B存在规则冲突。例如：B代表特征{color:green；}X代表特征{color:blue；}，本例中大多规则(即结点)都继承了特征B{color:green}，则说明特征B为该样式集中的常用特征，而X为个别特征，该X可能会引起某些样式与主体样式的风格不一致。此时，可提示设计者决定X特征是否冲突。

具体来说，冲突检查条件为：单独结点与多子结点具有相同父结点时，可能出现冲突。

在图7B示出的合并示例中，同一结点下的多个单独结点，可能表达的是同一种设计样式，只在细节上不一致。如果合并，可以使设计简洁。比如A代表背景为红色，特征{background:red}；B代表表格的线型为实线，特征{border:solid}；C1,C2,C3表示线的粗细分别为weight:5px；weight:6px；weight:4px；此时可提示设计者是否将C1,C2,C3的线值设置相等，比如c1,c2,c3均等于5px；使设计更为简洁。

具体来说，合并检查条件为：单独结点，共同拥有相同个父结点和祖父结点。这样的隐含意义为：拥有2个以上共同特征的结点，在设计上可能属于同一类样式。

在图7C示出的删除示例中，只有一个儿子的结点，可向上合并，以减少图的结点数目，即规则数目。可以将所有特征并入祖父结点。

例如：A{background:red}B{border:solid}C{border-weight:5px}；删 除B，C后，A变为{background:red；border:solid；border-weight:5px}。

具体来说，删除条件为：单独结点，其父结点和祖父结点只有一个儿子。此时，可以删除单独结点和父结点。

通过上述方法，开发人员可以方便地检查规则中的特征冗余、发现规则冲突以及对规则进行合并精简。从而有利于提高CSS代码的灵活性和可重用性，并且提高CSS代码的开发质量。

图8是示出根据本发明的一个实施例的对CSS的规则集进行优化的装置800的示例性配置的框图。

如图8所示，对CSS的规则集进行优化的装置800包括语法归一化单元802、多值关系二维表构成单元804、形式背景表形成单元806和从属关系生成单元808。

其中，语法归一化单元802被配置为对级联样式表的规则集中的规则的语法进行归一化以消除数据在格式上的不一致。

多值关系二维表构成单元804被配置为用规则和其对应的特征构成多值关系二维表，多值关系二维表的每一行为级联样式表的规则集中的规则，列为该规则所对应的特征。

形式背景表形成单元806被配置为将多值关系二维表转换为形式背景表，形式背景表为单值关系二维表。

从属关系生成单元808被配置为基于形式背景表生成规则之间的从属关系。

其中，多值关系二维表构成单元804进一步被配置为：对规则进行扩展，生成不同于规则的潜在规则；以及用规则和其生成的潜在规则与规则和潜在规则各自所对应的特征构成多值关系二维表。

其中，潜在规则所对应的特征为规则所对应的特征的子集。

其中，对CSS的规则集进行优化的装置800还包括可视化单元(图中未示出)，可视化单元被配置为对所生成的规则之间的从属关系进行可视化。

其中，语法归一化单元802进一步被配置为执行以下中的一项或多项：将规则中作用相同的特征用统一的方式进行描述；将规则中的复合特征分解为多个单一特征；以及将规则的同一个类的多个声明合并。

其中，从属关系生成单元808进一步被配置为从形式背景表中提取形式概念来构建概念格。

其中，对CSS的规则集进行优化的装置800还包括规则集优化单元(图中未示出)，规则集优化单元被配置为基于可视化的规则之间的从属关系，删除冗余规则、对规则进行精简和/或发现规则冲突。

其中，规则集优化单元进一步被配置为：对于没有儿子结点的单独结点、其父结点和祖父结点都只有一个儿子结点的情况，删除单独结点和父结点，并将单独结点和父结点的所有特征向上合并到祖父结点。

其中，规则集优化单元进一步被配置为：将拥有相同父结点和祖父结点的多个没有儿子结点的单独结点进行合并。

关于对CSS的规则集进行优化的装置800的各个部分的操作和功能的细节可以参照结合图1-7C描述的本发明的对CSS的规则集进行优化的方法的实施例，这里不再详细描述。

在此需要说明的是，图8所示的对CSS的规则集进行优化的装置800及其组成单元的结构仅仅是示例性的，本领域技术人员可以根据需要对图8所示的结构框图进行修改。

本发明提出了一种基于形式概念分析的CSS规则优化及可视化方法。它通过将CSS规则集变换为形式概念中的形式背景，将CSS规则优化和可视化的问题，转化为从数据实体中抽取形式概念的外延与内涵的问题。其中一个形式概念的外延对应一组CSS规则，形式概念的内涵对应该组CSS规则所共同具有的特征集。

通过将CSS规则集转换为形式概念，本发明利用概念格生成算法，抽取出CSS规则间的从属关系，发现规则集中最通用的特征集和最具体的规则。同时，利用构建的概念格，可视化地展示了规则及规则间的关系。

通过规则间的从属关系展示，开发人员可以方便地对规则进行裁剪、归并，并发现规则中的冲突。从而有利于提高CSS代码的灵活性和可重用性，并且提高CSS代码的开发质量。

以上结合具体实施例描述了本发明的基本原理，但是，需要指出的是，对本领域的普通技术人员而言，能够理解本发明的方法和装置的全部或者任何步骤或者部件，可以在任何计算装置(包括处理器、存储介质等)或者计算装置的网络中，以硬件、固件、软件或者它们的组合加以实现，这 是本领域普通技术人员在阅读了本发明的说明的情况下运用他们的基本编程技能就能实现的。

因此，本发明的目的还可以通过在任何计算装置上运行一个程序或者一组程序来实现。所述计算装置可以是公知的通用装置。因此，本发明的目的也可以仅仅通过提供包含实现所述方法或者装置的程序代码的程序产品来实现。也就是说，这样的程序产品也构成本发明，并且存储有这样的程序产品的存储介质也构成本发明。显然，所述存储介质可以是任何公知的存储介质或者将来所开发出来的任何存储介质。

在通过软件和/或固件实现本发明的实施例的情况下，从存储介质或网络向具有专用硬件结构的计算机，例如图9所示的通用计算机900安装构成该软件的程序，该计算机在安装有各种程序时，能够执行各种功能等等。

在图9中，中央处理单元(CPU)901根据只读存储器(ROM)902中存储的程序或从存储部分908加载到随机存取存储器(RAM)903的程序执行各种处理。在RAM 903中，也根据需要存储当CPU 901执行各种处理等等时所需的数据。CPU 901、ROM 902和RAM 903经由总线904彼此链路。输入/输出接口905也链路到总线904。

下述部件链路到输入/输出接口905：输入部分906(包括键盘、鼠标等等)、输出部分907(包括显示器，比如阴极射线管(CRT)、液晶显示器(LCD)等，和扬声器等)、存储部分908(包括硬盘等)、通信部分909(包括网络接口卡比如LAN卡、调制解调器等)。通信部分909经由网络比如因特网执行通信处理。根据需要，驱动器910也可链路到输入/输出接口905。可拆卸介质911比如磁盘、光盘、磁光盘、半导体存储器等等根据需要被安装在驱动器910上，使得从中读出的计算机程序根据需要被安装到存储部分908中。

在通过软件实现上述系列处理的情况下，从网络比如因特网或存储介质比如可拆卸介质911安装构成软件的程序。

本领域的技术人员应当理解，这种存储介质不局限于图9所示的其中存储有程序、与设备相分离地分发以向用户提供程序的可拆卸介质911。可拆卸介质911的例子包含磁盘(包含软盘(注册商标))、光盘(包含光盘只读存储器(CD-ROM)和数字通用盘(DVD))、磁光盘(包含迷你盘(MD)(注册商标))和半导体存储器。或者，存储介质可以是ROM 902、存储部分908中包含的硬盘等等，其中存有程序，并且与包含它们的设备一起被分发给 用户。

本发明还提出一种存储有机器可读取的指令代码的程序产品。指令代码由机器读取并执行时，可执行上述根据本发明实施例的方法。

相应地，用于承载上述存储有机器可读取的指令代码的程序产品的存储介质也包括在本发明的公开中。存储介质包括但不限于软盘、光盘、磁光盘、存储卡、存储棒等。

本领域的普通技术人员应理解，在此所例举的是示例性的，本发明并不局限于此。

在本说明书中，“第一”、“第二”以及“第N个”等表述是为了将所描述的特征在文字上区分开，以清楚地描述本发明。因此，不应将其视为具有任何限定性的含义。

作为一个示例，上述方法的各个步骤以及上述设备的各个组成模块和/或单元可以实施为软件、固件、硬件或其组合，并作为相应设备中的一部分。上述装置中各个组成模块、单元通过软件、固件、硬件或其组合的方式进行配置时可使用的具体手段或方式为本领域技术人员所熟知，在此不再赘述。

作为一个示例，在通过软件或固件实现的情况下，可以从存储介质或网络向具有专用硬件结构的计算机(例如图9所示的通用计算机900)安装构成该软件的程序，该计算机在安装有各种程序时，能够执行各种功能等。

在上面对本发明具体实施例的描述中，针对一种实施方式描述和/或示出的特征可以以相同或类似的方式在一个或更多个其他实施方式中使用，与其他实施方式中的特征相组合，或替代其他实施方式中的特征。

应该强调，术语“包括/包含”在本文使用时指特征、要素、步骤或组件的存在，但并不排除一个或更多个其他特征、要素、步骤或组件的存在或附加。

此外，本发明的方法不限于按照说明书中描述的时间顺序来执行，也可以按照其他的时间顺序地、并行地或独立地执行。因此，本说明书中描述的方法的执行顺序不对本发明的技术范围构成限制。

本发明及其优点，但是应当理解在不超出由所附的权利要求所限定的本发明的精神和范围的情况下可以进行各种改变、替代和变换。而且，本 发明的范围不仅限于说明书所描述的过程、设备、手段、方法和步骤的具体实施例。本领域内的普通技术人员从本发明的公开内容将容易理解，根据本发明可以使用执行与在此的相应实施例基本相同的功能或者获得与其基本相同的结果的、现有和将来要被开发的过程、设备、手段、方法或者步骤。因此，所附的权利要求旨在在它们的范围内包括这样的过程、设备、手段、方法或者步骤。

基于以上的说明，可知公开至少公开了以下技术方案：

附记1、一种对级联样式表的规则集进行优化的方法，包括：

对级联样式表的规则集中的规则的语法进行归一化以消除数据在格式上的不一致；

用所述规则和其对应的特征构成多值关系二维表，所述多值关系二维表的每一行为所述级联样式表的规则集中的规则，列为该规则所对应的特征；

将所述多值关系二维表转换为形式背景表，所述形式背景表为单值关系二维表；以及

基于所述形式背景表生成所述规则之间的从属关系。

附记2、根据附记1所述的方法，其中，将所述规则和其对应的特征构成多值关系二维表包括：

对所述规则进行扩展，生成不同于所述规则的潜在规则；以及

用所述规则和其生成的所述潜在规则与所述规则和所述潜在规则各自所对应的特征构成多值关系二维表。

附记3、根据附记2所述的方法，其中，所述潜在规则所对应的特征为所述规则所对应的特征的子集。

附记4、根据附记1所述的方法，还包括：

对所生成的所述规则之间的所述从属关系进行可视化。

附记5、根据附记1所述的方法，其中，对级联样式表的规则集中的规则的语法进行归一化包括以下中的一项或多项：

将所述规则中作用相同的特征用统一的方式进行描述；

将所述规则中的复合特征分解为多个单一特征；以及

将所述规则的同一个类的多个声明合并。

附记6、根据附记1所述的方法，其中，基于所述形式背景表生成所述规则之间的从属关系包括从所述形式背景表中提取形式概念来构建概念格。

附记7、根据附记4所述的方法，还包括：基于可视化的所述规则之间的从属关系，删除冗余规则、对规则进行精简和/或发现规则冲突。

附记8、根据附记7所述的方法，其中，删除冗余规则包括：对于没有儿子结点的单独结点、其父结点和祖父结点都只有一个儿子结点的情况，删除所述单独结点和所述父结点，并将所述单独结点和所述父结点的所有特征向上合并到所述祖父结点。

附记9、根据附记7所述的方法，其中，对规则进行精简包括：将拥有相同父结点和祖父结点的多个没有儿子结点的单独结点进行合并。

附记10、一种对级联样式表的规则集进行优化的装置，包括：

语法归一化单元，被配置为对级联样式表的规则集中的规则的语法进行归一化以消除数据在格式上的不一致；

多值关系二维表构成单元，被配置为用所述规则和其对应的特征构成多值关系二维表，所述多值关系二维表的每一行为所述级联样式表的规则集中的规则，列为该规则所对应的特征；

形式背景表形成单元，被配置为将所述多值关系二维表转换为形式背景表，所述形式背景表为单值关系二维表；以及

从属关系生成单元，被配置为基于所述形式背景表生成所述规则之间的从属关系。

附记11、根据附记10所述的装置，其中，所述多值关系二维表构成单元进一步被配置为：

对所述规则进行扩展，生成不同于所述规则的潜在规则；以及

用所述规则和其生成的所述潜在规则与所述规则和所述潜在规则各自所对应的特征构成多值关系二维表。

附记12、根据附记11所述的装置，其中，所述潜在规则所对应的特征为所述规则所对应的特征的子集。

附记13、根据附记10所述的装置，还包括：

可视化单元，被配置为对所生成的所述规则之间的所述从属关系进行可视化。

附记14、根据附记10所述的装置，其中，所述语法归一化单元进一步被配置为执行以下中的一项或多项：

将所述规则中作用相同的特征用统一的方式进行描述；

将所述规则中的复合特征分解为多个单一特征；以及

将所述规则的同一个类的多个声明合并。

附记15、根据附记10所述的装置，其中，所述从属关系生成单元进一步被配置为从所述形式背景表中提取形式概念来构建概念格。

附记16、根据附记13所述的装置，还包括：规则集优化单元，被配置为基于可视化的所述规则之间的从属关系，删除冗余规则、对规则进行精简和/或发现规则冲突。

附记17、根据附记16所述的装置，其中，所述规则集优化单元进一步被配置为：对于没有儿子结点的单独结点、其父结点和祖父结点都只有一个儿子结点的情况，删除所述单独结点和所述父结点，并将所述单独结点和所述父结点的所有特征向上合并到所述祖父结点。

附记18、根据附记16所述的装置，其中，所述规则集优化单元进一步被配置为：将拥有相同父结点和祖父结点的多个没有儿子结点的单独结点进行合并。