CSS style conflict detection method and device, equipment and storage medium

Abstract

The invention provides a CSS style conflict detection method and device, equipment and a storage medium, and relates to the technical field of front-end development. The method comprises the following steps: acquiring a CSS file; analyzing the CSS file to generate a syntax tree; calculating the priority of each selector node; if the elements of any two selector nodes are intersected, judging that the selector nodes are intersected selector nodes; if the attribute values of the same attributes of the two intersected selector nodes are different, the selector nodes are judged to be the selector nodes with conflicting attributes; and in the selector nodes with the conflicted attributes, if the priority of the later node is lower than that of the previous node, judging that the conflicted CSS style exists. According to the method, the unexpected coverage conflict pattern is positioned based on the syntax tree, manual intervention is not needed, and the CSS pattern conflict detection efficiency is improved.

Description

Technical Field

[0001] This invention relates to the field of front-end development technology, and in particular to a method, apparatus, device, and storage medium for detecting CSS style conflicts. Background Technology

[0002] In front-end development, CSS (Cascading Style Sheets) is the technology that shapes the user's visual experience. HTML (Hypertext Markup Language) builds the page structure, while CSS defines the page's visual presentation, such as layout, color, and font. CSS selectors select elements in HTML and apply styles. Due to the cascading nature of CSS, multiple style rules can apply to the same element, easily leading to CSS style conflicts.

[0003] Current technology typically relies on manual review to troubleshoot CSS style conflicts. For example, manually checking for visual anomalies after rendering and then tracing back to the relevant code to identify the anomalies. This method is dependent on developer experience and is inefficient. For instance, large projects may have thousands or even tens of thousands of lines of CSS; manually checking each element and tracing the source is time-consuming and prone to missing conflicts. Summary of the Invention

[0004] This invention provides a CSS style conflict detection method, apparatus, device, and storage medium to solve the problem of low efficiency in existing CSS style conflict detection methods.

[0005] In a first aspect, embodiments of the present invention provide a CSS style conflict detection method, comprising: obtaining a CSS file; the CSS file including multiple selectors; parsing the CSS file to generate a syntax tree; the syntax tree including multiple selector nodes; calculating the priority of each selector node one by one based on the syntax tree; if the elements of any two selector nodes have an intersection, they are determined to be intersecting selector nodes; if the attribute values ​​of the same property of two intersecting selector nodes are different, they are determined to be selector nodes with conflicting attributes; among the selector nodes with conflicting attributes, if the priority of the later node is lower than the priority of the earlier node, a conflicting CSS style is determined to exist.

[0006] In one possible implementation, calculating the priority of each selector node based on the syntax tree includes: for each selector node, obtaining the syntax structure information of the selector node in the syntax tree; matching the preset selector type and counting the occurrence count of each selector type in the syntax structure information of the selector node; and determining the priority of the selector node based on the occurrence count of each selector type and the priority relationship of each selector type in the CSS priority rules.

[0007] In one possible implementation, determining that two selector nodes are intersecting if their elements intersect includes: obtaining the syntax structure information of any two selector nodes in the syntax tree; for either of the two selector nodes, extracting all elements selected by that selector node in the document object model based on its syntax structure information to obtain the element list of that selector node; and determining that the two selector nodes are intersecting if their element lists contain the same element.

[0008] In one possible implementation, before extracting all elements selected by the selector in the document object model, the method further includes: obtaining a markup language file associated with the CSS file; performing syntax parsing on the markup language file to generate a corresponding document object model.

[0009] In one possible implementation, the step of determining a selector node as having an attribute conflict if the attribute values ​​of the same attribute of two intersecting selector nodes are different includes: for any one of the two intersecting selector nodes, traversing the syntax structure information of the selector node to extract the attribute list of the selector node and the attribute value corresponding to each attribute; comparing the attribute lists of the two intersecting selector nodes to determine one or more identical attributes; and if the attribute values ​​of any of the identical attributes are different, then the selector node is determined to have an attribute conflict.

[0010] In one possible implementation, after determining the selector node to have a conflicting attribute, the following is also included: if the priority of the later node is not lower than that of the earlier node, and the scope of the later node is greater than that of the earlier node, then the conflicting CSS style is determined to exist.

[0011] In one possible implementation, before determining the conflicting CSS styles, the method further includes: if the type of the later node is a global selector or an unscoped class, and the type of the earlier node is a component, then the scope of the later node is greater than the scope of the earlier node.

[0012] Secondly, embodiments of the present invention provide a CSS style conflict detection device, comprising: The acquisition module is used to acquire a CSS file; the CSS file includes multiple selectors. The parsing module is used to parse the CSS file and generate a syntax tree; the syntax tree includes multiple selector nodes; The priority calculation module is used to calculate the priority of each selector node one by one based on the syntax tree; The intersection determination module is used to determine that any two selector nodes are intersecting if their elements have an intersection. The attribute conflict determination module is used to determine that two intersecting selector nodes are attribute conflicting if the attribute values ​​of the same attribute are different. The style conflict determination module is used to determine if there is a conflicting CSS style in the selector node of the conflicting attribute if the priority of the later node is lower than the priority of the earlier node.

