It's not always the last selector that overrides previous ones.
You're probably running into specificity issues from the original
stylesheet, and the !important is nuking them from orbit, to be sure.
Using !important isn't a great solution in general terms, but for this
use case is probably fine.
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
On 1/12/2023 14:50, Greg Keogh via ozdotnet wrote:
Folks, TGIF
Our Blazor app has a simple classic shape with a local wwwroot/app.css
file containing all the styles for the app. I had to allow people to
customise the appearance, and my way of doing that works, but not as
smoothly as I hoped and I think someone might be able to suggest a
better more elegant technique.
If someone starts the app with query parameter ?t=contoso then the
startup code appends a line like this into the <head>
<link rel="stylesheet" type="text/css"
href="https:///somecompany/.blob.core.windows.net/
<http://blob.core.windows.net/>/myapp//_contoso.css_">
They can edit this external css file and override selectors without
touching the original app's files. Firstly ... is this sensible? It
works, but there is a problem.
To override a certain colour they have to code something like this:
.HeadLinkSel { background-color: BlueViolet !important; }
Note how the !important is needed, sometimes. I can't figure out why
yet, but !important needs to be added to the overrides most of the
time. I thought that the last selector override all previous identical
ones, and it's really irritating and confuses people settings the
overrides. Can anyone explain this?
Maybe my whole technique is flawed and naïve. I'm keen for suggestions
or links to recommended techniques for doing this sort of thing.
Cheers,
/Greg Keogh/
--
ozdotnet mailing list
To manage your subscription, access archives: https://codify.mailman3.com/
