CN111444456B - 一种样式编辑方法、装置及电子设备 - Google Patents

Abstract

本发明实施例提供了一种样式编辑方法、装置及电子设备。其中，所述方法包括：提取样式文件中符合预设规范的字符串，得到类名字符串，所述类名字符串中包括样式名称和样式数值；针对每个所述类名字符串，从多个预设的原子类模板中，选取与该类名字符串的样式名称匹配的原子类模板；按照所选取的原子类模板所表示的原子类声明格式，声明用于实现具有该类名字符串的样式数值的样式指令的原子类；调用所述原子类对网页的样式进行编辑。可以按照样式文件自动声明原子类，并利用原子类对样式进行编辑，因此可以通过原子类实现具有数值的样式指令，可以充分利用原子类降低CSS代码的代码复杂度，以降低CSS代码的运维成本。

Description

一种样式编辑方法、装置及电子设备

技术领域

本发明涉及前端网页开发技术领域，特别是涉及一种样式编辑方法、装置及电子设备。

背景技术

CSS(Cascading Style Sheets，层叠样式表)是一种用于描述网页样式的计算机语言，开发人员可以通过编写CSS代码，以实现对网页样式的编辑。随着功能的加入、规模的增加，网页的CSS代码的代码冗余度往往也随之增加。导致CSS代码的运维成本上升。

相关技术中，可以通过使用原子类批量实现样式指令，以降低CSS代码的代码冗余度。示例性的，假设需要将多个图片向右浮动，CSS代码中可以依次将每个图片作为样式指令float：right的对象，以将该图片向右浮动，该方法CSS代码中需要重复写入多次float：right。也可以针对float：right声明原子类fr，通过该原子类批量将这多个图片向右浮动，该方法可以避免CSS代码中重复写入相同的样式指令。

但是，原子类在使用前需要首先声明该原子类，例如在使用原子类fr之前需要声明原子类fr。因此，对于一些具有数值的CSS样式指令，如样式指令padding，由于数值可以在一定范围内变化，例如padding具体可以是padding：i px(表示将元素的内边距设置为i个像素)，i可以是任一正数。在样式编辑之前，往往难以准确预期样式编辑所需实现的样式指令。因此，难以预先声明相应的原子类，导致样式编辑中无法使用原子类批量实现具有数值的CSS样式指令。因此，CSS代码中可能需要重复写入这些具有数值的CSS样式指令，导致CSS代码的代码冗余度较高。

发明内容

本发明实施例的目的在于提供一种样式编辑方法、装置及电子设备，以实现降低样式编辑时CSS代码的代码复杂度，以减少CSS代码的运维成本。具体技术方案如下：

在本发明实施例的第一方面，提供了一种样式编辑方法，所述方法包括：

提取样式文件中符合预设规范的字符串，得到类名字符串，所述类名字符串中包括样式名称和样式数值；

针对每个所述类名字符串，从多个预设的原子类模板中，选取与该类名字符串的样式名称匹配的原子类模板；

按照所选取的原子类模板所表示的原子类声明格式，声明用于实现具有该类名字符串的样式数值的样式指令的原子类；

调用所述原子类对网页的样式进行编辑。

在一种可能的实施例中，所述提取样式文件中符合预设规范的字符串，得到类名字符串，包括：

提取样式文件中符合预设规范的所有字符串；

合并所提取的字符串中相同的字符串，将合并后剩余的字符串，作为类名字符串。

在一种可能的实施例中，在所述合并所提取的字符串中相同的字符串，将合并后剩余的字符串，作为类名字符串之后，所述方法还包括：

统计每个所述类名字符串在所述所有字符串中的出现次数。

在一种可能的实施例中，所述原子类模板预先通过以下方式得到：

确定与该原子类模板相匹配的样式名称所表示的样式指令；

获取声明用于实现具有预设初始值的所述样式指令的原子类的CSS代码，作为该原子类模板。