[0013] Thirdly, embodiments of the present invention provide an electronic device, including a memory and a processor, wherein the memory stores a computer program, and the processor executes the computer program to implement the method described in the first aspect or any possible implementation thereof.

[0014] Fourthly, embodiments of the present invention provide a computer-readable storage medium storing a computer program that, when executed by a processor, implements the method described in the first aspect or any possible implementation thereof.

[0015] Fifthly, embodiments of the present invention provide a computer program product, including a computer program that, when executed by a processor, implements the method described in the first aspect or any possible implementation thereof.

[0016] This invention generates a syntax tree by parsing CSS files, transforming textual CSS rules into structured selector nodes. Based on the syntax tree, it implements selector priority calculation, element intersection judgment, and attribute conflict identification. Furthermore, by comparing priority with cascading order, it identifies unexpected overlay conflicts and detects conflicting CSS styles. This invention locates unexpected overlay conflicting styles based on the syntax tree, requiring no manual intervention and improving the efficiency of CSS style conflict detection. Attached Figure Description

[0017] Figure 1 This is an application scenario diagram of the CSS style conflict detection method provided in the embodiments of the present invention; Figure 2 This is a flowchart illustrating the implementation of the CSS style conflict detection method provided in this embodiment of the invention. Figure 3This is a schematic diagram of the CSS style conflict detection device provided in an embodiment of the present invention; Figure 4 This is a schematic diagram of an electronic device provided in an embodiment of the present invention. Detailed Implementation

[0018] The embodiments of the present invention will now be described in detail with reference to the accompanying drawings.

[0019] Figure 1 This is an application scenario diagram of the CSS style conflict detection method provided in the embodiments of the present invention. For example... Figure 1 As shown, front-end development generally includes markup language files and CSS files. Markup language files are responsible for defining the structure and content of the page; they are the page's skeleton. CSS files are responsible for defining the page's styles and layout. Markup language files are the target documents for CSS styles.

[0020] Common markup language files include HTML and XML. This embodiment of the invention uses HTML as an example only. HTML files contain a large number of elements, or HTML elements, for example, the root element (representing the main element) which contains document-related configuration information. <title> Defines the document's title. Elements also have a hierarchical relationship; for example,< / title> Contains <title>。< / title>

[0021] CSS files contain a large number of selectors. Selectors are used to specify which HTML elements a style rule applies to. Selectors choose the elements in the HTML document to which the style needs to be applied, and then a declaration block defines the visual appearance of these elements. The declaration block contains attributes and values ​​to define the style of the selected elements.

[0022] Selectors come in various types. For example, ID selectors select unique elements based on their `id` attribute value, starting with "#"; class selectors select elements based on their `class` attribute value, starting with ".", and can apply to multiple elements of different types simultaneously. Different types of selectors filter and match elements from different perspectives, which can lead to style rules from different selectors potentially applying to the same element. Furthermore, due to CSS cascading, multiple style rules may apply to the same element, easily causing CSS style conflicts. For example, if the CSS code is written incorrectly, the final rendered visual result may not match the UI design.

[0023] Existing methods allow for manual inspection of visual anomalies after rendering, and reverse analysis of the relevant code to identify these anomalies. However, this relies heavily on developer experience and is inefficient. Furthermore, manual inspection suffers from low reliability and inconsistent performance.

[0024] The embodiments of the present invention locate conflicting styles that are not expected to be covered based on the syntax tree, without the need for manual intervention, thus improving the efficiency of CSS style conflict detection.

[0025] Figure 2 This is a flowchart illustrating the implementation of the CSS style conflict detection method provided in this embodiment of the invention. (Refer to...) Figure 2 This invention provides a CSS style conflict detection method, including: Step 201: Obtain the CSS file; the CSS file includes multiple selectors.

[0026] For example, a CSS file is a file in a front-end development project that stores CSS (Cascading Style Sheets) code, usually with the .css extension.

[0027] For example, depending on the application scenario, the specific acquisition method may include various forms. For instance, a CSS file at a specified path can be read from the file system of a front-end development project.

[0028] It's important to note that there can be one or more CSS files here. In large-scale front-end development, different developers work in parallel with different tasks, potentially resulting in multiple interconnected CSS files. Whether it's one or multiple CSS files, they all belong to the same front-end development project. Multiple related CSS files can be aggregated into a single file, thereby consolidating the CSS code scattered throughout the project into analyzable input data, providing a processing object for subsequent syntax parsing and conflict detection.

[0029] It should also be noted that CSS files are designed based on markup language files within a specific front-end development task. The markup language file is the target document for the CSS design, and the elements within it are the objects to which CSS style rules are applied.

[0030] For example, a CSS file includes multiple selectors; each selector includes a declaration block. Selectors are the basic syntactic units of CSS used to locate elements in HTML to which styles need to be applied. A declaration block contains one or more style rules; for example, `color:red` means the color is set to red.

