[发明专利]生成CSS文件的方法和装置、电子设备和存储介质

说明书

本申请提供了一种生成CSS文件的方法和装置、电子设备和存储介质，其中，该方法包括：采用获取需要进行样式信息设置的目标HTML文件；在预设的多个CSS原子类中，确定出所述目标HTML文件所需使用的目标CSS原子类；基于所述目标CSS原子类生成用于对所述目标HTML文件进行样式信息设置的CSS文件。通过在预设的多个CSS原子类中，确定出目标HTML文件所需使用的目标CSS原子类，并基于目标CSS原子类生成CSS文件，可以使最终得到的CSS文件中的所有目标CSS原子类是目标HTML文件所需使用的，进而可以避免目标HTML文件中不需要的CSS原子类存在于CSS文件中，可以有效减少CSS文件中CSS原子类的数量，并有效克服了相关技术中存在的CSS文件体积大，从而导致用户无法快速看到页面内容。

技术领域

本申请涉及互联网技术领域，尤其涉及一种生成CSS文件的方法和装置、电子设备和存储介质。

背景技术

在相关技术中，通常采用CSS(Cascading Style Sheets，层叠样式表，是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言)对网页中元素位置的排版进行控制，以支持各种字体字号样式，并实现对网页对象和模型样式的编辑。

原子化CSS是一种CSS的架构方式，它倾向于小巧且用途单一的class，并且会以视觉效果进行命名。相关技术中存在的CSS框架，如Tailwind CSS，主要是通过内置一些常用的样式来实现原子CSS，不过这种方案会出现样式的冗余，进而导致CSS文件体积大，从而导致用户无法快速看到页面内容。

因此，相关技术中的CSS文件体积大，从而导致用户无法快速看到页面内容的问题。

发明内容

本申请提供了一种生成CSS文件的方法和装置、电子设备和存储介质，以至少解决相关技术中的CSS文件体积大，从而导致用户无法快速看到页面内容的问题。

根据本申请实施例的一个方面，提供一种生成CSS文件的方法，包括：

获取需要进行样式信息设置的目标HTML文件；

在预设的多个CSS原子类中，确定出所述目标HTML文件所需使用的目标CSS原子类；

基于所述目标CSS原子类生成用于对所述目标HTML文件进行样式信息设置的CSS文件。

可选地，如前述的方法，在所述在预设的多个CSS原子类中，确定出所述目标HTML文件所需使用的目标CSS原子类之前，所述方法还包括：

按照预设的页面渲染方案，确定出需要生成的所述多个CSS原子类；

基于与每个CSS原子类对应的原子类名，以及所述多个CSS原子类，生成包括所述多个CSS原子类的规则字典。

可选地，如前述的方法，所述在预设的多个CSS原子类中，确定出所述目标HTML文件所需使用的目标CSS原子类，包括：

按照预设方案对所述目标HTML文件进行解析，确定出所述目标HTML文件中的目标样式信息；

在所述规则字典中存在与所述目标样式信息相同的目标CSS原子类名的情况下，将所述目标CSS原子类名对应的原子类确定为与所述目标样式信息对应的所述目标CSS原子类。

可选地，如前述的方法，所述基于所述目标CSS原子类生成用于对所述目标HTML文件进行样式信息设置的CSS文件，包括：

建立缓存字典；

将所述目标CSS原子类名以及所述目标CSS原子类对应缓存至所述缓存字典中；

基于所述缓存字典中的目标CSS原子类生成用于对所述目标HTML文件进行样式信息设置的CSS文件。