在一种可能的实施例中，所述按照所选取的原子类模板所表示的原子类声明格式，声明用于实现具有该类名字符串的样式数值的样式指令的原子类，包括：

将所选取的原子类模板中的所述预设初始值替换为该类名字符串的样式数值，得到声明用于实现具有所述样式数值的样式指令的CSS代码；

按照该CSS代码所表示的业务流程，声明用于实现具有该类名字符串的样式数值的样式指令的原子类。

在本发明实施例的第二方面，提供了一种样式编辑装置，所述装置包括：

文件扫描模块，用于提取样式文件中符合预设规范的字符串，得到类名字符串，所述类名字符串中包括样式名称和样式数值；

模板匹配模块，用于针对每个所述类名字符串，从多个预设的原子类模板中，选取与该类名字符串的样式名称匹配的原子类模板；

原子类声明模块，用于按照所选取的原子类模板所表示的原子类声明格式，声明用于实现具有该类名字符串的样式数值的样式指令的原子类；

样式编辑模块，用于调用所述原子类对网页的样式进行编辑。

在一种可能的实施例中，文件扫描模块，具体用于提取样式文件中符合预设规范的所有字符串；

合并所提取的字符串中相同的字符串，将合并后剩余的字符串，作为类名字符串。

在一种可能的实施例中，所述文件扫描模块，还用于统计每个所述类名字符串在所述所有字符串中的出现次数。

在一种可能的实施例中，所述装置还包括模板生成模块，用于确定与该原子类模板相匹配的样式名称所表示的样式指令；

获取声明用于实现具有预设初始值的所述样式指令的原子类的CSS代码，作为该原子类模板。

在一种可能的实施例中，所述原子类声明模块，具体用于将所选取的原子类模板中的所述预设初始值替换为该类名字符串的样式数值，得到声明用于实现具有所述样式数值的样式指令的CSS代码；

按照该CSS代码所表示的业务流程，声明用于实现具有该类名字符串的样式数值的样式指令的原子类。

本发明实施例提供的样式编辑方法、装置及电子设备，可以按照样式文件自动声明原子类，并利用原子类对样式进行编辑，因此可以通过原子类实现具有数值的样式指令，可以充分利用原子类降低CSS代码的代码复杂度，以降低CSS代码的运维成本。当然，实施本发明的任一产品或方法并不一定需要同时达到以上所述的所有优点。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为本发明实施例提供的样式编辑方法的一种流程示意图；

图2为应用本发明实施例提供的样式编辑方法进行前端页面开发的流程示意图；

图3a为本发明实施例提供的样式编辑装置的一种结构示意图；

图3b为本发明实施例提供的样式编辑装置的另一种结构示意图；

图4为本发明实施例提供的电子设备的一种结构示意图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

参见图1，图1所示为本发明实施例提供的样式编辑方法的一种流程示意图，可以包括：

S101，提取样式文件中符合预设规范的字符串，得到类名字符串，类名字符串中包括样式名称和样式数值。

S102，针对每个类名字符串，从多个预设的原子类模板中，选取与该类名字符串的样式名称匹配的原子类模板。

S103，按照所选取的原子类模板所表示的原子类声明格式，声明用于实现具有该类名字符串的样式数值的样式指令的原子类。

S104，调用该原子类对网页的样式进行编辑。

选用该实施例，一方面可以按照样式文件自动声明原子类，并利用原子类对样式进行编辑，因此可以通过原子类实现具有数值的样式指令，可以充分利用原子类降低CSS代码的代码复杂度，以降低CSS代码的运维成本。

另一方面，选用该实施例，由于可以通过原子类实现具有数值的样式指令，因此可以完全通过原子类进行样式编辑，使得开发人员无需手动编写CSS代码，进而节省了CSS代码测试、修改的时间，有效降低前端网页开发的人工成本，提高了前端网页开发的效率。

