Css atomic class rule merging method, apparatus, storage medium, and computer device

Abstract

The CSS atomic class rule merging method provided in the application comprises the following steps: extracting non-repeated initial atomic class rules from multiple CSS files and generating a rule feature vector of each initial atomic class rule; calculating the similarity between each initial atomic class rule according to the rule feature vector of each initial atomic class rule, and generating a combinable rule group in each initial atomic class rule based on the similarity and semantic analysis; performing attribute aggregation on the initial atomic class rules in each combinable rule group to obtain a corresponding target atomic class rule, and establishing a mapping relationship between each target atomic class rule and the style priority of the corresponding initial atomic class rule; and optimizing the atomic class references of each CSS file according to each target atomic class rule. In this way, efficient global optimization can be realized while the atomization characteristic is maintained.

Description

Technical Field

[0001] This application relates to the field of computer technology, and in particular to a method, apparatus, storage medium, and computer device for merging CSS atomic class rules. Background Technology

[0002] Atomic CSS has become an important tool in front-end development due to its high reusability and flexible composition capabilities. However, with the excessive fragmentation of atomic classes, the HTML structure often needs to embed a large number of class names, resulting in resource redundancy, decreased rendering performance, and increased maintenance costs. For example, the independent existence of .mt-4 and .mb-4 files increases the size of CSS files, and browsers need to parse a large number of fine-grained rules, further affecting style calculation efficiency. Although existing compression tools such as PurgeCSS can remove unused rules, they cannot intelligently merge recurring patterns, making it difficult to fundamentally solve the problem.

[0003] To address these shortcomings, common implementation methods include the following: runtime merging libraries such as CSS-in-JS dynamically generate composite classes to reduce redundancy; preprocessors like Sass and Less provide macro expansion capabilities, enabling the generation of composite classes through mixins; Tailwind JIT alleviates file size issues by generating atomic classes on demand; and general-purpose compressors like cssnano can merge adjacent selectors. These methods, to some extent, improve the redundancy issues caused by atomic CSS.

[0004] However, the aforementioned existing technologies still have significant drawbacks. First, most are passive compression methods, unable to actively derive merging rules; second, they fail to establish semantic logical relationships between attributes; third, the merging process may destroy specificity, leading to disordered style priorities; and fourth, the optimization scope is limited to a single file, making it difficult to eliminate redundancy globally. In summary, existing technologies still struggle to achieve efficient global optimization while maintaining atomicity. Summary of the Invention

[0005] The purpose of this application is to at least address one of the aforementioned technical deficiencies, particularly the technical deficiency that existing technologies struggle to achieve efficient global optimization while maintaining atomization characteristics.

[0006] Firstly, this application provides a method for merging CSS atomic class rules, the method including:

[0007] Extract unique initial atomic class rules from multiple CSS files and generate a rule feature vector for each initial atomic class rule;

[0008] Based on the rule feature vector of each initial atomic class rule, the similarity between each initial atomic class rule is calculated, and based on the similarity and semantic analysis, mergeable rule groups are generated in each initial atomic class rule.

[0009] For each mergeable rule group, perform attribute aggregation on the initial atomic class rules to obtain the corresponding target atomic class rules, and establish a mapping relationship between the style priority of each target atomic class rule and the corresponding initial atomic class rule;

[0010] Optimize the atomic class references in each CSS file based on the rules of each target atomic class.

[0011] In one embodiment, the step of extracting non-repeating initial atomic class rules from multiple CSS files includes:

[0012] Scan each CSS file and generate an abstract syntax tree for each CSS file;

[0013] In each abstract syntax tree, nodes that conform to the atomicity feature are selected to obtain the initial atomic class rules;

[0014] Calculate the hash value for the attribute-value pair of each initial atomic class rule, and identify and cluster duplicate initial atomic class rules based on the hash value of each initial atomic class rule.

[0015] In one embodiment, the step of generating the rule feature vector for each initial atomic class rule includes:

[0016] Extract the attributes, values, units, and selector weights of each initial atomic class rule;

[0017] According to the preset encoding rules, the attributes, values, units, and selector weights of each initial atomic class rule are converted into numerical vectors to obtain the rule feature vector of each initial atomic class rule.

[0018] In one embodiment, the step of generating mergeable rule groups from each initial atomic class rule based on various similarities combined with semantic analysis includes:

[0019] Calculate the Hamming distance between initial atomic class rules with a similarity greater than a preset threshold;

[0020] Based on the Hamming distances and the logical properties of each initial atomic class rule, each group of rules that can be merged is determined.

[0021] In one embodiment, the step of aggregating attributes of the initial atomic class rules in each mergeable rule group to obtain the corresponding target atomic class rules includes:

[0022] The attributes of the initial atomic class rules in each mergeable rule group are aggregated and a new class name is generated to obtain the target atomic class rule for each mergeable rule group.

[0023] In one embodiment, the method further includes:

[0024] When a style priority conflict is detected between target atomic class rules, a style priority comparison operation is performed.

[0025] In one embodiment, the method further includes:

[0026] When it is detected that the rendering environment of the CSS file does not support the target atomic class rule, the target atomic class rule is broken down into the corresponding initial atomic class rule.

[0027] Secondly, this application provides a CSS atomic class rule merging device, the device comprising:

