Style specification and implementation method based on CSS atomization
By decomposing style properties into independent atomic classes through CSS atomicization, the problems of redundant style code and poor maintainability in front-end projects are solved, enabling efficient reuse and automated optimization of styles, and improving development efficiency and performance.
Patent Information
- Application Number
- CN202511777692.5
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2025-11-28
- Publication Date
- 2026-02-27
AI Technical Summary
In existing technologies, front-end project development suffers from severe style code redundancy, poor maintainability, and low reusability. Traditional CSS preprocessors fail to achieve the smallest granularity of style property reuse, resulting in low development efficiency.
By adopting the CSS atomic style specification, style properties are decomposed into independent atomic classes, each class is responsible for a single style property. The complete style of the target element is constructed by combining atomic classes, and the style files are integrated and optimized using front-end build tools.
It reduces the amount of CSS code, improves code reusability, enables automatic synchronization of global style modifications, enhances development efficiency and webpage loading performance, and ensures consistency of style and team collaboration efficiency.
Smart Images
Figure CN121579006A_ABST
Abstract
Description
TECHNICAL FIELD
[0001] The application belongs to the technical field of front-end web development, and particularly relates to a style specification and implementation method based on CSS atomization. BACKGROUND
[0002] In current front-end project development, the organization and management of Cascading Style Sheets (CSS) is a key factor affecting development efficiency, project maintainability and team collaboration fluency. Traditionally, developers usually adopt a style writing method oriented to components or page modules, that is, a complete CSS class containing multiple style attributes is written for a specific HTML element or component. For example, a class named.btn-primary is defined for a button component, which contains multiple style attributes such as background color, text color, inner margin, border, etc.
[0003] With the expansion of project size and the increase of participants, this traditional method gradually exposes many technical defects: first, the style code is redundant, and similar styles in different components (such as the same background color and font size) need to be repeatedly defined, resulting in a bloated CSS file size. Second, the maintainability is poor, and when a global modification of a basic style (such as the main color) is needed, the developer needs to search and modify all classes using the style across multiple CSS files, which is tedious and error-prone. Third, the reusability of styles is low, and existing style rules are difficult to be flexibly decomposed and recombined, and a large amount of new style code still needs to be written when developing new components, resulting in low development efficiency. In addition, although various CSS preprocessors (such as Sass and Less) provide functions such as variables and macro mixins, they do not fundamentally change the "block" structure of style definition, and do not achieve the minimum granularity reuse of style attributes. SUMMARY
[0004] The application provides a style specification and implementation method based on CSS atomization to solve one of the above technical problems.
[0005] The technical solution adopted by the application is: The application provides a style specification and implementation method based on CSS atomization, comprising: According to a preset style attribute classification, a plurality of atomic classes are defined, each atomic class corresponding to an independent style attribute, the style attribute including at least one of color, font, margin, inner margin, layout, positioning, border and display attribute; Combining a plurality of atomic classes in the class attribute of a target element to construct the complete style of the target element; Integrating the style file defined with the atomic classes into the front-end project through a front-end build tool to realize the rendering of the style.
[0006] According to one embodiment of the present application, the defining a plurality of atomic classes according to the preset style attribute classification comprises: For color attributes, define a text color atomic class and a background color atomic class, wherein the naming format of the text color atomic class is.text-color identifier, the naming format of the background color atomic class is.bg-color identifier, and the color identifier is used to distinguish different colors.
[0007] According to one embodiment of the present application, the defining a plurality of atomic classes according to the preset style attribute classification comprises: For font attributes, define a font size atomic class, a font weight atomic class, and a font family atomic class, wherein the naming format of the font size atomic class is.font-size-size value, and the size value represents the numerical value of the font size.
[0008] According to one embodiment of the present application, the combining a plurality of the atomic classes in the class attribute of the target element comprises: In the template of an HTML document or a front-end component, a plurality of atomic class names are referenced in parallel through a class attribute or a className attribute to apply corresponding style attributes to the target element.
[0009] According to one embodiment of the present application, the method further comprises: The atomic classes are automatically generated through a PostCSS plug-in, and unused atomic classes are cleaned up during project building to optimize the size of the style file.
[0010] According to one embodiment of the present application, the integrating the style file defining the atomic classes into a front-end project through a front-end building tool comprises: The style file is introduced in an entry file of a React or Vue front-end framework, so that the atomic classes are available globally in the project.
[0011] The second aspect embodiment of the present application provides a style specification and implementation device based on CSS atomization, comprising: A defining unit is configured to define a plurality of atomic classes according to preset style attribute classifications, each atomic class corresponding to an independent style attribute, and the style attribute including at least one of color, font, margin, inner margin, layout, positioning, border, and display attribute; A combining unit is configured to combine a plurality of the atomic classes in the class attribute of a target element to construct a complete style of the target element. An integrating unit is configured to integrate a style file defining the atomic classes into a front-end project through a front-end building tool to realize rendering of the style.
[0012] The third aspect of the present application provides a computer readable storage medium, which stores a program, and the program is executed by a processor to implement the steps in the method.
[0013] The fourth aspect of the present application provides an electronic device, which comprises a memory, a processor and a program stored in the memory and executable on the processor, and the processor implements the steps in the method when executing the program.
[0014] Thanks to the above technical solutions, the present application has the following advantages: The present application decomposes the style attributes into independent "atomic classes", each of which is responsible for a single style attribute, which enables basic styles such as color and margin to be directly referenced in any component and page of a project. This fundamentally avoids the repeated definition of the same style attribute, significantly reduces the total amount of CSS code, and improves the reusability of the code.
[0015] Based on the above definition method, when a global style attribute needs to be modified (for example, adjusting the primary color from blue to new blue), only the definition of the corresponding color atomic class (such as.bg-primary) needs to be modified. This modification will automatically be mapped to all HTML elements that reference the atomic class, achieving the technical effect of "one change, global effect", and greatly reducing the maintenance cost and error risk.
[0016] By combining multiple atomic classes in the class attribute of the target element, developers do not need to write new CSS classes for each new element, but can quickly build complex styles by combining existing atomic classes. This approach gives great flexibility to style building, significantly shortens the development cycle of interface styles, and improves development efficiency.
[0017] By integrating the style file into the front-end project through the front-end construction tool, and combining the automatic generation and optimization of atomic classes, the atomic style specification can be seamlessly integrated into the modern front-end engineering system. This not only ensures the uniformity of style in team collaboration, but also automatically cleans up unused styles during the construction phase, effectively optimizing the size of the final deployed CSS file and improving the loading performance of the webpage. BRIEF DESCRIPTION OF DRAWINGS
[0018] The accompanying drawings described herein are used to provide further understanding of the present application, and form a part of the present application. The illustrative embodiments of the present application and their descriptions are used to explain the present application, and do not constitute an improper limitation of the present application. In the drawings: Figure 1 A flowchart of a style specification and implementation method based on CSS atomization provided by the embodiments of the present application is shown in the figure; Figure 2A structural schematic diagram of an electronic device provided by an embodiment of the present application.
[0019] Reference signs: 810, processor; 820, communication interface; 830, memory; 840, communication bus. DETAILED DESCRIPTION
[0020] In order to more clearly illustrate the overall concept of the present application, the following will be described in detail with reference to the accompanying drawings.
[0021] In the following description, a large number of specific details are set forth in order to facilitate a thorough understanding of the present application, but the present application can also be implemented in other ways different from those described herein, and therefore the scope of protection of the present application is not limited by the specific embodiments disclosed below. It should be noted that the embodiments of the present application and the features in each embodiment can be combined with each other without conflict.
[0022] In the present application, unless otherwise explicitly specified and limited, the first feature is "on" or "under" the second feature, which can be direct contact between the first and second features, or indirect contact between the first and second features through an intermediate medium. In the description of the present specification, the description of the terms "one embodiment", "some embodiments", "an example", "a specific example", or "some examples" means that the specific features, structures, materials or characteristics described in conjunction with the embodiment or example are included in at least one embodiment or example of the present application. In the present specification, the illustrative description of the above terms does not necessarily refer to the same embodiment or example. Moreover, the specific features, structures, materials or characteristics described can be combined in any appropriate manner in any one or more embodiments or examples.
[0023] Embodiment 1 As Figure 1 shown, a style specification and implementation method based on CSS atomization includes: According to a preset style attribute classification, a plurality of atomic classes are defined, each atomic class corresponding to an independent style attribute, the style attribute including at least one of color, font, margin, inner margin, layout, positioning, border and display attribute.
[0024] As mentioned above, this step is the basis and core of the present solution, and its purpose is to establish a systematic and standardized minimum style unit library. Specifically, the process is to induce, sort out and scientifically classify various visual presentation attributes involved in web page styles in advance, forming clear categories such as color, font, spacing, etc. On this basis, for each independent and indivisible basic style attribute under each category, a unique and single-function CSS class, i.e. "atomic class", is defined. Each such atomic class only contains and is completely focused on implementing a specific style attribute value in its style declaration, thereby ensuring the purity and minimization of its function. This design concept disassembles the complex style rules traditionally defined together into individual basic units that can be freely combined.
[0025] For example, under the "color" attribute category, an atomic class responsible for "text color" can be defined, such as an atomic class with a class name of text-brand, whose function is uniquely set to set the text color of the element to the brand blue; at the same time, another atomic class with a class name of bg-white can be defined, whose function is uniquely set to set the background color of the element to white. Under the "margin" attribute category, an atomic class with a class name of m-4 can be defined, whose function is uniquely set to set a specific size (such as 16 pixels) of outer margin for the element. When building a button with brand blue text, white background and specific outer margin, there is no need to write a new, complex CSS rule containing all these attributes, but only need to introduce the three atomic classes text-brand, bg-white and m-4 in sequence and side by side in the class attribute of the button's HTML tag. Through this side-by-side combination, like building structures with building blocks, the complete style definition of the button element is quickly realized.
[0026] It should be noted that in a specific implementation scenario, on the basis of the above scheme, more complex modern CSS attribute categories such as animation, transformation, filter, grid layout, and elastic layout can also be covered. For the definition of atomic classes under each category of attributes, a set of predefined, semantically named rules and a set of fixed scale can be used for systematic construction. For example, for the spacing scale, a multiple sequence based on 4 pixels (such as 4px, 8px, 12px…) can be preset, and a series of atomic classes with regular naming such as.m-1,.m-2,.p-3 can be generated accordingly. In addition, the set of atomic classes can be a system dynamically generated through configuration files or design tools (such as Design Tokens), so as to ensure consistency with the brand design specification and flexible adaptation to different projects or themes. This systematic definition method provides a solid, consistent, and large-scale maintainable style basis for front-end development.
[0027] Combining multiple atomic classes in the class attribute of the target element to construct the complete style of the target element.
[0028] As mentioned above, when writing the HTML structure of the webpage or the template of the front-end component, multiple pre-defined atomic class names with single function are sequentially or non-sequentially filled in the class attribute value area of any target element with spaces as the separator. The browser or rendering engine will identify all the atomic classes attached to the element and apply the CSS style rule corresponding to each atomic class to the element at the same time. These originally independent style rules produce superimposed and aggregated visual effects on the target element, thereby cooperating to combine an element style containing multiple style attributes and visually complete.
[0029] For example, assume that a visually distinctive action button needs to be constructed. Instead of creating a new and complete style class named.btn-warning in the style sheet, the developer can directly combine multiple atomic classes in the class attribute of the button element. For example, by referencing an atomic class responsible for background color (e.g..bg-yellow) to set a yellow background, an atomic class responsible for text color (e.g..text-white) to set white text, an atomic class responsible for inner margin (e.g..p-3) to provide internal space, an atomic class responsible for border (e.g..border-none) to remove the default border, and an atomic class responsible for font weight (e.g..font-bold) to bold the text. When these atomic classes are listed in the class attribute of the button element at the same time, the style instructions carried by each of them will work together to instantly construct a complete button style with a warning meaning style.
[0030] It should be noted that in specific implementation scenarios, on the basis of the above scheme, atomic classes dedicated to different screen sizes (for example,.lg-text-left represents left alignment on large screens,.md-text-center represents center alignment on medium screens) can be additionally combined to dynamically adjust the layout of the element without the need to write complex media query code blocks. Secondly, it greatly simplifies state management: the style changes of an element in different states (such as hover, focus, activation) can be realized by dynamically adding or switching atomic classes (for example, when the mouse hovers, an atomic class.bg-darken is added to the element by JavaScript to darken the background color). In addition, this way perfectly fits the component development paradigm, and the style composition of each front-end component becomes explicit and self-evident, greatly improving the readability and cooperability of the code. Finally, the combined atomic class style has certain characteristics, and its style conflict problem can be managed and predicted through the combination order and CSS characteristic mechanism, ensuring the consistency of the style performance.
[0031] Integrating the style file defining the atomic class into the front-end project through a front-end build tool to realize the rendering of the style.
[0032] As mentioned above, after the definition of atomic classes is completed, these class rules are stored in one or more specific style files. In order to correctly present these styles in the final user interface, the help of an automated build tool chain in the modern front-end development environment is needed. This process involves importing the aforementioned style files as a key dependency module of the project, and through the configuration of the build tool, it is made to preprocess, dependency analysis, packaging optimization, etc. with other resources of the project (such as JavaScript logic files, page templates, etc.). Finally, the build tool outputs one or more static resource files that have been optimized and can be correctly recognized and loaded by the browser, ensuring that the HTML elements used in the project runtime can successfully match and apply the style rules defined by the atomic classes referenced in their class attributes, completing the complete closed loop from style definition to visual presentation.
[0033] For example, in a project developed based on a modern front-end framework (such as Vue or React), the developer will import the CSS or SCSS style file containing all atomic class definitions by using an import statement in the root component or main entry JavaScript file of the project. Subsequently, when executing a build command such as npm run build, the build tool configured by the project (for example, Webpack or Vite) will start its processing flow. The tool will identify this import dependency and call its internal CSS loader to parse the style file. The parsing process may include converting the advanced SCSS syntax into standard CSS, and an optional but critical optimization step is to call a specific plugin (for example, PurgeCSS) that scans all template files in the project to find out the actual atomic class names used, and automatically removes the atomic class definitions that are not referenced from the final style file. After this optimization process, the build tool will package the purified and minimum volume CSS code together with the JavaScript code of the project into the final distribution file. When the user accesses the web page, this optimized CSS file will be loaded, ensuring that each element on the page through the combination of atomic classes in the class attribute can be accurately rendered.
[0034] It should be noted that in a specific implementation scenario, on the basis of the above scheme, the optimization processing of the construction tool is not limited to removing unused code, but can also include automatically adding browser vendor prefixes to CSS rules to ensure compatibility, and compressing CSS code to further reduce file size. Secondly, the integration scheme supports the advanced mode of on-demand introduction, that is, not all atomic classes are introduced at once, but allows the construction and loading of only the atomic subset required by the project according to the actual needs of different modules or pages, thereby optimizing the performance of the key resource path to the extreme. In addition, the definition file of the atomic class itself can be automatically generated by a script according to the specification of the design system (such as design tokens), thereby ensuring the standardization and consistency of the style base and forming a deeper automated integration with the construction process. This deep integration with the front-end engineering ecosystem is the key to the application of this scheme to large-scale, industrialized front-end development, which realizes the standardization and automation of the entire link of style development from definition, management to construction and optimization.
[0035] According to an embodiment of the present application, the defining a plurality of atomic classes according to the preset style attribute classification comprises: For color attributes, define text color atomic classes and background color atomic classes, wherein the naming format of the text color atomic classes is.text-color identifier, the naming format of the background color atomic classes is.bg-color identifier, and the color identifier is used to distinguish different colors.
[0036] As described above, in the step of defining a plurality of atomic classes according to the preset style attribute classification, for the specific classification of color attributes, the definition process is as follows: text color atomic classes and background color atomic classes are defined respectively. Among them, the naming of the text color atomic classes follows a unified format, which takes a dot followed by "text-" as a prefix, and then connects a specific color identifier, which is used to refer to a specific color value. Similarly, the naming of the background color atomic classes also follows a unified format, which takes a dot followed by "bg-" as a prefix, and then connects a specific color identifier. The color identifier described here is used to uniquely distinguish different colors, which can use either a descriptive semantic name or an encoding or abbreviation representing a specific color value. Through this structured naming method, the function of the atomic class can be directly understood and recognized from its class name, thereby establishing a logical and easy-to-use color style system.
[0037] According to an embodiment of the present application, the defining a plurality of atomic classes according to the preset style attribute classification comprises: For the font property, a font size atomic class, a font weight atomic class and a font family atomic class are defined, wherein the font size atomic class is named in the format of.font-size-size value, and the size value represents a numerical value of the font size.
[0038] As described above, in the step of defining multiple atomic classes according to the preset style property classification, for the font property, the defining process specifically includes: defining a font size atomic class, a font weight atomic class and a font family atomic class respectively.
[0039] The font size atomic class is used to specifically set the text size of an element, and its naming follows a specific format, which is composed of a prefix representing the font size property, a connector and a specific size value. The size value is an identifier representing the font size level or a specific numerical value.
[0040] The font weight atomic class is used to specifically set the stroke thickness of the text of an element, and its naming follows a similar logical structure as the font size atomic class, but the prefix is used to represent the font weight property, and the identifier connected after the prefix is used to distinguish different thickness levels.
[0041] The font family atomic class is used to specifically set the font type collection used by an element, and its naming also follows a uniform rule, wherein the prefix is used to represent the font family property, and the identifier connected after the prefix is used to specify a specific font family or a general font family name.
[0042] In the above manner, each independent font-related style property is disassembled into an atomic class with single function, and the atomic classes collectively constitute an atomic class set of the font property.
[0043] According to an embodiment of the present application, the combining of the multiple atomic classes in the class attribute of the target element includes: In the template of the HTML document or the front-end component, multiple atomic class names are referenced side by side through the class attribute or the className attribute to apply the corresponding style properties to the target element.
[0044] As described above, the step of combining multiple atomic classes in the class attribute of the target element is specifically implemented as follows: in the HTML document for constructing the webpage structure or in the component template written when developing with the component-based framework, for the target element that needs to be styled, the operation is performed on the class attribute used to specify the style rules. By filling the class names of the multiple atomic classes required to be referenced in the value area corresponding to the attribute with spaces as delimiters, the browser or the rendering engine will recognize these referenced atomic classes when parsing the element, and apply the style rules defined by each atomic class to the target element, thereby achieving the final effect of combining multiple single style attributes into the complete visual style of the element.
[0045] According to an embodiment of the present application, the method further comprises: The atomic classes are automatically generated by a PostCSS plug-in, and unused atomic classes are cleaned up during the project building process to optimize the size of the style file.
[0046] As described above, the method further comprises a step of automatic processing and optimization by a build tool. This step is specifically implemented by using a PostCSS plug-in to automatically generate and manage the atomic classes. First, the plug-in automatically generates all or part of the atomic classes according to the preset style specification or configuration source file. Subsequently, during the project building process, the plug-in scans the project source code, analyzes and identifies the atomic classes actually referenced in the HTML document, JavaScript file and component template. On this basis, the plug-in marks those atomic classes that are not used anywhere in the project as redundant code, and removes them from the final output style file. Through the continuous operation of automatic generation and selective cleaning described above, the technical purpose of optimizing the size of the style file is achieved.
[0047] According to an embodiment of the present application, the integration of the style file defining the atomic classes into the front-end project by the front-end build tool comprises: The style file is imported into the entry file of the React or Vue front-end framework, so that the atomic classes are available globally in the project.
[0048] As described above, the specific implementation of the step of integrating the style file defining the atomic classes into the front-end project using a front-end build tool includes: in a project created based on a front-end framework such as React or Vue, locating the root entry file of the application, which is the initial execution point when the application starts. In this entry file, the independent style file storing the atomic class definitions is explicitly imported as a dependency using JavaScript module import statements. This import operation allows the style file to be recognized and processed by the front-end build tool (such as Webpack or Vite), and ultimately included in the resource bundle generated after the project is built. In this way, all atomic class rules defined in the style file become directly referenceable style resources in any component or page template throughout the entire project, thereby achieving global availability of atomic classes at the project level.
[0049] A second aspect of this application provides a style specification and implementation apparatus based on CSS atomicity, including: A definition unit is used to define multiple atomic classes according to preset style attribute classification. Each atomic class corresponds to an independent style attribute. The style attribute includes at least one of color, font, margin, inner margin, layout, positioning, border and display attributes. A composition unit is used to combine multiple atomic classes in the class attribute of a target element to construct the complete style of the target element; Integration units are used to integrate style files that define the atomic classes into the front-end project through front-end build tools to achieve style rendering.
[0050] A third aspect of this application provides an electronic device, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the program to implement the method described in any of the first aspects above.
[0051] Figure 2 An example is a schematic diagram of the physical structure of an electronic device, such as... Figure 2 As shown, the electronic device may include: a processor 810, a communication interface 820, a memory 830, and a communication bus 840, wherein the processor 810, the communication interface 820, and the memory 830 communicate with each other via the communication bus 840. The processor 810 may call logical instructions in the memory 830 to execute the method in any of the embodiments of the first aspect described above, the method including: Based on the preset style attribute classification, multiple atomic classes are defined, and each atomic class corresponds to an independent style attribute. The style attribute includes at least one of color, font, margin, inner margin, layout, positioning, border and display attributes. Combining a plurality of the atomic classes in a class attribute of a target element to construct a complete style of the target element; Integrating the style file defining the atomic classes into a front-end project by a front-end construction tool to realize rendering of the style.
[0052] In addition, the logical instructions in the memory 830 described above can be implemented in the form of a software function unit and sold or used as an independent product, and can be stored in a computer-readable storage medium. Based on such understanding, the technical solutions of the present application essentially or the parts that make contributions to the prior art or parts of the technical solutions can be embodied in the form of a software product. The computer software product is stored in a storage medium and includes a number of instructions for causing a computer device (which can be a personal computer, a server, or a network device, etc.) to execute all or part of the steps of the methods described in the various embodiments of the present application. The aforementioned storage medium includes: a U disk, a mobile hard disk, a read-only memory, a random access memory, a magnetic disk or an optical disk, and various media that can store program codes.
[0053] On the other hand, the present application also provides a computer program product, the computer program product includes a computer program, the computer program can be stored on a non-transitory computer readable storage medium, when the computer program is executed by a processor, the computer can execute the method provided by the above-mentioned method, the method includes: According to a preset style attribute classification, define a plurality of atomic classes, each atomic class corresponds to an independent style attribute, and the style attribute includes at least one of color, font, margin, inner margin, layout, positioning, border, and display attribute; Combining a plurality of the atomic classes in a class attribute of a target element to construct a complete style of the target element; Integrating the style file defining the atomic classes into a front-end project by a front-end construction tool to realize rendering of the style.
[0054] In another aspect, the present application also provides a non-transitory computer readable storage medium having a computer program stored thereon, the computer program being executed by a processor to implement the method provided by the above-mentioned method, the method including: According to a preset style attribute classification, define a plurality of atomic classes, each atomic class corresponds to an independent style attribute, and the style attribute includes at least one of color, font, margin, inner margin, layout, positioning, border, and display attribute; Combining a plurality of the atomic classes in a class attribute of a target element to construct a complete style of the target element; Integrating the style file defining the atomic classes into a front-end project by a front-end construction tool to realize rendering of the style.
[0055] The existing technology is adopted or referred to for the parts not mentioned in the present application.
[0056] Each of the embodiments in the present specification is described in a progressive manner, and the same or similar parts between the embodiments can be referred to each other. Each of the embodiments mainly explains the difference from other embodiments.
[0057] The above only describes the embodiments of the present application and is not intended to limit the present application. The present application can be variously changed and modified by those skilled in the art. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present application shall be included in the scope of the claims of the present application.
Claims
1. A style specification and implementation method based on CSS atomicity, characterized in that, The method includes: Based on the preset style attribute classification, multiple atomic classes are defined, and each atomic class corresponds to an independent style attribute. The style attribute includes at least one of color, font, margin, inner margin, layout, positioning, border and display attributes. Combine multiple atomic classes in the class attribute of the target element to construct the complete style of the target element; The style file containing the atomic classes is integrated into the front-end project using a front-end build tool to achieve style rendering.
2. The method according to claim 1, characterized in that, The definition of multiple atomic classes based on preset style attribute classification includes: For color attributes, define a text color atom class and a background color atom class. The naming format of the text color atom class is .text-color identifier, and the naming format of the background color atom class is .bg-color identifier. The color identifier is used to distinguish different colors.
3. The method according to claim 1, characterized in that, The definition of multiple atomic classes based on preset style attribute classification includes: For font properties, define atomic classes for font size, font weight, and font family. The naming format of the atomic class for font size is .font-size-size-value, where the size value represents the numerical value of the font size.
4. The method according to claim 1, characterized in that, Combining multiple atomic classes in the class attribute of the target element includes: In the template of an HTML document or front-end component, multiple atomic class names can be referenced side by side using the class attribute or className attribute to apply the corresponding style properties to the target element.
5. The method according to claim 1, characterized in that, The method further includes: The atomic classes are automatically generated using the PostCSS plugin, and unused atomic classes are cleaned up during the project build process to optimize the size of the style files.
6. The method according to claim 1, characterized in that, The process of integrating the style file containing the atomic classes into the front-end project using a front-end build tool includes: Include the style file in the entry file of the React or Vue front-end framework to make the atomic class available globally in the project.
7. A style specification and implementation device based on CSS atomicity, characterized in that, include: A definition unit is used to define multiple atomic classes according to preset style attribute classification. Each atomic class corresponds to an independent style attribute. The style attribute includes at least one of color, font, margin, inner margin, layout, positioning, border and display attributes. A composition unit is used to combine multiple atomic classes in the class attribute of a target element to construct the complete style of the target element; Integration units are used to integrate style files that define the atomic classes into the front-end project through front-end build tools to achieve style rendering.
8. A computer-readable storage medium having a program stored thereon, characterized in that, When the program is executed by the processor, it implements the steps of the method as described in any one of claims 1-6.
9. An electronic device comprising a memory, a processor, and a program stored in the memory and executable on the processor, characterized in that, When the processor executes the program, it implements the steps of the method as described in any one of claims 1-6.