https://github.com/css-modules/css-modules

Documentation about css-modules
https://github.com/css-modules/css-modules

Last synced: 5 days ago
JSON representation

Documentation about css-modules

• Host: GitHub
• URL: https://github.com/css-modules/css-modules
• Owner: css-modules
• Created: 2015-05-25T21:54:47.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2024-05-30T14:58:51.000Z (8 months ago)
• Last Synced: 2024-12-30T19:13:14.035Z (12 days ago)
• Size: 62.5 KB
• Stars: 17,702
• Watchers: 220
• Forks: 558
• Open Issues: 124
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-dev-tools - CSS Modules - scoped CSS, making it easier to manage styles in large web applications (The AWESOME list / Front-end)
• awesome - css-modules - Documentation about css-modules (Others)
• awesome-github-star - css-modules - modules | css-modules | 17065 | (Others)
• awesome-list - css-modules - modules | css-modules | 15283 | (Others)
• awesome-f2e-libs - **css modules**
• awesome-fe - **css modules**
• jimsghstars - css-modules/css-modules - Documentation about css-modules (Others)

README

        

  

  

  

# CSS Modules

A **CSS 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` and `xxx/yyy` means in modules folder, i.e. in `node_modules`).

CSS Modules compile to a low-level interchange format called ICSS (or [Interoperable CSS](https://github.com/css-modules/icss)) but are written like normal CSS files:

```css

/* style.css */

.className {

  color: green;

}

```

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

```js

import styles from './style.css';

element.innerHTML = '
';

```


## Table of Contents

- [Get Started & Examples](/docs/get-started.md)

- [Naming](/docs/naming.md)

- [Composition](/docs/composition.md)

- [Local Scope](/docs/local-scope.md)

- [History](/docs/history.md)

- [Pseudo Class Selectors](/docs/pseudo-class-selectors.md)

- [Theming](/docs/theming.md)

## Why CSS Modules?

- **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.