[0028] The initial atomic class rule extraction module is used to extract non-repeating initial atomic class rules from multiple CSS files and generate a rule feature vector for each initial atomic class rule;

[0029] The mergeable rule group generation module is used to calculate the similarity between the rules of each initial atomic class based on the rule feature vector of each initial atomic class rule, and generate mergeable rule groups in each initial atomic class rule based on the similarity and semantic analysis.

[0030] The target atomic class rule determination module is used to perform attribute aggregation on the initial atomic class rules in each mergeable rule group to obtain the corresponding target atomic class rules, and to establish a mapping relationship between the style priority of each target atomic class rule and the corresponding initial atomic class rule.

[0031] The atomic class reference optimization module is used to optimize atomic class references in various CSS files based on the rules of each target atomic class.

[0032] Thirdly, this application provides a storage medium storing computer-readable instructions that, when executed by one or more processors, cause the one or more processors to perform the steps of any of the CSS atomic class rule merging methods described in the above embodiments.

[0033] Fourthly, this application provides a computer device, including: one or more processors, and a memory;

[0034] The memory stores computer-readable instructions that, when executed by one or more processors, perform the steps of any of the CSS atomic class rule merging methods described in the above embodiments.

[0035] As can be seen from the above technical solutions, the embodiments of this application have the following advantages:

[0036] The CSS atomic class rule merging method provided in this application extracts unique initial atomic class rules from multiple CSS files and generates rule feature vectors, achieving a structured representation of atomic class rules. This quantifies the similarity between rules, thereby proactively identifying mergeable rule groups globally. By combining semantic analysis to generate mergeable rule groups and aggregating their attributes, this method reduces rule fragmentation while maintaining the characteristics of atomic CSS, generating target atomic class rules. Furthermore, by establishing a style priority mapping relationship between target atomic class rules and initial atomic class rules, and optimizing atomic class references in CSS files accordingly, this method not only avoids specific conflicts but also significantly reduces CSS file size, decreases the number of class names in HTML, and improves browser style calculation efficiency and rendering performance. Simultaneously, this method achieves intelligent merging and optimization globally, overcoming the shortcomings of passive compression, limited optimization scope, and lack of semantic logical connections in existing technologies. It fundamentally improves the reusability, maintainability, and performance of atomic CSS, demonstrating significant beneficial effects. Attached Figure Description

[0037] To more clearly illustrate the technical solutions in the embodiments of this application or the prior art, the drawings used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are only some embodiments of this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0038] Figure 1 A flowchart illustrating the CSS atomic class rule merging method provided in this application embodiment;

[0039] Figure 2 Example diagram of the CSS atomic class rule merging method provided in the embodiments of this application;

[0040] Figure 3 A schematic diagram of the CSS atomic class rule merging device provided in the embodiments of this application;

[0041] Figure 4 This is a schematic diagram of the internal structure of a computer device provided in an embodiment of this application. Detailed Implementation

[0042] The technical solutions of the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this application, and not all embodiments. Based on the embodiments of this application, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this application.

[0043] This application provides a method for merging CSS atomic class rules. The following embodiments illustrate this method using a computer device as an example. It is understood that the computer device can be any device with data processing capabilities, including but not limited to a single server, server cluster, personal laptop, desktop computer, etc. Figure 1 As shown, the method may include the following steps:

[0044] S101: Extract unique initial atomic class rules from multiple CSS files and generate a rule feature vector for each initial atomic class rule.

[0045] Here, a CSS file refers to a Cascading Style Sheets (CSS) document used to define the style of a webpage, containing multiple style rules for the appearance of HTML elements; an atomic class rule refers to a minimal style rule containing only a single CSS property declaration, such as a class selector that only sets the margin, padding, or font size; an initial atomic class rule refers to an atomic class rule extracted directly from the CSS file before any merging, aggregation, or optimization; and a rule feature vector refers to a vectorized data structure used to characterize the attribute features of the initial atomic class rule. By encoding the rule's attribute name, attribute value, and related style features, unstructured CSS style information is transformed into structured data that can be used by computer devices for similarity analysis and pattern recognition.

[0046] Specifically, the computer device retrieves and reads text content from multiple CSS files. It parses each CSS file, identifying selectors, declaration blocks, and other style units as candidate rules, and then filters out initial atomic class rules based on the criterion that each rule contains only a single property declaration. To ensure that the extracted rules are not duplicated, the computer device normalizes each initial atomic class rule, including standardizing selector formats, property names and value representations, normalizing colors, units, and abbreviations, and generating a unique identifier for the normalized rules to achieve efficient deduplication.

[0047] Subsequently, the computer device maps each initial atomic class rule into a rule feature vector based on a predefined feature space. This feature vector includes attribute type identifiers, attribute value encodings, selector specificity, media query context, and pseudo-class / pseudo-element information, representing the various features of the rule in a structured manner. The computer device associates and stores the generated feature vectors with the corresponding initial atomic class rules and their source information, providing a complete data foundation for subsequent similarity analysis, rule grouping, and merging.

