Skip to content

Commit 8cca1c4

Browse files
committed
Added react-css-modules logo and a section dedicated to CSS Modules.
1 parent 0d045f3 commit 8cca1c4

File tree

3 files changed

+12
-2
lines changed

3 files changed

+12
-2
lines changed

README.md

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,12 @@
33
[![Travis build status](http://img.shields.io/travis/gajus/react-css-modules/master.svg?style=flat)](https://travis-ci.org/gajus/react-css-modules)
44
[![NPM version](http://img.shields.io/npm/v/react-css-modules.svg?style=flat)](https://www.npmjs.org/package/react-css-modules)
55

6+
<img src='./README/react-css-modules' width='150' height='150' />
7+
68
React CSS Modules implement automatic mapping of CSS modules. Every CSS class is assigned a local-scoped identifier with a global unique name. CSS Modules enable a modular and reusable CSS!
79

10+
- [CSS Modules](#css-modules)
11+
- [webpack `css-loader`](#webpack-css-loader)
812
- [What's the Problem?](#whats-the-problem)
913
- [The Implementation](#the-implementation)
1014
- [Usage](#usage)
@@ -22,7 +26,7 @@ React CSS Modules implement automatic mapping of CSS modules. Every CSS class is
2226
- [Global CSS](#global-css)
2327
- [Multiple CSS Classes](#multiple-css-classes)
2428

25-
## What's the Problem?
29+
## CSS Modules
2630

2731
[CSS Modules](https://github.com/css-modules/css-modules) are awesome. If you are not familiar with CSS Modules, it is a concept of using a module bundler such as [webpack](http://webpack.github.io/docs/) to load CSS scoped to a particular document. CSS module loader will generate a unique name for a each CSS class at the time of loading the CSS document ([Interoperable CSS](https://github.com/css-modules/icss) to be precise). To see CSS Modules in practice, [webpack-demo](https://css-modules.github.io/webpack-demo/).
2832

@@ -55,7 +59,13 @@ and a corresponding CSS file that matches those CSS classes.
5559

5660
Awesome!
5761

58-
However, this approach has several disadvantages:
62+
### webpack `css-loader`
63+
64+
[CSS Modules](https://github.com/css-modules/css-modules) is a specification that can be implemented in multiple ways. `react-css-modules` leverages as existing CSS Modules implementation webpack [css-loader](https://github.com/webpack/css-loader#css-modules).
65+
66+
## What's the Problem?
67+
68+
webpack [css-loader](https://github.com/webpack/css-loader#css-modules) itself has several disadvantages:
5969

6070
* You have to use `camelCase` CSS class names.
6171
* You have to use `styles` object whenever constructing a `className`.

README/react-css-modules.png

45.4 KB
Loading

README/react-css-modules.sketch

88 KB
Binary file not shown.

0 commit comments

Comments
 (0)