其中，S101中的预设规范可以根据实际需求进行设置，可以理解的是，为了能够按照预设规范从样式文件中提取到类名字符串，样式文件应当是按照预设规范进行编写的。

可以是使用用于表示预设规范的正则字符串扫描样式文件，以从样式文件中提取出符合预设规范的字符串。类名字符串中的样式名称用于表示样式指令，例如，类名字符串可以为Pr(10px)，其中Pr为样式名称，该样式名称在一种可能的应用场景中用于表示样式指令padding right(设置元素的右内边距)，样式名称所表示的样式指令可以根据实际需求进行设置，示例性的，出于实际需求，Pr也可以用于表示样式指令Width(设置元素的宽度)。样式数值用于表示一个数值，可以理解的是，样式数值自身可以是一个数值(甚至可以是样式数值所表示的数值)，也可以不是数值，例如，假设样式用于表示10px(10个像素)，则样式数值可以为10px，也可以为X-px，该X-px用于表示10px。

在S102中，每个原子类模板用于表示原子类声明格式，示例性的，一个原子类模板可以用于表示用于实现padding right的原子类的声明格式。原子类模板所表示的原子类声明格式应当符合申请原子类的语法规则。

在一种可能的实施例中，原子类可以是通过以下方式得到的：确定与该原子类模板相匹配的样式名称所表示的样式指令，获取声明用于实现具有预设初始值的样式指令的原子类的CSS代码，作为该原子类模板。

其中，预设初始值可以是使用任一字符表示，示例性的，假设声明用于实现具有$0的padding right的原子类的CSS代码为“padding-right：$0”，则可以是将“padding-right：$0”作为原子类模板，该原子类模板与用于表示padding right的样式名称匹配。

原子类模板可以是以json文件的形式保存的，示例性的，在一种可能的实施例中，原子类模板可以如下所示：

该原子类模板与样式名称Pr匹配，样式名称Pr用于表示padding right，该原子类模板所表示的原子类声明格式为“padding-right”：“$0”。

在S103中，声明用于实现具有该类名字符串的样式数值的样式指令的原子类，是指声明用于实现具有该类名字符串的样式数值所表示的数值的样式指令的原子类。示例性的，假设样式数值用于表示10px，样式名称用于表示padding right，则声明用于实现具有10px的padding right的原子类，所声明的原子类用于批量实现padding right 10px(将元素的右内边距设置为10个像素)。

在一种可能的实施例中，可以是将所选取的原子类模板中的预设初始值替换为该类名字符串的样式数值，得到声明用于实现具有样式数值的样式指令的CSS代码，按照该CSS代码所表示的业务流程，声明用于实现具有该类名字符串的样式数值的样式指令的原子类。

示例性的，假设原子类所表示的原子类声明格式为“padding-right”：“$0”，则可以是将$0替换为样式数值所表示的数值，例如10px，得到“padding-right”：“10px”，按照“padding-right”：“10px”所表示的业务流程，声明用于实现padding right 10px的原子类。

在一些应用场景中，不同的原子类可以具有不同的优先级，以表示这些原子类所实现的样式指令之间的优先级。在一种可能的实施例中，可以是检测类名字符串中是否携带有预设优先级标识，如果类名字符串中携带有预设优先级标识，则在按照与该类名字符串的样式名称匹配的原子类模板声明原子类时，声明为优先级为高的原子类。在CSS中，可以是通过在声明原子类中的CSS代码后增加！important的方式，声明优先级为高的原子类。

优先级标识根据应用场景的不同，可以是一个字符，例如！，也可以是一个字符串，例如！important。在一种可能的实施中，为提高优先级标识的检测效率，优先级标识可以是设置于类名字符串中的指定位置，如字符串的首位或末尾，示例性的，以优先级标识为！为例，则不带有优先级标识的类名字符串可以为pr(10px)，对应的带有优先级标识的类名字符串可以为pr(10px)！。