[0048] In this step, by obtaining and extracting unique initial atomic class rules from multiple CSS files, it is ensured that the computer device collects complete and unique atomic class rules globally, avoiding rule redundancy and duplication. The generated rule feature vector can structurally represent the attributes, selector specificity, and contextual information of each rule, enabling the computer device to accurately judge the similarity between rules and provide a reliable basis for subsequent intelligent merging. Thus, while maintaining the atomicity of CSS, it achieves efficient management and optimization of global rules, reduces style duplication, improves CSS processing efficiency and browser rendering performance, and ensures the correctness of style priority, which has significant beneficial effects.

[0049] S102: Calculate the similarity between the rules of each initial atomic class based on the rule feature vector of each initial atomic class rule, and generate mergeable rule groups in each initial atomic class rule based on the similarity and semantic analysis.

[0050] Among them, similarity refers to the degree of similarity between rules obtained by computer devices through numerical comparison or algorithmic measurement of rule feature vectors, which is used to judge the closeness of rules in terms of attributes and semantics; semantic analysis refers to the grouping and labeling of the attribute types and visual or layout functions of rules by the device to reveal the functional or performance relationship between rules; mergeable rule groups refer to the set formed by aggregating initial atomic class rules that are highly similar and semantically combinable based on similarity calculation and semantic analysis, providing a basis for subsequent attribute aggregation and optimization processing.

[0051] Specifically, the feature vector of each initial atomic class rule is first obtained, and the similarity between rules is calculated based on these vectors. The computer device can use cosine similarity or other numerical metrics to perform a dot product of the feature vectors of two rules and divide by the product of their vector magnitudes to quantify the similarity between the rules in terms of attribute type, attribute value, and contextual information. For example, cosθ = (A·B) / (||A|| ||B||) = (1*1 + 4*4 + 0*0 + 0.1*0.1) / (√(1²+4²+0²+0.1²) * √(1²+4²+0²+0.1²)) = 17.01 / (√17.01 * √17.01) = 1. When the similarity value exceeds a preset threshold and the attribute units are consistent, the computer device determines that these rules are highly similar in structure and semantics, providing a basis for subsequent merging.

[0052] Subsequently, the computer device uses semantic analysis to label the initial atomic class rules with functional or visual categories, taking into account information from layout, color, and other attribute categories. This ensures that the combination of rules depends not only on numerical similarity but also on their semantic relationships in style representation. Based on similarity and semantic information, the computer device groups highly correlated rules into mergeable rule groups. Each rule group contains a set of initial atomic class rules that can be safely merged in terms of attributes and semantics.

[0053] In this step, similarity calculation quantifies the degree of closeness of rules in terms of attribute type, attribute value, and contextual information, thereby identifying rules that are highly similar in structure and function. Combining semantic analysis further ensures that the relevance of rules in visual or layout performance is maintained. The resulting mergeable rule groups can reduce duplicate styles while ensuring the correctness of style priority and presentation. As a result, the computer device can intelligently aggregate rules globally, providing a reliable basis for subsequent attribute aggregation and target atomic class rule generation, achieving efficient optimization and maintainability improvement of atomic CSS, with significant beneficial effects.

[0054] S103: Perform attribute aggregation on the initial atomic class rules in each mergeable rule group to obtain the corresponding target atomic class rules, and establish a mapping relationship between the style priority of each target atomic class rule and the corresponding initial atomic class rule.

[0055] Attribute aggregation refers to the process by which a computer device merges or summarizes the attributes of each initial atomic class rule within the same rule group, generating a composite rule that includes all attributes within the group. A target atomic class rule is a new atomic class rule obtained through attribute aggregation, maintaining atomic granularity while integrating the attributes of multiple rules within the group. Style priority mapping refers to the device associating and recording the selector specificity and cascading priority of each target atomic class rule with its corresponding initial atomic class rule, ensuring the correctness of style priority during subsequent CSS application and rendering.

[0056] Specifically, the computer device traverses all initial atomic class rules within the rule group, summarizes the properties of each rule and their corresponding values, merges properties of the same type and handles possible conflicts, in order to generate a target atomic class rule containing all properties within the group, thereby reducing rule fragmentation while maintaining atomic granularity and improving the compactness and rendering efficiency of CSS files.

[0057] While generating target atomic class rules, the computer device calculates the selector specificity and cascading priority of each initial atomic class rule and maps them to the corresponding target atomic class rules to form a style priority mapping relationship. The computer device can inject this mapping information as compile-time comments or generate a weight mapping table to record the priority information of the original rules and ensure that the style coverage order is not disrupted during subsequent CSS applications. In this way, the computer device can maintain the correctness and traceability of style priorities while performing attribute aggregation, providing reliable data support for subsequent global optimization, effectively reducing redundant styles, improving browser rendering performance, and enhancing CSS maintainability.

[0058] In this step, through attribute aggregation, the computer device can integrate highly related rules within a group into a single rule, reducing redundant styles and improving the compactness and rendering efficiency of CSS files. Establishing a priority mapping relationship ensures that the merged target rules maintain the original style coverage order and selector specificity during application, thereby avoiding style conflicts and coverage errors. As a result, the computer device can achieve efficient management and optimization of atomic rules on a global scale, while ensuring the correctness of style priority and the reliability of browser rendering, which has significant beneficial effects.

[0059] S104: Optimize the atomic class references in each CSS file based on the atomic class rules of each target.

[0060] Atomic class references refer to the calls and applications of CSS class selectors in HTML or template files, which determine the final style rendering of web page elements.

