repository·main·Indexed 23 days ago
https://github.com/acss-io/atomizerA toolset for generating and managing Atomic CSS rules. It includes a CLI for scanning files to generate stylesheets, a JavaScript API for programmatic CSS generation, and the atomizer-plugins library for integration with esbuild, Rollup, Vite, and Webpack. Additionally, it provides a VSCode extension for Atomic CSS autocomplete across multiple file types including JS, HTML, React, Svelte, and TypeScript, as well as a Grunt task via grunt-atomizer.
Atomizer is maintained as a monorepo containing the core library and various integration plugins for different build tools and frameworks.
grunt-atomizergulp-atomizermetalsmith-atomizerwebpack-atomizer-loaderboot-atomizerember-cli-atomizerAtomizer provides various integrations for automated workflows. Instead of using the CLI manually, you can use dedicated plugins for your build tools or framework-specific setups.
Refer to the specific integration guides in the documentation for your chosen tool.
The Rollup example demonstrates how to integrate Atomizer into a Rollup build pipeline. The key files in this example are:
index.html: The HTML entry point that executes the bundled dist/main.js.index.js: A JavaScript file that simulates creating HTML elements using Atomizer CSS classes.rollup.config.mjs: The Rollup configuration file that utilizes the atomizer-plugins package to process CSS.The Webpack example demonstrates how to integrate Atomizer into a standard build pipeline using the following files:
atomizer.config.mjs: The configuration file for Atomizer.webpack.config.mjs: The Webpack configuration that utilizes the atomizer-plugins package.index.js: A script simulating HTML creation via JavaScript, incorporating Atomizer CSS classes.index.html: The entry HTML page that executes the Webpack-bundled JavaScript.Atomic CSS is a CSS architecture consisting of a set of classes representing single-purpose styling units. Atomizer implements a specific syntax to help you generate these Atomic rulesets.
Atomizer only creates a style sheet containing the relevant declarations used in your project. These are generated from:
Atomic CSS is a collection of single-purpose styling units based on the single responsibility principle. These units are designed for maximum reuse and are highly compatible with component-based frameworks like React, Ember, or Angular.
Key characteristics:
Atomizer supports styling elements based on their ancestors or siblings using a combinator syntax. You can also apply styles based on pseudo-classes like :hover (represented by the :h suffix).
Example of a hover effect:
Bgc(#0280ae):h sets the background color on hover.
You can also combine descendant selectors with pseudo-classes to reveal nested elements when a parent is hovered.
<!-- Hover effect on the element itself -->
<div class="Bgc(#0280ae):h C(#0280ae) C(#fff):h">
Lorem ipsum
</div>
<!-- Reveal nested element when parent is hovered -->
<div class="foo">
<p class="Op(0) foo:h>Op(1)">Lorem ipsum</p>
</div>Using Atomic CSS provides several architectural and performance advantages:
D(g) class for display: grid or D(ig) for display: inline-grid. Due to the complexity of CSS Grid, many advanced grid properties (like grid-template) are best implemented using custom variables defined in your atomizer.config.js.Atomizer allows you to style an element based on the state or presence of its ancestors or siblings using <context> and <combinator> syntax.
<context>: A class applied to an ancestor or sibling. It is followed by a <combinator>.<combinator>: Required if a <context> is provided. It defines the relationship between the context and the current element.| Character | Name | CSS Equivalent | Description |
|---|---|---|---|
_ | Underscore | Descendant combinator | Styles the element if any ancestor has the context class. |
> | Right angle bracket | Child combinator | Styles the element if its immediate parent has the context class. |
+ | Plus sign | Adjacent sibling combinator | Styles the element if its immediate previous sibling has the context class. |
~ | Tilde sign | General sibling combinator | Styles the element if any previous sibling has the context class. |
Note: Classes containing descendant selectors are not sandboxed via the namespace; instead, Atomizer adds !important to these styles.
<!-- Descendant (Ancestor) -->
<div class="foo">
<div class="foo_D(n)"></div>
</div>
<!-- Child (Parent) -->
<div class="foo">
<div class="foo>D(n)"></div>
</div>
<!-- Adjacent Sibling -->
<div class="foo"></div>
<div class="foo+D(n)"></div>
<!-- General Sibling -->
<div class="foo"></div>
<div class="bar"></div>
<div class="foo~D(n)"></div>When a namespace is configured, Atomizer applies it to most rules. However, descendant classes (contextual classes) do not use the namespace to avoid selector failures in complex DOM structures (e.g., when the target node is a sibling rather than a descendant of the namespaced element).
Instead of using the namespace for these specific rules, Atomizer applies !important to ensure they remain effective.
Note: If you are not using a namespace, Atomizer does not add !important to these rules. If you use a namespace, keep in mind that these !important rules might affect how you style the same node via JavaScript.