Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix the description of the cascade problem in the docs #2659

Merged
merged 2 commits into from Mar 5, 2022
Merged

Fix the description of the cascade problem in the docs #2659

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
dc9a12a
Fix the description of the cascade problem in the docs
Andarist Feb 22, 2022
c9e4775
Update docs/composition.mdx
Andarist Feb 22, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
6 changes: 3 additions & 3 deletions docs/composition.mdx
View file
Open in desktop
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