Css Priority

Hey,

currently the generated stylesheet is inserted as the first child of head, however shouldn’t it be inserted as the last child?

For example, if we have different stylesheets already loaded like bootstrap in the head. Then the generated stylesheet would still be the first child in the head and based on the precedence of css, bootstrap would override blazorstyled, if both wanted to change the style of the same element.

Maybe i overlooked something in the documentation, so is there a possibility to move the generated stylesheet to the bottom of the head so that it has a higher precedence?

https://css-tricks.com/precedence-css-order-css-matters/

Thanks!

[chanan]

Thanks @pgrm for the idea! I will document as soon as I fix #102

[pgrm]

but you are setting found to true, once you’ve found a “matching” element:

https://github.com/chanan/BlazorStyled/blob/30b23f61e8510f9b3af2e47bf9525c271f6d4939/src/BlazorStyled/Internal/Scripts.js#L168

and the condition for a “matching” element is simply

https://github.com/chanan/BlazorStyled/blob/30b23f61e8510f9b3af2e47bf9525c271f6d4939/src/BlazorStyled/Internal/Scripts.js#L164-L167

this can be faked for any element, if you know the attribute name.

As a matter of fact, I’ve just tried it out and I was able to change the default location for the BlazorStyled element to any place I wanted, just by defining an <style data-blazorstyled-priority="-1"></style> in my head.

Try it out for yourself, if you don’t believe me. But I think this is the perfect solution to this problem.

• You can control exactly where that style will show up
• and it’s no additional effort, just documenting an existing feature.