[0061] Specifically, the computer device iterates through the atomic class references in each CSS file, updating the calls that originally pointed to the initial atomic class rule to the corresponding target atomic class rule, thereby achieving reference consistency and optimization. During execution, the computer device maintains the rule override order according to the style priority mapping relationship, while updating the class names in the template or HTML to ensure that the styles of web page elements remain consistent with the original design during rendering, avoiding style conflicts and override errors. The computer device can quickly update references through batch replacement or mapping tables, while simultaneously processing the involved media queries and pseudo-class contexts to ensure that the optimized CSS file still takes effect accurately in different views and responsive scenarios.

[0062] In this step, the computer device can unify the calls of multiple initial atomic classes into a more compact target atomic class reference, reduce redundant class names in HTML, improve the overall compactness of CSS files and browser rendering efficiency, while maintaining the correctness of style priority and performance. This achieves global optimization and efficient maintenance of atomic CSS, with significant beneficial effects.

[0063] In the above embodiments, by extracting unique initial atomic class rules from multiple CSS files and generating rule feature vectors, a structured representation of atomic class rules is achieved. This quantifies the similarity between rules, thereby proactively identifying mergeable rule groups globally. By combining semantic analysis to generate mergeable rule groups and aggregating their attributes, this method reduces rule fragmentation while maintaining the characteristics of atomic CSS, generating target atomic class rules. Furthermore, by establishing a style priority mapping relationship between target atomic class rules and initial atomic class rules, and optimizing atomic class references in CSS files accordingly, this method not only avoids specific conflicts but also significantly reduces CSS file size, decreases the number of class names in HTML, and improves browser style calculation efficiency and rendering performance. Simultaneously, this method achieves intelligent merging and optimization globally, overcoming the shortcomings of passive compression, limited optimization scope, and lack of semantic logical connections in existing technologies. It fundamentally improves the reusability, maintainability, and performance of atomic CSS, demonstrating significant beneficial effects.

[0064] In one embodiment, the step of extracting non-repeating initial atomic class rules from multiple CSS files includes:

[0065] Scan each CSS file and generate an abstract syntax tree for each CSS file;

[0066] In each abstract syntax tree, nodes that conform to the atomicity feature are selected to obtain the initial atomic class rules;

[0067] Calculate the hash value for the attribute-value pair of each initial atomic class rule, and identify and cluster duplicate initial atomic class rules based on the hash value of each initial atomic class rule.

[0068] In this context, the Abstract Syntax Tree (ABST) is a tree-like structure representing the text of a CSS file. Nodes represent selectors, declaration blocks, properties, or other syntactic units, used for structured analysis and manipulation. Atomic feature nodes are nodes in the ABST that contain only a single property declaration or satisfy a predefined atomic rule, representing the smallest granularity of style rules. Property-value pair hashes are unique identifiers generated by numerically calculating the property name and value of each initial atomic class rule, used to quickly determine rule repetition and implement clustering operations.

[0069] Specifically, during the preprocessing phase of project building, such as the compile phase of Webpack, computer devices can traverse and read all the CSS files in the entire project, and hand over the text content of each CSS file to the Lightning CSS parser to generate an abstract syntax tree, where nodes represent syntactic units such as selectors, declaration blocks, properties, and values, in order to achieve structured style analysis.

[0070] Subsequently, the computer device traverses the abstract syntax tree parsed from Lightning CSS, filtering nodes that conform to atomicity characteristics to generate initial atomic class rules. Specifically, the computer device uses an atomic rule extractor to identify nodes whose declaration blocks contain only a single CSS property with a class name selector that conforms to the atomic naming pattern. For example, `.mt-4 { margin-top:1rem;}` matches, while `.text-red { color: red;}` does not. Through this operation, the computer device can extract atomic classes scattered across different CSS files (such as `.mt-4` in `Button.css` and `.mb-4` in `Card.css`) into a central rule repository, providing a complete set of rules for subsequent processing.

[0071] Subsequently, the computer device calculates a hash value for the attribute-value pairs of each initial atomic class rule, such as using the MD5 algorithm to generate a unique identifier, and automatically clusters rules with the same or highly similar content based on the hash value. Even if these rules are scattered in different CSS files, they can be grouped into the same rule group, thereby eliminating redundancy.

[0072] In this embodiment, the computer device scans each CSS file and generates an abstract syntax tree for each CSS file. This allows for a structured representation of the textual CSS content, facilitating precise analysis and processing of style rules later. Within each abstract syntax tree, nodes conforming to atomicity characteristics are selected, enabling the computer device to identify initial atomic class rules containing only a single attribute declaration and conforming to an atomic naming pattern. This allows for the extraction of the smallest granular style unit globally. A hash value is calculated for the attribute-value pairs of each initial atomic class rule, and duplicate rules are identified and clustered based on the hash value. This allows the computer device to quickly locate rules with identical or highly similar content, regardless of their location in different CSS files. This eliminates redundancy, unifies rule management, and provides a reliable data foundation for subsequent rule merging and optimization. Thus, the computer device can achieve efficient identification, deduplication, and structured management of atomic CSS rules globally, reducing redundant styles, improving the compactness of CSS files and browser rendering efficiency, while ensuring the correctness of style priority and performance, resulting in significant benefits.

[0073] In one embodiment, the step of generating the rule feature vector for each initial atomic class rule includes:

[0074] Extract the attributes, values, units, and selector weights of each initial atomic class rule;

[0075] According to the preset encoding rules, the attributes, values, units, and selector weights of each initial atomic class rule are converted into numerical vectors to obtain the rule feature vector of each initial atomic class rule.

[0076] In CSS, attributes refer to the style types specified in the declaration block, such as `margin-top`, `color`, or `font-size`; values ​​refer to the specific numerical values ​​corresponding to the attributes, such as 1, 16, or 0.5; units refer to the units of measurement used for the values, such as `rem`, `px`, `em`, or percentages; and selector weights refer to the selector priority determined by the computer device according to CSS cascading and selector specificity rules, used to indicate the relative importance of the rule in the style coverage order. Preset encoding rules refer to the rule system defined by the device to map attributes, values, units, and selector weights to a unified numerical vector, including numerical encoding methods for attribute types, unit types, and weight levels.

[0077] The computer device first extracts the attributes, values, units, and selector weights of each initial atomic class rule, and generates structured data from this information. Each item contains the attribute name, attribute value, unit, selector weight, and source code location, so that the device can uniformly represent the rule characteristics and provide a data foundation for subsequent processing. Specifically, the computer device establishes an attribute logical group mapping table, grouping attributes with similar functions or semantically related attributes into the same logical group. For example, it maps margin-top and margin-bottom to margin-block, and padding-left and padding-right to padding-inline, thereby reflecting the semantic relevance of the rules during the encoding process.

[0078] Subsequently, the computer equipment converts each initial atomic class rule into a numerical vector according to a preset encoding rule, forming a rule feature vector. Specifically, each rule is represented as a four-dimensional vector [attribute type, value, unit, weight], where the attribute type is encoded by a logical group ID, such as margin-block corresponding to 1; the unit is encoded by an enumeration index, such as rem corresponding to 0; the weight is the selector-specific value; and the value is directly taken from the specific value in the CSS declaration. Taking .mt-4 { margin-top:1rem;} as an example, its vectorized representation is [1, 4, 0, 0.1], corresponding to the attribute margin-block (1), the value 4, the unit rem (0), and the weight 0.1, respectively. Based on this, the computer equipment can convert each initial atomic class rule into a quantifiable and comparable rule feature vector, providing reliable data support for subsequent similarity calculation, rule clustering, and intelligent merging, thereby achieving efficient management and global optimization of atomic CSS.

[0079] In this embodiment, the computer device can structure the textual and semantic information of atomic rules into quantifiable vector representations, enabling the similarity and differences between rules to be accurately calculated. This provides a reliable data foundation for subsequent rule clustering, merging, and optimization, thereby reducing redundant styles, improving the compactness of CSS files and browser rendering efficiency, and ensuring consistency in style priority and visual performance, resulting in significant beneficial effects.

[0080] In one embodiment, the step of generating mergeable rule groups from each initial atomic class rule based on various similarities combined with semantic analysis includes:

[0081] Calculate the Hamming distance between initial atomic class rules with a similarity greater than a preset threshold;

[0082] Based on the Hamming distances and the logical properties of each initial atomic class rule, each group of rules that can be merged is determined.

[0083] It's important to note that the computer device first acquires the feature vector of each initial atomic class rule and calculates the similarity between rules based on these feature vectors. When the similarity exceeds a preset threshold, the Hamming distance between these initial atomic class rules is further calculated to measure even minor differences in rule names. The Hamming distance is the number of different characters at corresponding positions in two strings of equal length. This metric helps determine the naming similarity between rules, but it doesn't directly determine whether to merge them; rather, it serves as a reference for semantic analysis. Through this method, the computer device can identify rules with similar names but potentially different attributes, thus providing a reliable reference for subsequent merging decisions.

[0084] After calculating the Hamming distance, the computer device combines the logical property information corresponding to each initial atomic class rule to determine whether the rules belong to the same logical group. Logical properties are attributes defined according to the document writing direction and layout direction, such as `margin-block` or `padding-inline`, which can be automatically mapped to specific physical directions. By comparing the logical properties of the rules, the computer device can distinguish between semantically identical or similar rules and semantically independent rules. For example, rules `mx-4` and `my-4` differ by only a single character in their class names and have a Hamming distance of 1, but their corresponding CSS properties both belong to the `margin` logical group. Therefore, merging them into `m-4` will not affect the independence of the styles. However, rules `.gap-x-4` and `.gap-y-4` also have a Hamming distance of 1, but their corresponding CSS properties are `column-gap` and `row-gap`, respectively, belonging to different logical property groups. Merging them might lead to style overriding and layout errors, so the computer device will prohibit merging them during the judgment process.

[0085] In the actual execution process, the computer device first stores the initial atomic class rules in a memory data structure. It then performs a character-level comparison of the name of each rule to calculate the Hamming distance, and classifies the rules according to their corresponding logical attributes. For rules with a Hamming distance of 0, the computer device directly allows merging. For rules with a Hamming distance of 1, the computer device combines logical attributes to determine if there is a semantic conflict. If the rules belong to the same logical group and are functionally compatible, merging is allowed; otherwise, they are marked as semantically conflicting and merging is prohibited. For rules with a Hamming distance greater than or equal to 2, even if there is a numerical difference, the computer device can determine the functional consistency of the rules based on logical attributes and decide to aggregate them into the same mergeable rule group. This approach ensures the efficiency of rule merging and avoids style overriding errors caused by merging, thereby improving the accuracy and reliability of CSS atomic class rule management.