可以理解的是，如果两个类名字符串相同，则针对这两个类名字符串，声明的原子类相同，为了避免声明相同的原子类导致的CSS代码冗余，在一种可能的实施例中，可以是提取样式文件中符合预设规范的所有字符串，合并所提取的字符串中相同的字符串，将合并后剩余的字符串，作为类名字符串。合并的方式根据应用场景的不同可以不同，示例性的，可以是通过将提取到的字符串存入JavaScript(一种编程语言)的Object(对象)中，以对提取到的字符串进行合并。该Object可以用于存储字符串以及字符串对应的次数，当一个字符串存入该Object中时，如果该Object中之前没有存储该字符串，则在该Object中添加该字符串，并将该字符串对应的次数设置为1，如果该Object中之前存储该字符串，则将该字符串对应的次数加1。

例如，假设提取到5个字符串，分别为pr(10px)、pr(10px)、pr(10px)、w(1rem)、w(1rem)，则合并后剩余pr(10px)和w(1rem)，将这两个字符串作为类名字符串。如果通过前述JavaScript中的Object的方式进行合并，则可以得到如下所示的Object：

该Object中存储有两个字符串，pr(10px)和w(1rem)，因此将pr(10px)和w(1rem)作为类名字符串。

选用该实施例，可以避免声明相同的原子类导致的CSS代码冗余，进一步降低CSS代码的代码冗余度。

在一些应用场景中，可以统计每个类名字符串在提取到的所有字符串中的出现次数，仍以提取到pr(10px)、pr(10px)、pr(10px)、w(1rem)、w(1rem)这5个字符串为例，其中，pr(10px)出现3次，w(1rem)出现2次。选用该实施例，可以进一步实现排序、统计等子功能，便于开发人员更好的管理CSS代码。

为了更清楚对本发明实施例提供的样式编辑方法进行说明，下面将结合具体的实施例，对应用本发明实施例提供的样式编辑方法进行网页样式编辑的流程示意图，可以参见图2，图2所示为本发明实施例提供的网页样式编辑的一种流程示意图，可以包括：

S201，开发人员按照预设规范开发前端页面的样式文件。

开发人员可以是使用html(Hyper Text Markup Language，超文本标记语言)开发前端页面的样式文件。该规范用于约定样式编辑的业务逻辑，对于开发人员，该规范可以是以规范字典的形式表示的，例如，在该规范字典中可以约定pr(10px)等价于paddingright：10px，w(1rem)等价于width：1rem。

假设用户需要使用用于实现padding right：10px指令的原子类，和用于实现width：100％指令的原子类，则可以按照上述规范字典，开发出如下所示的样式文件：

<div class＝”pr(10px)w(100％)”>

<span>例子</span>

</div>

其中，<div class＝”pr(10px)w(100％)”>表示div元素的起始，</div>表示div元素的结束，<span>表示span元素的起始，</span>表示span元素的结束，span元素中所包括的具体内容可以根据实际需求的不同而不同，上述样式文件仅是一种示例，对本发明不做任何限制。

对于进行样式编辑的电子设备，该规范可以是以json文件的形式表示的，该json文件可以是自定义的，用于表示样式名名称与原子类模板间的匹配关系，示例性的，该json文件中可以包括：

则该json文件可以用于表示，与样式名称“pr”匹配的原子类模板的原子类声明格式为“padding-right”：“$0”，该原子类模板用于声明实现padding-right指令的原子类。与样式名称“w”匹配的原子类模板的原子类声明格式为“width”：“$0”，该原子类模板用于声明实现width指令的原子类。

S202，扫描样式文件，按照规范提取类名字符串。

关于类名字符串的提取可以参见前述S101中的相关描述，在此不在赘述。

在一种可能的实施例中，该步骤可以是通过以下代码实现的：

var classObj＝{}；

var syntax＝getSyntax()；//getSyntax返回用于表示预设规范的正则表达式//

var match＝syntax.exec(src)；//运行以找到符合规范的字符串//

var className；

