Can I use multiple CSS files in one dashboard?

[splunkdivya]

Hi Splunkers,

I am using 3 CSS files in multiple dashboards, and now my use case is I need to consolidate all 3 into one CSS, which means adding panel Id, which will take many hours of effort.
All said, Is it possible to define the precedence of CSS files and use them all?

[lfedak_splunk]

Hey @splunkdivya, if DalJeanis answered your question please remember to accept the answer to close the question and to award karma points. Happy Splunking! 🙂

[DalJeanis · Accepted solution]

The whole point of the css standard is "cascading"... that more general coding can be overridden by more specific coding.

The first thing you need to understand is why you are being requested to merge the css. As a general practice, having a bunch of different CSS styles leads to lots of coordination issues and other complications. Make sure you verify from your tech lead what the reason is, before you try to do the task in a way that might not accomplish the objective.

The second thing is to understand the effective differences between the three CSSes. One "throw-it-at-the-wall" testing method is to just swap each CSS for the other two and see what breaks or what looks funky. If it turns out that you can completely substitute one CSS for at least one of the other two, and then make minor adjustments, then you have saved yourself time and headaches.

The third thing is to identify the truly different styles that are truly required for each panel, give them descriptive names, and add those styles into a new css. Then you swap it in for each panel and again, see what breaks and why, and fix it. For the sake of your job and your sanity, do not just add panel name into the style names and make a hugely redundant css, or you will spend an eternity debugging simple mistakes in a forest of bad code that you could have avoided by an easy refactor.