[0031] This step inputs CSS code text. The core of the next step is to structure the CSS code, extracting selector objects from the string code text to facilitate the analysis of all selector rules in the CSS file, rather than indiscriminately processing the string text content of the CSS file itself.

[0032] Step 202: Parse the CSS file to generate a syntax tree; the syntax tree includes multiple selector nodes.

[0033] In some embodiments, parsing refers to performing syntactic analysis on the text content of a CSS file using a syntax parser, breaking down the code according to CSS syntax rules, and identifying syntactic units such as selectors, properties, and values. For example, a syntax parser could be PostCSS or csstree.

[0034] In some embodiments, the syntax tree is a tree-like data structure generated after parsing, where each node represents a syntax unit in CSS code, and the hierarchical relationship between nodes reflects the nesting logic of syntax units.

[0035] For example, the syntax tree includes multiple selector nodes. A selector node is a node type in the syntax tree specifically used to represent CSS selectors, storing complete syntax information about the selector. Since a CSS file contains multiple selectors, each selector corresponds to a selector node in the syntax tree after parsing.

[0036] Furthermore, the selector node includes a declaration node. The declaration node stores at least one attribute and its value.

[0037] For example, a syntax tree can be an abstract syntax tree. An abstract syntax tree (AST) is a specific form of syntax tree that, while preserving the core syntactic structure, omits redundant details in the code, such as spaces, comments, delimiters, and other non-syntactically critical information. Furthermore, tools like PostCSS can be used to convert CSS into an AST, extracting the structure of each selector, for example, `#id .class>div`.

[0038] This step transforms unstructured CSS text into structured tree data, enabling efficient traversal, querying, and analysis of syntactic elements in the code. For example, it allows for quick location of all selectors or extraction of attribute values, solving the problem of accurately identifying syntactic logic when directly processing text content.

[0039] Step 203: Based on the syntax tree, calculate the priority of each selector node one by one; This step assigns a comparable priority value to each selector node using the structured information of the selector nodes in the syntax tree.

[0040] In some embodiments, all selector nodes in the syntax tree are traversed, and the same priority calculation rule is performed on each selector node to obtain the priority representation of each selector node.

[0041] In some embodiments, priority is determined by the number of different types in the selector. It should be noted that selectors include different types, such as the ID selector #header, the class selector .btn, and the element selector div. The following examples illustrate the specific implementation logic of the priority.

[0042] In one possible implementation, calculating the priority of each selector node one by one based on the syntax tree includes: Step 2031: For each selector node, obtain the syntax structure information of that selector node in the syntax tree; Each selector node in the syntax tree has been broken down into structured information according to CSS syntax rules. This structured information can be directly obtained by traversing the selector nodes in the syntax tree. The structured information of the selector node includes not only the selector type but also the hierarchical relationship.

[0043] Step 2032: In the syntax structure information of the selector node, match the preset selector types and count the occurrence times of each selector type; For example, there are multiple preset selector types, each with different priorities in the CSS standard. For instance, high-priority types are ID selectors, medium-priority types are class selectors, and low-priority types are element selectors.

[0044] For example, the syntax structure information of the selector nodes is traversed, and matches are performed and counted according to the preset selector type. It should be noted that selectors are not limited to a single type, but also include combinations of multiple types. The number of times each type appears may differ in different combination selectors. Therefore, this embodiment of the invention determines priority by the number of different types in the selector.

[0045] Step 2033: Based on the number of occurrences of each selector type and the priority relationship of each selector type in the CSS priority rules, determine the priority of the selector node.

[0046] For example, the priority relationship of each selector type in the CSS priority rules determines the weight of each type of selector. For instance, the higher the priority, the greater the weight. Furthermore, based on the combination of occurrence frequency and weight, the frequency statistics are transformed into a comparable priority representation.

[0047] For example, priority can be represented numerically or as an array.

[0048] The following examples illustrate the specific implementation logic of priority using concrete code. The following examples use regular expressions to match selector nodes of different types.

