Skip to content

Commit

Permalink
Fix the description of the cascade problem in the docs (#2659)
Browse files Browse the repository at this point in the history
* Fix the description of the cascade problem in the docs

* Update docs/composition.mdx

Co-authored-by: Sam Magura <srmagura@gmail.com>

Co-authored-by: Sam Magura <srmagura@gmail.com>
  • Loading branch information
Andarist and srmagura committed Mar 5, 2022
1 parent affe8f1 commit 4266aa0
Showing 1 changed file with 3 additions and 3 deletions.
6 changes: 3 additions & 3 deletions docs/composition.mdx
Expand Up @@ -27,7 +27,7 @@ render(

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.

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.
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.

```jsx
// @live
Expand Down Expand Up @@ -70,8 +70,8 @@ render(
<div>
<div css={base}>This will be turquoise</div>
<div css={[danger, base]}>
This will be also be turquoise since the base styles
overwrite the danger styles.
This will be also be turquoise since the base styles overwrite the danger
styles.
</div>
<div css={[base, danger]}>This will be red</div>
</div>
Expand Down

0 comments on commit 4266aa0

Please sign in to comment.