[0086] In one example, such as Figure 2 As shown, the cosine similarity is first checked to see if it is greater than 0.95. If it is, the Hamming distance is further checked. If the Hamming distance is 0, merging is allowed. If the Hamming distance is 1, merging is prohibited and marked as semantic conflict. If the Hamming distance is greater than or equal to 2, merging is allowed but only the numerical value changes.

[0087] In this embodiment, after detecting that the similarity between initial atomic class rules exceeds a preset threshold, the computer device performs a Hamming distance calculation. This is because Hamming distance quantifies the degree of difference in rule names at the character level, providing a precise reference for subsequent merging decisions. Subsequently, the device performs a judgment operation based on the logical attributes corresponding to each rule to prevent rules with semantically inconsistent results due to character differences from being incorrectly grouped into the same group. Through this combination, the computer device can more accurately distinguish which rules can be safely merged semantically and functionally, and which rules may conflict and need to be isolated. This significantly improves the correctness of rule grouping, ensuring efficient merging while avoiding style overriding or errors caused by semantic conflicts, thus improving the accuracy of CSS atomic class rule management and the consistency of page rendering.

[0088] In one embodiment, the step of aggregating attributes of the initial atomic class rules in each mergeable rule group to obtain the corresponding target atomic class rules includes:

[0089] The attributes of the initial atomic class rules in each mergeable rule group are aggregated and a new class name is generated to obtain the target atomic class rule for each mergeable rule group.

[0090] Specifically, the computer device first scans and analyzes the attributes of the initial atomic class rules in each mergeable rule group. By identifying the logical attributes of the rules and their corresponding physical attributes, multiple physical attributes along the same logical axis are merged to form a unified logical attribute representation. For example, for rules involving margins, margin-top and margin-bottom can be merged into the logical attribute margin-y, achieving a unified representation of axial attributes. At the same time, the computer device will reconstruct the related attributes using simplified attributes, merging border-width, border-style, and border-color into a single border attribute, thereby reducing redundant attributes and improving the compactness and maintainability of the rules.

[0091] Subsequently, the computer device generates new class names based on the aggregated attributes to ensure that the generated target atomic class rules accurately express the merged semantics. The generation of new class names relies on the semantic information of the original class names, combined with attribute values ​​and logical axes. For example, aggregating margin-top and margin-bottom generates a new class name in the form of my-\[numerical value], clearly indicating its role in the y-axis direction. Through this dynamic naming method, the device can maintain semantic consistency between class names and their corresponding styles, facilitating rapid lookup and referencing at runtime.

[0092] In this embodiment, the computer device performs attribute aggregation to merge multiple physical attributes with the same logical axis or similar functions into a unified logical attribute. This reduces redundant rules and improves the compactness and maintainability of CSS files. Simultaneously, by generating new class names based on the aggregation results, consistency between class names and style semantics is maintained, facilitating accurate referencing and rapid lookup at runtime. This operation enables the originally scattered initial atomic class rules to be represented in a structured and unified manner, reducing the risk of style conflicts and improving page rendering efficiency, thereby optimizing CSS management and improving performance.

[0093] In one embodiment, the method further includes:

[0094] When a style priority conflict is detected between target atomic class rules, a style priority comparison operation is performed.

[0095] In this embodiment, the computer device first detects whether there are style priority conflicts between target atomic class rules. When a conflict is detected, the computer device performs a style priority comparison operation to determine which rules should take effect during the actual rendering process. This comparison operation can be performed by representing the selector weights or cascading orders recorded in the target atomic class rules as integers and then performing a one-time simple integer comparison logic, thereby quickly determining the priority relationship of conflicting rules.

[0096] Computer devices perform style priority comparison operations to ensure that the merged target atomic class rules maintain the correct cascading effect during page rendering, avoiding style overriding errors or display anomalies. By detecting conflicts before performing comparison operations, unnecessary calculations can be reduced, ensuring the system efficiently handles style conflict issues, improving the accuracy of CSS management and page rendering performance.

[0097] In practice, when a target atomic class rule is referenced on a page, the computer determines the final applied style based on the comparison results, thus ensuring that the user interface presents the expected effect. This method not only avoids style chaos caused by rule merging, but also maintains style predictability and consistency when multiple target atomic class rules exist simultaneously, thereby achieving CSS optimization management and efficient execution.

[0098] In one embodiment, the method further includes:

[0099] When it is detected that the rendering environment of the CSS file does not support the target atomic class rule, the target atomic class rule is broken down into the corresponding initial atomic class rule.

[0100] In this embodiment, the computer device first detects the rendering environment of the CSS file during runtime to determine whether the current environment supports the target atomic class rules. This detection can be performed by querying the browser capability matrix or runtime style testing to determine whether the CSS logical properties or advanced features involved in the target atomic class rules are available. When it is found that the rendering environment does not support certain target atomic class rules, the computer device will break these target atomic class rules down into their corresponding initial atomic class rules to ensure that the page styles can be correctly rendered in the current environment.

