How to make custom CSS the dominant CSS in Shiny? - css

Question

I have a custom CSS file for my shiny app. I know it is being read, because some of the elements come through. However, some of the elements are overridden. If I add !important, it fixes them, but there are a lot and this is not good practice. Can I specify my custom CSS always takes priority?
I have tried both methods of hooking in the css and they both do the same job.
ui <- fluidPage(
tags$head(includeCSS("www/my_theme.css")
#tags$link(rel = "stylesheet", type = "text/css", href = "my_theme.css")
),

Answer 1

What you are looking for is named specifity of the css selectors. On the first look it seems to be a complex theme ... but it is not as complicated.
It has do do how many tags/ids/classes had been used to specify a styling.
id are more important than classes
classes are more important than tag (element name like div)
And a higher number off used id/classes/tags in general is more important than stylings which uses less classes (= .a.b.c {...} is more important than .a.b {...}).
Styles noted direct in html (inline-styles) are more important than styles in loaded files.
And some other rules ...
Bringing this alltogether CSS calculates the specifity for a selector.
Here are two links
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
https://specifishity.com/
Practical
// most often it is enough to add one more tag/class/id
// to the rule --> BUT YOU HAVE TO TEST IT ON THE ACTUAL RULE
// before
.classA { ...}
// now to overwrite:
div.classA {...}
// or much higher specifity
body .classOffContainer div.classA {...}
NOTE: but keep it simple for possible debugging!!!
Most often really ONE more 'actor' in the selctor is enough!
SORRY!! -- UPDATE
Here are so many beginners that I did get your question maybe false ...
No. There is no way to rank one css file above another one. Included files are allways get the same specifity value, independend in what order they are loaded.
I am not sure about the following:
Maybe you try to move your css from the css file to the script block in the head off the html file ... but I am not very otimistic that this will get a higher specifity.
UPDATE 2
Just as rough and dirty fast working idea to the problem:
Copy your code in a SASS file.
Wrap the whole code in a html and/or body tag.
That adds a htmland/or body before all of selectors/clases off your css.
Not elegant but fast, generate higher specifity and easy to debug, - and at the end (nearly) nobody cares about a clean CSS.
Add the new generated css file to the project.
// example off SASS file
// to expalyin what I mean:
html [optional: body] {
... your whole css ...
}