Skip to content

Commit 4266aa0

Browse files
Andaristsrmagura
andauthored
Fix the description of the cascade problem in the docs (#2659)
* Fix the description of the cascade problem in the docs * Update docs/composition.mdx Co-authored-by: Sam Magura <[email protected]> Co-authored-by: Sam Magura <[email protected]>
1 parent affe8f1 commit 4266aa0

File tree

1 file changed

+3
-3
lines changed

1 file changed

+3
-3
lines changed

docs/composition.mdx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ render(
2727

2828
With regular css, you can compose styles together using multiple class names, but this is very limited because the order that they're defined is the order they'll be applied. This can lead to hacks with `!important` and such to apply the correct styles.
2929

30-
For example, we have some base styles and a danger style, we want the danger styles to have precedence over the base styles but because `base` is in the stylesheet after `danger` it has higher [specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity). In regular CSS, you might do something to make `danger` have a higher specificity than `base` like moving the `danger` class, so it's more specific than `base`, use `!important` or abandon composition and rewrite the styles each time you need them.
30+
For example, we have some base styles and a danger style, we want the danger styles to have precedence over the base styles but because `base` is in the stylesheet after `danger` its styles will override the styles defined in `danger`, as per [the cascade rules](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance#the_cascade). In regular CSS, you might do something to make `danger` take precedence over `base` like moving the `danger` class so it's defined later than `base`, or use `!important`, or abandon composition and rewrite the styles each time you need them.
3131

3232
```jsx
3333
// @live
@@ -70,8 +70,8 @@ render(
7070
<div>
7171
<div css={base}>This will be turquoise</div>
7272
<div css={[danger, base]}>
73-
This will be also be turquoise since the base styles
74-
overwrite the danger styles.
73+
This will be also be turquoise since the base styles overwrite the danger
74+
styles.
7575
</div>
7676
<div css={[base, danger]}>This will be red</div>
7777
</div>

0 commit comments

Comments
 (0)