while(match){//当找到符合规范的字符串时//

classObj[className]＝(classObj[className]||0)+1；//将找到的字符串存储入Object的map中，value为出现的次数(此处加1)//

match＝syntax.exec(src)；//继续寻找下一个字符串//

}

S203，按照规范，生成CSS代码。

可以是按照规范中规定的原子类模板，生成声明用于实现相应样式指令的原子类的CSS代码，关于这些代码的生成可以参见前述S103的相关描述，在此不再赘述。

示例性的，生成的CSS代码可以如下所示：

省略号中所表示的剩余代码根据应用场景的不同可以不同，该CSS代码可以实现以下两类原子类的声明：

用于实现padding-right：10px指令的原子类、用于实现width：1rem指令的原子类。

S204，将生成的CSS代码写入CSS文件。

得到的CSS文件即为用于描述前端网页的样式的文件，当该CSS文件被编译执行时，可以将前端网页的样式渲染为该CSS文件所描述的样式。CSS文件的格式根据应用场景的不同可以不同，但是应当为前端能够识别的格式。示例性的，可以是将类名字符串与对应的CSS代码合并写入CSS文件中，一个类型字符串所对应的CSS代码，为用于声明该类名字符串对应的原子类的CSS代码。以前述S203中所示的CSS代码为例，CSS文件可以如下所示：

pr(10px){padding-right:10px}w(1rem){width:1rem}…

参见图3a，图3a为本发明实施例提供的样式编辑装置的一种结构示意图，所述装置包括：

文件扫描模块301，用于提取样式文件中符合预设规范的字符串，得到类名字符串，所述类名字符串中包括样式名称和样式数值；

模板匹配模块302，用于针对每个所述类名字符串，从多个预设的原子类模板中，选取与该类名字符串的样式名称匹配的原子类模板；

原子类声明模块303，用于按照所选取的原子类模板所表示的原子类声明格式，声明用于实现具有该类名字符串的样式数值的样式指令的原子类；

样式编辑模块304，用于调用所述原子类对网页的样式进行编辑。

选用该实施例，可以按照样式文件自动声明原子类，并利用原子类对样式进行编辑，因此可以通过原子类实现具有数值的样式指令，可以充分利用原子类降低CSS代码的代码复杂度，以降低CSS代码的运维成本。

在一种可能的实施例中，文件扫描模块301，具体用于提取样式文件中符合预设规范的所有字符串；

合并所提取的字符串中相同的字符串，将合并后剩余的字符串，作为类名字符串。

在一种可能的实施例中，所述文件扫描模块301，还用于统计每个所述类名字符串在所述所有字符串中的出现次数。

在一种可能的实施例中，如图3b所示，所述装置还包括模板生成模块305，用于确定与该原子类模板相匹配的样式名称所表示的样式指令；

获取声明用于实现具有预设初始值的所述样式指令的原子类的CSS代码，作为该原子类模板。

在一种可能的实施例中，所述原子类声明模块303，具体用于将所选取的原子类模板中的所述预设初始值替换为该类名字符串的样式数值，得到声明用于实现具有所述样式数值的样式指令的CSS代码；

按照该CSS代码所表示的业务流程，声明用于实现具有该类名字符串的样式数值的样式指令的原子类。

本发明实施例还提供了一种电子设备，如图4所示，包括处理器401、通信接口402、存储器403和通信总线404，其中，处理器401，通信接口402，存储器403通过通信总线404完成相互间的通信，

存储器403，用于存放计算机程序；

处理器401，用于执行存储器403上所存放的程序时，实现如下步骤：

提取样式文件中符合预设规范的字符串，得到类名字符串，所述类名字符串中包括样式名称和样式数值；

针对每个所述类名字符串，从多个预设的原子类模板中，选取与该类名字符串的样式名称匹配的原子类模板；

按照所选取的原子类模板所表示的原子类声明格式，声明用于实现具有该类名字符串的样式数值的样式指令的原子类；