[0101] During execution, the computer uses a class name rewriter in the runtime adaptation layer to scan class name strings in HTML or JSX templates and establishes a mapping table between atomic classes and merged classes for runtime lookup. If the target atomic class rule is confirmed to be unavailable, the computer quickly locates the corresponding initial atomic class rule based on the mapping table and breaks down the merged logical properties into traditional physical properties. For example, in environments that do not support the CSS logical property `margin-block`, the merged class `.my-4` will be broken down into two initial atomic class rules: `margin-top: 1rem` and `margin-bottom: 1rem`, thus ensuring that styles remain available in older browsers or specific rendering environments.

[0102] Based on this, runtime compatibility of CSS rules is guaranteed, ensuring that the page maintains the expected style effect in different browsers or different rendering environments. At the same time, the dynamic decomposition strategy avoids over-reliance on advanced CSS features when merging rules, improving the robustness of the system and the usability of the user interface. Thus, while ensuring the correctness of page rendering, it maintains the flexibility and efficiency of CSS management.

[0103] The CSS atomic class rule merging apparatus provided in the embodiments of this application is described below. The CSS atomic class rule merging apparatus described below can be referred to in correspondence with the CSS atomic class rule merging method described above. Figure 3 As shown, this application provides a CSS atomic class rule merging device, the device comprising:

[0104] The initial atomic class rule extraction module 201 is used to extract non-repeating initial atomic class rules from multiple CSS files and generate a rule feature vector for each initial atomic class rule.

[0105] The mergeable rule group generation module 202 is used to calculate the similarity between each initial atomic class rule based on the rule feature vector of each initial atomic class rule, and generate mergeable rule groups in each initial atomic class rule based on the similarity and semantic analysis.

[0106] The target atomic class rule determination module 203 is used to perform attribute aggregation on the initial atomic class rules in each mergeable rule group to obtain the corresponding target atomic class rules, and to establish a mapping relationship between the style priority of each target atomic class rule and the corresponding initial atomic class rule.

[0107] The atomic class reference optimization module 204 is used to optimize the atomic class references of each CSS file according to the rules of each target atomic class.

[0108] In one embodiment, the initial atomic class rule extraction module 201 includes:

[0109] The CSS file scanning unit is used to scan each CSS file and generate an abstract syntax tree for each CSS file;

[0110] The initial atomic class rule extraction unit is used to filter nodes that conform to the atomicity feature in each abstract syntax tree to obtain the initial atomic class rules;

[0111] The initial atomic class rule deduplication unit is used to calculate the hash value of the attribute-value pair of each initial atomic class rule, and to identify and cluster duplicate initial atomic class rules based on the hash value of each initial atomic class rule.

[0112] In one embodiment, the initial atomic class rule extraction module 201 includes:

[0113] The atomic class rule parameter extraction unit is used to extract the attributes, values, units, and selector weights of each initial atomic class rule;

[0114] The rule feature vector generation unit is used to convert the attributes, values, units, and selector weights of each initial atomic class rule into a numerical vector according to a preset encoding rule, so as to obtain the rule feature vector of each initial atomic class rule.

[0115] In one embodiment, the mergeable rule group generation module 202 includes:

[0116] The Hamming distance calculation unit is used to calculate the Hamming distance between initial atomic class rules with a similarity greater than a preset threshold;

[0117] The mergeable rule group generation unit is used to determine each mergeable rule group based on the Hamming distance and the logical attributes of each initial atomic class rule.

[0118] In one embodiment, the target atom class rule determination module 203 includes:

[0119] The target atomic class rule determination unit is used to aggregate the attributes of the initial atomic class rules in each mergeable rule group and generate new class names to obtain the target atomic class rules of each mergeable rule group.

[0120] In one embodiment, the apparatus further includes:

[0121] The style priority comparison module is used to perform style priority comparison operations when style priority conflicts are detected between target atomic class rules.

[0122] In one embodiment, the apparatus further includes:

[0123] The target atomic class rule decomposition module is used to decompose the target atomic class rule into the corresponding initial atomic class rule when the rendering environment of the CSS file is detected to not support the target atomic class rule.

[0124] In one embodiment, this application also provides a storage medium storing computer-readable instructions that, when executed by one or more processors, cause the one or more processors to perform the steps of the CSS atomic class rule merging method as described in any of the above embodiments.

[0125] In one embodiment, this application also provides a computer device storing computer-readable instructions that, when executed by one or more processors, cause the one or more processors to perform the steps of the CSS atomic class rule merging method as described in any of the above embodiments.

[0126] Indicatively, such as Figure 4 As shown, Figure 4 This is a schematic diagram of the internal structure of a computer device 300 provided in an embodiment of this application. The computer device 300 can be provided as a server. (Refer to...) Figure 4The computer device 300 includes a processing component 302, which further includes one or more processors, and memory resources represented by memory 301 for storing instructions, such as applications, that can be executed by the processing component 302. The applications stored in memory 301 may include one or more modules, each corresponding to a set of instructions. Furthermore, the processing component 302 is configured to execute instructions to perform the CSS atomic class rule merging method of any of the above embodiments.

[0127] The computer device 300 may also include a power supply component 303 configured to perform power management of the computer device 300, a wired or wireless network interface 304 configured to connect the computer device 300 to a network, and an input / output (I / O) interface 305. The computer device 300 may operate on an operating system stored in memory 301, such as Windows Server™, MacOSX™, Unix™, Linux™, FreeBSD™, or similar.

