CSS specificity example

[sarah11918]

Make sure the order of CSS styles applied is clearly documented, as per the description here: withastro/astro#3357 (comment)

I propose adding this right before CSS Integrations as an <h2> maybe ## CSS Specificity or ## Style Specificity (See attached screenshot for placement) since it builds off of both the Astro <style> tag and importing external spreadsheets described in the two sections above.

Further to Matthew's comment, I propose using ## Cascading Order to incorporate both specificity and order of appearance when we give an example of "what should happen."

This is now how it's intended to work, and should be documented as true. If people find it doesn't work that way, it's a bug and should be reported as an Issue in withastro/astro, not changed in documentation.

[matthewp]

Specificity is the weight of selectors, iirc, and order is something else if I'm reading this note correctly: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

From this: https://developer.mozilla.org/en-US/docs/Web/CSS/Cascade#cascading_order I think ordering is being called Order of appearance.

So probably the heading shouldn't be CSS Specificity but something else that both covers specificity of Astro styles (via our :where() usage and ordering which is what the linked issue comment was about.

[sarah11918]

Great link. Sounds like "Order of appearance" is one of the 4 factors taken into consideration to determine the Cascading Order, with Specificity being another.

So, I think that "Cascading Order" should include both, and will be a heading that is meaningful to people searching. I'm going to update the original comment suggesting that heading!

[jasikpark]

It could be good to link to example stackblitz projects for these too maybe?

[jasikpark]

It'd be good to document how tailwind and other css libs interact, right? or does that fall into "global styles that you import into your astro files"

[matthewp]

Tailwind uses injectScript integration API which puts an import statement at the top of your page files. So it's the same as you importing a CSS file first, before other imports. But since Tailwind is widely used it wouldn't be a bad thing to explain that too.

[jasikpark]

Just thinking how it might be nice to have an explanation of how we expect all of it to resolve, so that we know what we expect the CSS to look like & so we know when it's resolved incorrectly in that case

[sarah11918]

Quick note to check on and include in documentation: if importing multiple components (e.g. a layout and another component), the order of the import statments might affect the cascading order as mentioned here: https://discord.com/channels/830184174198718474/1012063538786873464/1025174614940336128

[jasikpark]

Quick note to check on and include in documentation: if importing multiple components (e.g. a layout and another component), the order of the import statments might affect the cascading order as mentioned here: https://discord.com/channels/830184174198718474/1012063538786873464/1025174614940336128

that's what i'm experiencing with 1.4.0 at least - i need to make sure that my layout that contains my global styles is the first import for my page so that those styles are added to the head first