调用所述原子类对网页的样式进行编辑。

在一种可能的实施例中，所述提取样式文件中符合预设规范的字符串，得到类名字符串，包括：

提取样式文件中符合预设规范的所有字符串；

合并所提取的字符串中相同的字符串，将合并后剩余的字符串，作为类名字符串。

在一种可能的实施例中，在所述合并所提取的字符串中相同的字符串，将合并后剩余的字符串，作为类名字符串之后，所述方法还包括：

统计每个所述类名字符串在所述所有字符串中的出现次数。

在一种可能的实施例中，所述原子类模板预先通过以下方式得到：

确定与该原子类模板相匹配的样式名称所表示的样式指令；

获取声明用于实现具有预设初始值的所述样式指令的原子类的CSS代码，作为该原子类模板。

在一种可能的实施例中，所述按照所选取的原子类模板所表示的原子类声明格式，声明用于实现具有该类名字符串的样式数值的样式指令的原子类，包括：

将所选取的原子类模板中的所述预设初始值替换为该类名字符串的样式数值，得到声明用于实现具有所述样式数值的样式指令的CSS代码；

按照该CSS代码所表示的业务流程，声明用于实现具有该类名字符串的样式数值的样式指令的原子类。

上述电子设备提到的通信总线可以是外设部件互连标准(Peripheral ComponentInterconnect，PCI)总线或扩展工业标准结构(Extended Industry StandardArchitecture，EISA)总线等。该通信总线可以分为地址总线、数据总线、控制总线等。为便于表示，图中仅用一条粗线表示，但并不表示仅有一根总线或一种类型的总线。

通信接口用于上述电子设备与其他设备之间的通信。

存储器可以包括随机存取存储器(Random Access Memory，RAM)，也可以包括非易失性存储器(Non-Volatile Memory，NVM)，例如至少一个磁盘存储器。可选的，存储器还可以是至少一个位于远离前述处理器的存储装置。

