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
-[Modules over Svelte scoping?](#modules-over-svelte-scoping)
26
+
-[Comparative](#comparative)
27
+
-[Why CSS Modules over Svelte scoping?](#why-css-modules-over-svelte-scoping)
27
28
-[Configuration](#configuration)
28
29
-[Rollup](#rollup)
29
30
-[Webpack](#webpack)
@@ -59,8 +60,7 @@ The component will be compiled to
59
60
60
61
The default svelte scoping appends every css selectors with a unique class to only affect the elements of the component.
61
62
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.
64
64
65
65
```html
66
66
<!-- Component A -->
@@ -260,8 +260,7 @@ When used with a class, `:local()` cssModules is replaced by the svelte scoping
260
260
261
261
### CSS binding
262
262
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()`.
265
264
266
265
```html
267
266
<script>
@@ -279,7 +278,7 @@ Link CSS values to any component dynamic variable by using `bind()`.
279
278
</style>
280
279
```
281
280
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.
283
282
284
283
```html
285
284
<script>
@@ -299,7 +298,7 @@ A scoped css variable, binding the declared statement, will be created on the **
299
298
</style>
300
299
```
301
300
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.
303
302
304
303
```html
305
304
<script>
@@ -722,23 +721,21 @@ Cons:
722
721
723
722
- does not pass scoped class name to child components
724
723
725
-
### Modules over Svelte scoping?
726
-
727
-
**On a full svelte application**
724
+
### Comparative
728
725
729
-
it is just a question of taste as the default svelte scoping is largely enough. Component styles will never inherit from other styling.
| Passes scoped classname to a child component | X | O | O | X |
730
733
731
-
**On a hybrid project** (like using svelte to enhance a web page)
734
+
## Why CSS Modules over Svelte scoping?
732
735
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.
| 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.
0 commit comments