Repository files navigation

ACSS Module is a CSS file where all class names and animation names are scoped locally by default. All URLs (url(...)) and@imports are in module request format (./xxx and../xxx means relative,xxx andxxx/yyy means in modules folder, i.e. innode_modules).

CSS Modules compile to a low-level interchange format called ICSS (orInteroperable CSS) but are written like normal CSS files:

/* style.css */.className {color: green;}

When importing aCSS Module from a JavaScript Module, it exports an object with all mappings from local names to global names.

importstylesfrom'./style.css';element.innerHTML='<divpl-c1">+styles.className+'">';

• Get Started & Examples
• Naming
• Composition
• Local Scope
• History
• Pseudo Class Selectors
• Theming

• Local Scope Prevents Clashes: CSS Modules use local scope to avoid style conflicts across different project parts, allowing component-scoped styling.
• Clear Style Dependencies: Importing styles into their respective components clarifies which styles impact which areas, enhancing code readability and maintenance.
• Solves Global Scope Problems: CSS Modules prevent the common issue of styles in one file affecting the entire project by localizing styles to specific components.
• Boosts Reusability and Modularity: CSS Modules allow the same class names in different modules, promoting modular, reusable styling.