From dc9a12a63a3353293444a01cad66ba58262b3a23 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= Date: Tue, 22 Feb 2022 10:31:20 +0100 Subject: [PATCH 1/2] Fix the description of the cascade problem in the docs --- docs/composition.mdx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/composition.mdx b/docs/composition.mdx index b1eef27a9..a17dc67ad 100644 --- a/docs/composition.mdx +++ b/docs/composition.mdx @@ -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` have a precedence over `base` like moving the `danger` class, so it's more defined later than `base`, or use `!important` or abandon composition and rewrite the styles each time you need them. ```jsx // @live @@ -70,8 +70,8 @@ render(
This will be turquoise
- 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.
This will be red
From c9e47751fa74fec4e8d95123ddf325e4ab0b7390 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= Date: Tue, 22 Feb 2022 20:14:41 +0100 Subject: [PATCH 2/2] Update docs/composition.mdx Co-authored-by: Sam Magura --- docs/composition.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/composition.mdx b/docs/composition.mdx index a17dc67ad..d8f478ef0 100644 --- a/docs/composition.mdx +++ b/docs/composition.mdx @@ -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` 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` have a precedence over `base` like moving the `danger` class, so it's more defined later than `base`, or 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