上述的处理器可以是通用处理器，包括中央处理器(Central Processing Unit，CPU)、网络处理器(Network Processor，NP)等；还可以是数字信号处理器(Digital SignalProcessing，DSP)、专用集成电路(Application Specific Integrated Circuit，ASIC)、现场可编程门阵列(Field-Programmable Gate Array，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。

在本发明提供的又一实施例中，还提供了一种计算机可读存储介质，该计算机可读存储介质中存储有指令，当其在计算机上运行时，使得计算机执行上述实施例中任一样式编辑方法。

在本发明提供的又一实施例中，还提供了一种包含指令的计算机程序产品，当其在计算机上运行时，使得计算机执行上述实施例中任一样式编辑方法。

在上述实施例中，可以全部或部分地通过软件、硬件、固件或者其任意组合来实现。当使用软件实现时，可以全部或部分地以计算机程序产品的形式实现。所述计算机程序产品包括一个或多个计算机指令。在计算机上加载和执行所述计算机程序指令时，全部或部分地产生按照本发明实施例所述的流程或功能。所述计算机可以是通用计算机、专用计算机、计算机网络、或者其他可编程装置。所述计算机指令可以存储在计算机可读存储介质中，或者从一个计算机可读存储介质向另一个计算机可读存储介质传输，例如，所述计算机指令可以从一个网站站点、计算机、服务器或数据中心通过有线(例如同轴电缆、光纤、数字用户线(DSL))或无线(例如红外、无线、微波等)方式向另一个网站站点、计算机、服务器或数据中心进行传输。所述计算机可读存储介质可以是计算机能够存取的任何可用介质或者是包含一个或多个可用介质集成的服务器、数据中心等数据存储设备。所述可用介质可以是磁性介质，(例如，软盘、硬盘、磁带)、光介质(例如，DVD)、或者半导体介质(例如固态硬盘Solid State Disk(SSD))等。

需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

本说明书中的各个实施例均采用相关的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于装置、电子设备、计算机可读存储介质、计算机程序产品的实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

以上所述仅为本发明的较佳实施例而已，并非用于限定本发明的保护范围。凡在本发明的精神和原则之内所作的任何修改、等同替换、改进等，均包含在本发明的保护范围内。

Claims (8)

1.一种样式编辑方法，其特征在于，所述方法包括：

提取样式文件中符合预设规范的字符串，得到类名字符串，所述类名字符串中包括样式名称和样式数值；

针对每个所述类名字符串，从多个预设的原子类模板中，选取与该类名字符串的样式名称匹配的原子类模板；

按照所选取的原子类模板所表示的原子类声明格式，声明用于实现具有该类名字符串的样式数值的样式指令的原子类；

调用所述原子类对网页的样式进行编辑；

所述原子类模板预先通过以下方式得到：

确定与该原子类模板相匹配的样式名称所表示的样式指令；

获取声明用于实现具有预设初始值的所述样式指令的原子类的CSS代码，作为该原子类模板所表示的原子类声明格式；

所述按照所选取的原子类模板所表示的原子类声明格式，声明用于实现具有该类名字符串的样式数值的样式指令的原子类，包括：

将所选取的原子类模板所表示的原子类声明格式中的所述预设初始值替换为该类名字符串的样式数值，得到声明用于实现具有所述样式数值的样式指令的CSS代码；

按照该CSS代码所表示的业务流程，声明用于实现具有该类名字符串的样式数值的样式指令的原子类。

2.根据权利要求1所述的方法，其特征在于，所述提取样式文件中符合预设规范的字符串，得到类名字符串，包括：

提取样式文件中符合预设规范的所有字符串；

合并所提取的字符串中相同的字符串，将合并后剩余的字符串，作为类名字符串。

3.根据权利要求2所述的方法，其特征在于，在所述合并所提取的字符串中相同的字符串，将合并后剩余的字符串，作为类名字符串之后，所述方法还包括：

统计每个所述类名字符串在所述所有字符串中的出现次数。

4.一种样式编辑装置，其特征在于，所述装置包括：

文件扫描模块，用于提取样式文件中符合预设规范的字符串，得到类名字符串，所述类名字符串中包括样式名称和样式数值；

模板匹配模块，用于针对每个所述类名字符串，从多个预设的原子类模板中，选取与该类名字符串的样式名称匹配的原子类模板；

原子类声明模块，用于按照所选取的原子类模板所表示的原子类声明格式，声明用于实现具有该类名字符串的样式数值的样式指令的原子类；

样式编辑模块，用于调用所述原子类对网页的样式进行编辑；

所述装置还包括模板生成模块，用于确定与该原子类模板相匹配的样式名称所表示的样式指令；

获取声明用于实现具有预设初始值的所述样式指令的原子类的CSS代码，作为该原子类模板；

所述原子类声明模块，具体用于将所选取的原子类模板中的所述预设初始值替换为该类名字符串的样式数值，得到声明用于实现具有所述样式数值的样式指令的CSS代码；

按照该CSS代码所表示的业务流程，声明用于实现具有该类名字符串的样式数值的样式指令的原子类。

5.根据权利要求4所述的装置，其特征在于，文件扫描模块，具体用于提取样式文件中符合预设规范的所有字符串；

合并所提取的字符串中相同的字符串，将合并后剩余的字符串，作为类名字符串。

6.根据权利要求5所述的装置，其特征在于，所述文件扫描模块，还用于统计每个所述类名字符串在所述所有字符串中的出现次数。

7.一种电子设备，其特征在于，包括处理器、通信接口、存储器和通信总线，其中，处理器，通信接口，存储器通过通信总线完成相互间的通信；

存储器，用于存放计算机程序；

处理器，用于执行存储器上所存放的程序时，实现权利要求1-3任一所述的方法步骤。

8.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质内存储有计算机程序，所述计算机程序被处理器执行时实现权利要求1-3任一所述的方法步骤。