You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+5-5Lines changed: 5 additions & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -77,7 +77,7 @@ Awesome!
77
77
78
78
First you need to setup [webpack](http://webpack.github.io/docs/) to load your css files using "css" loader and enable CSS modules. You will also need to use `extract-text-webpack-plugin` to aggregate the CSS into a single file. Refer to [webpack-demo](https://github.com/css-modules/webpack-demo).
79
79
80
-
Then you need use the higher order component declaration pattern to "decorate" your component, e.g.
80
+
Then you need to decorate your component using `CSSModules`, e.g.
81
81
82
82
```js
83
83
importReactfrom'react';
@@ -100,7 +100,7 @@ Thats it!
100
100
101
101
## SASS, SCSS, LASS and other CSS Preprocessors
102
102
103
-
[ICSS](https://github.com/css-modules/icss)works with CSS Preprocessors. All you need is to add the preprocessor the chain of loaders, e.g. in the case of webpack it is as simple as install`sass-loader` and adding `!sass` to the end of the `style-loader` loader chain declaration (loaders are processed from right to left):
103
+
[ICSS](https://github.com/css-modules/icss)is compatible with the CSS Preprocessors. All you need is to add the preprocessor to the chain of loaders, e.g. in the case of webpack it is as simple as installing`sass-loader` and adding `!sass` to the end of the `style-loader` loader chain declaration (loaders are processed from right to left):
104
104
105
105
```js
106
106
{
@@ -111,7 +111,7 @@ Thats it!
111
111
112
112
## Multiple CSS Classes
113
113
114
-
CSS modules promote composition pattern, i.e. every CSS class thats is used in a component should define all properties required to describe the element, e.g.
114
+
CSS modules promote composition pattern, i.e. every CSS class that is used in a component should define all properties required to describe the element, e.g.
115
115
116
116
```css
117
117
.button {
@@ -133,7 +133,7 @@ CSS modules promote composition pattern, i.e. every CSS class thats is used in a
133
133
134
134
To learn more about composing CSS rules, I suggest reading Glen Maddern article about [CSS Modules](http://glenmaddern.com/articles/css-modules) and the official [CSS modules spec](https://github.com/css-modules/css-modules).
135
135
136
-
Using React CSS Modules, you can map as many CSS classes to the element as you want. `CSSModules` will append the unique class name for every class name it matches in the `className` declaration, e.g.
136
+
Using React CSS Modules, you can map as many CSS classes to the element as you want. `CSSModules` will append a unique class name for every class name it matches in the `className` declaration, e.g.
137
137
138
138
```css
139
139
.button {
@@ -149,6 +149,6 @@ Using React CSS Modules, you can map as many CSS classes to the element as you w
149
149
<div className='button active'></div>
150
150
```
151
151
152
-
This will map both [ICSS](https://github.com/css-modules/icss) classes to the target element.
152
+
This will map both [ICSS](https://github.com/css-modules/icss)CSS classes to the target element.
153
153
154
154
However, I encourage you to use composition whenever possible. Composition promotes better separation of markup from style sheets using semantics that would be hard to achieve without CSS modules. You can enforce one CSS class name per `className` using [`allowMultiple` option](#usage).
0 commit comments