Skip to content

Commit 7da4868

Browse files
committed
Fix typo, update
1 parent 2fecb77 commit 7da4868

File tree

1 file changed

+17
-20
lines changed

1 file changed

+17
-20
lines changed

README.md

Lines changed: 17 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,8 @@ npm install --save-dev svelte-preprocess-cssmodules
2323
- [Native](#native)
2424
- [Mixed](#mixed)
2525
- [Scoped](#scoped)
26-
- [Modules over Svelte scoping?](#modules-over-svelte-scoping)
26+
- [Comparative](#comparative)
27+
- [Why CSS Modules over Svelte scoping?](#why-css-modules-over-svelte-scoping)
2728
- [Configuration](#configuration)
2829
- [Rollup](#rollup)
2930
- [Webpack](#webpack)
@@ -59,8 +60,7 @@ The component will be compiled to
5960

6061
The default svelte scoping appends every css selectors with a unique class to only affect the elements of the component.
6162

62-
[CSS Modules](https://github.com/css-modules/css-modules) **scopes each class name** with a unique id/name in order to affect the elements of the component.
63-
As the other selectors are not scoped, it is recommended to write each selector with a class.
63+
[CSS Modules](https://github.com/css-modules/css-modules) **scopes each class name** with a unique id/name in order to affect the elements of the component. As the other selectors are not scoped, it is recommended to write each selector with a class.
6464

6565
```html
6666
<!-- Component A -->
@@ -260,8 +260,7 @@ When used with a class, `:local()` cssModules is replaced by the svelte scoping
260260

261261
### CSS binding
262262

263-
Link CSS values to any component dynamic variable by using `bind()`.
264-
263+
Link the value of a CSS property to a dynamic variable by using `bind()`.
265264

266265
```html
267266
<script>
@@ -279,7 +278,7 @@ Link CSS values to any component dynamic variable by using `bind()`.
279278
</style>
280279
```
281280

282-
A scoped css variable, binding the declared statement, will be created on the **root** html elements of the component. The value of the css property will inherit from this variable.
281+
A scoped css variable, binding the declared statement, will be created on the component **root** elements which the css property will inherit from.
283282

284283
```html
285284
<script>
@@ -299,7 +298,7 @@ A scoped css variable, binding the declared statement, will be created on the **
299298
</style>
300299
```
301300

302-
Object nested values can also be used by wrapping them with quotes.
301+
An object property can also be targetted if wrapped with quotes.
303302

304303
```html
305304
<script>
@@ -722,23 +721,21 @@ Cons:
722721

723722
- does not pass scoped class name to child components
724723

725-
### Modules over Svelte scoping?
726-
727-
**On a full svelte application**
724+
### Comparative
728725

729-
it is just a question of taste as the default svelte scoping is largely enough. Component styles will never inherit from other styling.
726+
| | Svelte scoping | Preprocessor Native | Preprocessor Mixed | Preprocessor Scoped |
727+
| -------------| ------------- | ------------- | ------------- | ------------- |
728+
| Scopes classes | O | O | O | O |
729+
| Scopes non class selectors | O | X | O | O |
730+
| Creates unique class ID | X | O | O | O |
731+
| Has equal selector weight | O | O | X | O |
732+
| Passes scoped classname to a child component | X | O | O | X |
730733

731-
**On a hybrid project** (like using svelte to enhance a web page)
734+
## Why CSS Modules over Svelte scoping?
732735

733-
the default scoping may actually inherits from a class of the same name belonging the style of the page. In that case using CSS Modules to create a unique ID and to avoid class inheritance might be advantageous.
736+
- **On a full svelte application**: it is just a question of taste as the default svelte scoping is largely enough. Component styles will never inherit from other styling.
734737

735-
| | Svelte scoping | Preprocessor Native | Preprocessor Mixed | Preprocessor Scoped |
736-
| -------------| ------------- | ------------- | ------------- | ------------- |
737-
| scopes classes | O | O | O | O |
738-
| scopes non class selectors | O | X | O | O |
739-
| creates unique class ID | X | O | O | O |
740-
| has equal selector weight | O | O | X | O |
741-
| can pass scoped classname to child component | X | O | O | X |
738+
- **On a hybrid project** (like using svelte to enhance a web page): the default scoping may actually inherits from a class of the same name belonging to the style of the page. In that case using CSS Modules to create a unique ID and to avoid class inheritance might be advantageous.
742739

743740
## Configuration
744741

0 commit comments

Comments
 (0)