[0049] / / Core algorithm for calculating CSS selector priority function calculateSpecificity(selector) { const [id, class, element] = [0, 0, 0]; / / Regular expression matches selectors of different types selector.replace( / #([\w-]+) / g, () =>id++); selector.replace( / \.([\w-]+) / g, () =>class++); selector.replace( / \s*([\w-]+) / g, () =>element++); return { value: id * 100 + class * 10 + element, / / Numerical representation array: [id, class, element] / / Standard array representation }; } The above steps illustrate how priority is calculated. It should be noted that the priority calculation step does not necessarily precede steps 204 and 205, but only precedes step 206. Step 204 explains the determination of element intersection.

[0050] Step 204: If the elements of any two selector nodes have an intersection, then they are determined to be intersecting selector nodes. In some embodiments, all selector nodes in the syntax tree are traversed in pairs. For example, for the three selectors A, B, and C, A is combined with B, A with C, and B with C. This ensures that no potentially related selector pairs are missed.

[0051] In some embodiments, the existence of overlapping elements indicates that two selectors may match the same element or the same group of elements, meaning that the matching ranges overlap. Selector nodes determined to intersect act on the same element, which may result in style conflicts.

[0052] This step filters out selector pairs that may act on the same element by determining whether there is an overlap in the element matching range of two selectors, thus narrowing down the conflict detection target from all selector pairs to potentially related selector pairs.

[0053] In one possible implementation, the selector nodes that are determined to be intersecting if the elements of any two selector nodes have an intersection include: Step 2041: In the syntax tree, obtain the syntax structure information of any two selector nodes; For example, the syntax tree stores the complete syntax structure of each selector node. By traversing the syntax tree, the syntax structure information of any two selector nodes can be obtained. It should be noted that repeating steps 2041-2043 can traverse all selector node pairs. The implementation logic is the same each time. Here, we only take a pair of selector nodes in a certain loop as an example.

[0054] Step 2042: For either of the two selector nodes, based on the syntax structure information of the selector node, extract all the elements selected by the selector node in the document object model to obtain the element list of the selector node. For example, the Document Object Model (DOM) is the DOM of a markup language file. Here, the markup language file is the target document corresponding to the CSS file. The DOM, also a tree structure, contains all elements in the markup language file and the hierarchical relationships between them.

[0055] For example, based on the selector's syntax structure information, matching logic is executed in the Document Object Model (DOM), traversing the DOM to find all elements that match the selector's rules. Furthermore, the matched elements are compiled into an element list. Specifically, two selectors generate corresponding element lists, such as the element list for selector A and the element list for selector B.

[0056] Step 2043: If the element lists of two selector nodes contain the same element, they are determined to be intersecting selector nodes.

[0057] For example, compare the element lists of selector A and selector B to check if there are any common elements, that is, if the same element appears in both lists. For example, if the element list of selector A contains elements X and Y, and the element list of selector B contains elements Y and Z, the two selectors are determined to intersect because there is a common element Y; if the element list of selector A is [X,Y] and the element list of selector B is [Z,W], there are no common elements, and the two selectors are determined to not intersect.

[0058] For example, different selectors may match the same element; for instance, .container.btn and .sidebar.btn may match the same button element.

[0059] The following examples illustrate the specific implementation logic of element intersection using concrete code.

[0060] / / Determine if two selectors can match the same element function mayMatchSameElement(selector1, selector2) { / / For example, '.container .btn' → ['btn'] const elements1 = extractTargetElements(selector1); const elements2 = extractTargetElements(selector2); return elements1.some(el =>elements2.includes(el)); } It should be noted that, regarding the Document Object Model (DOM), a real DOM can be generated based on a markup language file. The following embodiments illustrate this in detail. In one possible implementation, before extracting all elements selected by the selector from the DOM, the method further includes: obtaining the markup language file associated with the CSS file; performing syntax parsing on the markup language file to generate the corresponding DOM.

[0061] It should be further noted that, regarding the Document Object Model (DOM), step 2042 may also be independent of the actual DOM model. Without relying on the actual markup language file, a potential DOM model is simulated and constructed based on the selector's syntax rules. This involves analyzing the structural features of the selector to infer the abstract features of the DOM elements it might match, rather than the actual elements themselves. This achieves the goal of determining whether a selector might act on the same element without relying on the actual file.

[0062] The above steps have identified two intersecting selector nodes. The following steps build upon this foundation by further comparing attributes and attribute values.

[0063] Step 205: If the attribute values ​​of the same attribute of two intersecting selector nodes are different, they are determined to be selector nodes with conflicting attributes. It should be noted that this step processes the selector pairs that were determined to intersect in step 204. If the selectors do not intersect, there is no need to proceed to this step, because even if the attribute values ​​are different, they will not affect each other.

[0064] For example, an attribute refers to a CSS style property. A CSS style property is a key in a key-value pair that describes the specific style characteristics of an element, defining which visual or layout property of the element is to be modified. Examples include color, size, or font. The attribute value is the value corresponding to a specific attribute; for example, the value of the color attribute could be red.

[0065] In some embodiments, if the values ​​of the same attribute are completely identical, such as both being red, there is no possibility of conflict and no further determination is required.

[0066] In some embodiments, selector pairs that intersect and have different values ​​for the same attribute are marked as conflicting selector nodes. When conflicting selector nodes act on the same element, it can lead to a conflict in which value should be applied to the same style attribute of that element.

[0067] The following describes the specific implementation steps for determining selector nodes with conflicting attributes.

[0068] In one possible implementation, the selector nodes determined to have an attribute conflict if the attribute values ​​of the same attribute of two intersecting selector nodes are different include: Step 2051: For any one of the two intersecting selector nodes, traverse the syntax structure information of the selector node and extract the attribute list and attribute value of each attribute of the selector node. It's important to note that in the syntax tree, the declaration node of each selector node is the style rule section. The declaration node contains all the CSS style declarations corresponding to that selector. By traversing the declaration block of the selector node's syntax structure, all CSS properties and their corresponding values ​​are extracted, forming a property list. The property list is in key-value pair format, containing the property name and its value. For example, `{ color: 'blue', font-size: '16px'}`.

[0069] Furthermore, for each of the two intersecting selector nodes, step 2051 is executed to obtain the attribute list of each selector node, i.e., two attribute lists.

[0070] Step 2052: Compare the attribute lists of two intersecting selector nodes to determine one or more identical attributes; This step compares the two attribute lists extracted in the previous step to find entries with identical attribute names. Attribute values ​​are not considered at this stage. If the attribute lists of the two selectors have no overlap, there is no need to proceed to the next step.

[0071] Step 2053: If any of the same attributes have different attribute values, then it is determined to be a selector node with conflicting attributes.

[0072] For example, if at least one attribute has a different value, the two selector nodes are determined to be selector nodes with conflicting attributes; if all the same attributes have the same value, they are not determined to be nodes with conflicting attributes.

[0073] On the one hand, the embodiments of the present invention rely on the structured information of the syntax tree to ensure the accurate extraction of attributes and values; on the other hand, by first finding the same attributes and then comparing the attribute values ​​in a hierarchical judgment, styles that may have conflicts are filtered out, reducing the invalid calculations of full comparison.

[0074] The following examples illustrate the implementation logic of attribute conflict selector node determination using specific code.

[0075] / / Extract conflicting attribute values ​​from the AST function extractConflictingProperties(rule1, rule2) { const props1 = {}; const props2 ={}; / / Collect all attributes of the two rules rule1.walkDecls(decl =>{ props1[decl.prop] = decl.value}); rule2.walkDecls(decl =>{ props2[decl.prop] = decl.value}); / / Find items with the same attribute but different values return Object.keys(props1) .filter(prop =>props2[prop]&&props1[prop] !== props2[prop]) .map(prop =>({ prop, value1: props1[prop], value2: props2[prop]})); } It's important to note that the selector node pairs with conflicting attributes identified in step 205 do not necessarily have style conflicts. According to CSS cascading rules, higher-priority styles should override lower-priority styles, and when styles have the same priority, later-defined styles override earlier-defined styles. Both of these situations can be considered expected overriding. Expected overriding usually results in the rendered CSS visually matching the design requirements. Unexpected overriding, on the other hand, usually results in the rendered CSS visually not matching the design requirements, i.e., a style conflict exists. The following steps explain how to determine unexpected overriding.

[0076] Step 206: In the selector nodes with conflicting attributes, if the priority of the later node is lower than the priority of the earlier node, then it is determined that there is a conflicting CSS style.

[0077] For example, the W3C priority rule (ID > class > element) is used to determine whether the coverage meets expectations, such as: .btn { color: red;} / * Low priority * / .container .btn { color: blue;} / * High priority, expected to cover * / This step identifies unexpected overlays that violate CSS cascading rules by comparing their priority and definition order. The objects of this step are the selector nodes with conflicting properties identified in the previous step.

[0078] It's important to note that "first" and "last" refer to the order in which the two selectors are defined in the CSS file, also known as the loading order or execution order. For two selector nodes, the one that appears first in the CSS file is the "first" node, and the one that appears later is the "last" node.

[0079] The priority of a node is determined based on the priority value calculated in step 203. For example, it determines whether the priority of a later node is lower than that of an earlier node. According to CSS cascading rules, a later, higher-priority node covers an earlier, lower-priority node, or, if priorities are the same, a later node covers an earlier node. If the priority of a later node is lower than that of an earlier node, the lower-priority later node has no practical effect, which does not conform to the design logic. That is, the developer should expect the higher-priority later node to take effect, but due to coding errors, the priority of the later node may be set too low, ultimately resulting in styles that do not match expectations.

[0080] This invention generates an abstract syntax tree (AST) by parsing CSS files, transforming text-based CSS rules into structured selector nodes. Based on the AST, selector priority calculation, element intersection determination, and attribute conflict identification are implemented. Furthermore, by comparing priority and cascading order, unexpected overriding conflicts are identified, and conflicting CSS styles are detected. This invention locates conflicting styles with unexpected overriding based on the AST, eliminating the need for manual intervention and improving the efficiency of CSS style conflict detection.

[0081] In one possible implementation, if the priority of a later selector node in the attribute conflict is not lower than that of an earlier node, a warning message is generated. This warning message is used to remind developers to further check for any CSS style conflicts.

[0082] It's important to note that even when conforming to CSS specifications, unexpected implicit conflicts can still occur. For example, inconsistent style overriding can lead to high-priority selectors unintentionally overriding expected styles, such as `.container.btn` overriding the base styles of `.btn`. Another example is a misspelled element name in a later node, accidentally overriding the styles of an earlier element with the same name; this is known as a namespace conflict, where different modules use the same class name, such as two components having the `.title` class. Yet another example is reversed order of nodes with the same priority, causing style reversal and unexpected behavior. Therefore, presenting potentially risky overriding scenarios that conform to the specifications to developers allows for further manual assessment to determine if any unexpected conflicts exist within the specifications. This approach, combining automated detection with developer intent, enables more comprehensive conflict detection.

[0083] The following examples illustrate how to identify conflicting CSS styles by combining the scope of a node.

[0084] In one possible implementation, after determining the selector node to have a conflicting attribute, the following is also included: if the priority of the later node is not lower than that of the earlier node, and the scope of the later node is greater than that of the earlier node, then the conflicting CSS style is determined to exist.

[0085] This embodiment determines whether attribute conflicts are unexpected overlays by considering priority and scope, with a particular focus on abnormal scenarios where a large-scale selector overlays a small-scale selector.

[0086] It's important to note that the scope of a selector refers to the number or breadth of elements it can match. A narrow-scope selector matches more specific and fewer elements; a wide-scope selector matches a broader and more numerous set of elements. The higher the specificity of a selector, such as including IDs or multi-level constraints, the smaller its scope; conversely, the more general the selector, such as class-only selectors or element selectors, the wider its scope.

[0087] In normal design logic, more specific, smaller-scale selectors are used to refine styles for specific scenarios based on general styles. Following the hierarchical principle of style design, large-scale global styles are typically defined first, and then smaller-scale selectors are used to adjust styles for specific scenarios, achieving fine-grained control from general to specific. If the large-scale selector is defined later and has a priority no lower than the smaller-scale selector, the general styles will override the refined styles for the specific scenario. This is usually caused by developers miswriting the selector scope or incorrectly increasing its priority.

[0088] This embodiment, through dual judgment of priority and scope, can more accurately identify implicit conflicts that conform to priority rules but violate design intent. It focuses on abnormal scenarios where a large scope covers a small scope; in such cases, even if the priority meets the rules, it is highly likely that the unexpected coverage is caused by developer error.

[0089] In one possible implementation, before determining the conflicting CSS styles, the method further includes: if the type of the later node is a global selector or an unscoped class, and the type of the earlier node is a component, then the scope of the later node is greater than the scope of the earlier node.

[0090] It's important to note that a global selector is one whose scope covers the entire project, matching all elements on the page that meet the criteria, regardless of which component the element belongs to. Examples include element selectors, wildcards (*), and global class selectors. An unscoped class selector refers to a class selector whose scope is limited by component isolation mechanisms, matching elements in multiple components. A component selector is one that operates only within a specific component.

[0091] When the later node is a global selector or an unscoped class, and the earlier node is a component selector, their scopes are inclusive; the global scope includes the component scope, meaning the scope of the later node is greater than that of the earlier node. For example, global style pollution—global CSS rules such as `body{font-size:16px}`—unexpectedly affects the internal styles of a component, causing the pop-up text to be too large.

[0092] The following examples provide corresponding repair suggestions for different conflict types.

[0093] ① Conflict type: Priority conflict; Problem description: Low-weight selectors (such as classes) are overridden by high-weight selectors (such as IDs); Recommended fixes: 1. Add a parent class to low-weight selectors to increase their weight (e.g., .page-header .btn); 2. Use !important to force override if necessary. Notes: 1. !important may break the cascading rules and should only be used as a temporary solution; 2. Avoid mixing IDs and classes to prevent weight inflation.

[0094] ② Conflict type: Global style pollution; Problem description: Global selectors (such as body) or unscoped classes affect component styles; Recommended fixes: 1. Add a component namespace (e.g., .component-a .title) to the global rules; 2. Convert to CSS Modules to achieve scope isolation. Precautions: 1. Avoid directly modifying the global styles of third-party libraries; 2. Be cautious when using ::v-deep to penetrate scope.

[0095] ③ Conflict type: Conflict in the method of introduction; Problem description: Inline, internal, and external styles are being overridden due to their priority order; Suggested fixes: 1. Adjust the order in which styles are imported (later defined sibling styles override earlier defined styles); 2. Use inline styles to override other methods (highest priority). Notes: 1. Inline styles break style separation and are only for emergency repairs; 2. Avoid mixing multiple import methods to prevent increased complexity.

[0096] ④ Conflict type: Inheritance conflict; Problem description: Child elements inherit styles from parent elements but are overridden by styles that are directly specified; Recommended fixes: 1. Explicitly specify styles for child elements (priority is higher than inheritance); 2. Use `inherit` to force inheritance of parent element values; Notes: 1. Check if the attribute is inheritable (e.g., color is inheritable, width is not); 2. The style of the nearest ancestor element takes precedence.

[0097] ⑤ Conflict type: Third-party library overriding; Problem description: Custom styles are being overridden by high-weight rules from a third-party library; Recommended fixes: 1. Add more specific selectors (e.g., .custom-btn) to custom styles; 2. Use !important or CSS variables to override library styles. Important notes: 1. Prioritize modifying styles through the theme configuration provided by the library; 2. Avoid directly modifying the library source code, and achieve customization by extending the class name.

[0098] ⑥ Conflict type: Insufficient specificity; Problem description: The selector's weight is too low, causing styles to be unexpectedly overridden; Recommended fixes: 1. Increase selector hierarchy (e.g., .container .content); 2. Use ID selectors to increase weight (use with caution); Notes: 1. Avoid excessive nesting of selectors, which can lead to maintenance difficulties; 2. Use :where() to reduce specificity.

[0099] ⑦ Conflict type: Style penetration issue; Problem description: Scoped styles cannot affect child components or third-party components; Recommended fixes: 1. Use ::v-deep (Vue) or >>> (React) to penetrate scope; 2. Add a global class to the child component and limit its scope in the parent component; Notes: 1. Penetration will break style isolation, so the scope needs to be controlled; 2. Style configuration should be passed through component props first.

[0100] It should be understood that the sequence number of each step in the above embodiments does not imply the order of execution. The execution order of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiments of the present invention.

[0101] The following are device embodiments of the present invention. For details not described in detail, please refer to the corresponding method embodiments described above.

[0102] Figure 3 A schematic diagram of the CSS style conflict detection device provided in an embodiment of the present invention is shown. For ease of explanation, only the parts related to the embodiment of the present invention are shown, and are described in detail below: like Figure 3 As shown, a CSS style conflict detection device 3 includes: Module 31 is used to acquire a CSS file; the CSS file includes multiple selectors; Parsing module 32 is used to parse the CSS file and generate a syntax tree; the syntax tree includes multiple selector nodes; Priority calculation module 33 is used to calculate the priority of each selector node one by one based on the syntax tree; The intersection determination module 34 is used to determine that any two selector nodes are intersecting if their elements have an intersection. The attribute conflict determination module 35 is used to determine that two intersecting selector nodes are attribute conflicting if the attribute values ​​of the same attribute are different. The style conflict determination module 36 is used to determine if there is a conflicting CSS style in the selector node of the conflicting attribute if the priority of the later node is lower than the priority of the earlier node.

[0103] This invention generates an abstract syntax tree (AST) by parsing CSS files, transforming text-based CSS rules into structured selector nodes. Based on the AST, selector priority calculation, element intersection determination, and attribute conflict identification are implemented. Furthermore, by comparing priority and cascading order, unexpected overriding conflicts are identified, and conflicting CSS styles are detected. This invention locates conflicting styles with unexpected overriding based on the AST, eliminating the need for manual intervention and improving the efficiency of CSS style conflict detection.

[0104] Figure 4 This is a schematic diagram of an electronic device provided in an embodiment of the present invention. For example... Figure 4 As shown, the electronic device 4 in this embodiment includes a processor 40 and a memory 41. The memory 41 stores a computer program 42. When the processor 40 executes the computer program 42, it implements the steps in the various method embodiments described above. Alternatively, when the processor 40 executes the computer program 42, it implements the functions of each module / unit in the various device embodiments described above.

[0105] For example, computer program 42 may be divided into one or more modules / units, which are stored in memory 41 and executed by processor 40 to complete the present invention. The one or more modules / units may be a series of computer program instruction segments capable of performing a specific function, which describe the execution process of computer program 42 in electronic device 4.

[0106] Electronic device 4 may include, but is not limited to, processor 40 and memory 41. Those skilled in the art will understand that... Figure 4 This is merely an example of electronic device 4 and does not constitute a limitation on electronic device 4. It may include more or fewer components than shown, or combine certain components, or different components. For example, electronic device 4 may also include input / output devices, network access devices, buses, etc.

[0107] The processor 40 can be a central processing unit (CPU), or other general-purpose processors, digital signal processors (DSPs), application-specific integrated circuits (ASICs), field-programmable gate arrays (FPGAs), or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc. The general-purpose processor can be a microprocessor or any conventional processor.

[0108] The memory 41 can be an internal storage unit of the electronic device 4, such as a hard disk or RAM. The memory 41 can also be an external storage device of the electronic device 4, such as a plug-in hard disk, Smart Media Card (SMC), Secure Digital (SD) card, or Flash Card. Furthermore, the memory 41 can include both internal and external storage units of the electronic device 4. The memory 41 is used to store the computer program 42 and other programs and data required by the electronic device 4. The memory 41 can also be used to temporarily store data that has been output or will be output.

[0109] For the sake of simplicity and clarity, only the above-described functional modules / units are used as examples. In practical applications, the functions described above can be assigned to different functional modules / units as needed. These modules / units can be implemented in hardware, software, or a combination of both.

[0110] This invention also provides a computer-readable storage medium storing a computer program. When the computer program is executed by a processor, it implements the methods described in the above-described method embodiments.

[0111] This invention also provides a computer program product, including a computer program. When the computer program is executed by a processor, it implements the methods described in the above-described method embodiments.

[0112] Computer programs include computer program code, which can be in the form of source code, object code, executable files, or certain intermediate forms. Computer-readable media can include: any entity or device capable of carrying computer program code, recording media, USB flash drives, portable hard drives, magnetic disks, optical disks, computer memory, read-only memory (ROM), random access memory (RAM), electrical carrier signals, telecommunication signals, and software distribution media, etc.

[0113] In the above embodiments, the descriptions of each embodiment have their own emphasis. Parts not detailed or described in a particular embodiment can be referred to in the relevant descriptions of other embodiments. Unless otherwise specified or in conflict with logic, the terminology and / or descriptions between different embodiments are consistent and can be referenced interchangeably. Technical features in different embodiments can be combined to form new embodiments based on their inherent logical relationships.

[0114] The above-described embodiments are only used to illustrate the technical solutions of the present invention, and are not intended to limit it. Although the present invention has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that modifications can still be made to the technical solutions described in the foregoing embodiments, or equivalent substitutions can be made to some of the technical features. Such modifications or substitutions do not cause the essence of the corresponding technical solutions to deviate from the spirit and scope of the technical solutions of the embodiments of the present invention, and should all be included within the protection scope of the present invention.

Claims

1. A method for detecting CSS style conflicts, characterized in that, include: Get the CSS file; The CSS file includes multiple selectors; The CSS file is parsed to generate a syntax tree; the syntax tree includes multiple selector nodes. Based on the syntax tree, the priority of each selector node is calculated one by one; If the elements of any two selector nodes have an intersection, then they are considered to be intersecting selector nodes; If two intersecting selector nodes have different values ​​for the same attribute, they are considered to be selector nodes with conflicting attributes. In the selector nodes with conflicting attributes, if the priority of the later node is lower than that of the earlier node, then a conflicting CSS style is determined to exist.

2. The CSS style conflict detection method according to claim 1, characterized in that, Based on the syntax tree, the priority of each selector node is calculated one by one, including: For each selector node, retrieve the syntax structure information of that selector node from the syntax tree; In the syntax structure information of this selector node, the preset selector types are matched and the occurrence count of each selector type is counted; The priority of a selector node is determined based on the frequency of occurrence of each selector type and the priority relationship between each selector type in the CSS priority rules.

3. The CSS style conflict detection method according to claim 1, characterized in that, The condition that any two selector nodes have overlapping elements, and are therefore considered intersecting selector nodes, includes: In the syntax tree, obtain the syntax structure information of any two selector nodes; For any one of the two selector nodes, based on the syntax structure information of that selector node, extract all the elements selected by that selector node in the document object model to obtain the element list of that selector node. If two selector nodes contain the same element in their element lists, they are considered to be intersecting selector nodes.

4. The CSS style conflict detection method according to claim 3, characterized in that, Before extracting all elements selected by the selector in the document object model, the process also includes: Obtain the markup language file associated with the CSS file; The markup language file is parsed to generate the corresponding document object model.

5. The CSS style conflict detection method according to claim 1, characterized in that, The selector nodes that are determined to have an attribute conflict if the attribute values ​​of the same attribute of two intersecting selector nodes are different include: For any one of the two intersecting selector nodes, traverse the syntax structure information of the selector node to extract the list of attributes of the selector node and the attribute value corresponding to each attribute. Compare the attribute lists of two intersecting selector nodes to identify one or more identical attributes; If any of the same attributes have different attribute values, then the selector node is determined to have an attribute conflict.

6. The CSS style conflict detection method according to claim 1, characterized in that, Following the selector nodes determined to have attribute conflicts, the following are also included: In selector nodes with conflicting properties, if the priority of the later node is not lower than that of the earlier node, and the scope of the later node is greater than that of the earlier node, then a conflicting CSS style is determined to exist.

7. The CSS style conflict detection method according to claim 6, characterized in that, Before determining the conflicting CSS styles, the following is also included: If the type of the later node is a global selector or an unscoped class, and the type of the earlier node is a component, then the scope of the later node is greater than the scope of the earlier node.

8. A CSS style conflict detection device, characterized in that, include: The get module is used to retrieve CSS files; The CSS file includes multiple selectors; The parsing module is used to parse the CSS file and generate a syntax tree; the syntax tree includes multiple selector nodes; The priority calculation module is used to calculate the priority of each selector node one by one based on the syntax tree; The intersection determination module is used to determine that any two selector nodes are intersecting if their elements have an intersection. The attribute conflict determination module is used to determine that two intersecting selector nodes are attribute conflicting if the attribute values ​​of the same attribute are different. The style conflict determination module is used to determine if there is a conflicting CSS style in the selector node of the conflicting attribute if the priority of the later node is lower than the priority of the earlier node.

9. An electronic device, characterized in that, It includes a memory and a processor, the memory storing a computer program, and the processor executing the computer program to implement the CSS style conflict detection method as described in any one of claims 1 to 7.

10. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores a computer program that, when executed by a processor, implements the CSS style conflict detection method as described in any one of claims 1 to 7.

Images