[0128] Those skilled in the art will understand that Figure 4 The structure shown is merely a block diagram of a portion of the structure related to the present application and does not constitute a limitation on the computer device to which the present application is applied. Specific computer devices may include more or fewer components than those shown in the figure, or combine certain components, or have different component arrangements.

[0129] Finally, it should be noted that in this document, relational terms such as "first" and "second" are used only to distinguish one entity or operation from another, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Furthermore, the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, article, or apparatus. Unless otherwise specified, an element defined by the phrase "comprising one..." does not exclude the presence of other identical elements in the process, method, article, or apparatus that includes said element. In this document, "a," "an," "the," "the," and "its" may also include plural forms unless the context clearly indicates otherwise. "Multiple" refers to at least two, such as 2, 3, 5, or 8, etc. "And / or" includes any and all combinations of the related listed items.

[0130] The various embodiments in this specification are described in a progressive manner. Each embodiment focuses on the differences from other embodiments. The various embodiments can be combined as needed, and the same or similar parts can be referred to each other.

[0131] The above description of the disclosed embodiments enables those skilled in the art to make or use this application. Various modifications to these embodiments will be readily apparent to those skilled in the art, and the general principles defined herein may be implemented in other embodiments without departing from the spirit or scope of this application. Therefore, this application is not to be limited to the embodiments shown herein, but is to be accorded the widest scope consistent with the principles and novel features disclosed herein.

Claims

1. A method for merging CSS atomic class rules, characterized in that, The method includes: Scan each CSS file to generate an abstract syntax tree for each CSS file. In each abstract syntax tree, select nodes that conform to the atomicity feature to obtain initial atomic class rules. Calculate the hash value of the attribute-value pairs of each initial atomic class rule. Based on the hash value of each initial atomic class rule, identify and cluster duplicate initial atomic class rules. Extract the attributes, values, units, and selector weights of each initial atomic class rule, and convert them into a numerical vector according to a preset encoding rule to obtain the rule feature vector of each initial atomic class rule. Based on the rule feature vector of each initial atomic class rule, the similarity between each initial atomic class rule is calculated, and the Hamming distance between initial atomic class rules with similarity greater than a preset threshold is calculated. Based on each Hamming distance and the logical attribute of each initial atomic class rule, each mergeable rule group is determined. Attribute aggregation is performed on the initial atomic class rules in each of the mergeable rule groups to obtain the corresponding target atomic class rules, and a mapping relationship is established between the style priority of each target atomic class rule and the corresponding initial atomic class rule. Optimize the atomic class references of each of the CSS files according to the respective target atomic class rules.

2. The CSS atomic class rule merging method according to claim 1, characterized in that, The step of aggregating attributes of the initial atomic class rules in each of the mergeable rule groups to obtain the corresponding target atomic class rules includes: The attributes of the initial atomic class rules in each mergeable rule group are aggregated and a new class name is generated to obtain the target atomic class rule for each mergeable rule group.

3. The CSS atomic class rule merging method according to claim 1 or 2, characterized in that, The method further includes: When a style priority conflict is detected between the target atomic class rules, a style priority comparison operation is performed.

4. The CSS atomic class rule merging method according to claim 1 or 2, characterized in that, The method further includes: When it is detected that the rendering environment of the CSS file does not support the target atomic class rule, the target atomic class rule is decomposed into the corresponding initial atomic class rule.

5. A CSS atomic class rule merging device, characterized in that, The device includes: The initial atomic class rule extraction module is used to scan each CSS file, generate an abstract syntax tree for each CSS file, filter nodes that conform to atomicity characteristics in each abstract syntax tree to obtain initial atomic class rules, calculate the hash value of the attribute-value pairs of each initial atomic class rule, and identify and cluster duplicate initial atomic class rules based on the hash value of each initial atomic class rule; extract the attributes, values, units, and selector weights of each initial atomic class rule, and convert the attributes, values, units, and selector weights of each initial atomic class rule into a numerical vector according to a preset encoding rule to obtain the rule feature vector of each initial atomic class rule; The mergeable rule group generation module is used to calculate the similarity between each initial atomic class rule based on the rule feature vector of each initial atomic class rule, and calculate the Hamming distance between initial atomic class rules with similarity greater than a preset threshold, and determine each mergeable rule group based on each Hamming distance and the logical attribute of each initial atomic class rule; The target atomic class rule determination module is used to perform attribute aggregation on the initial atomic class rules in each mergeable rule group to obtain the corresponding target atomic class rules, and to establish a mapping relationship between the style priority of each target atomic class rule and the corresponding initial atomic class rule; The atomic class reference optimization module is used to optimize the atomic class references of each of the CSS files according to the respective target atomic class rules.

6. A storage medium, characterized in that: The storage medium stores computer-readable instructions that, when executed by one or more processors, cause the one or more processors to perform the steps of the CSS atomic class rule merging method as described in any one of claims 1 to 4.

7. A computer device, characterized in that, include: One or more processors, and memory; The memory stores computer-readable instructions that, when executed by the one or more processors, perform the steps of the CSS atomic class rule merging method as described in any one of claims 1 to 4.

Images