User blog:SapadorCastelo/Debugging custom CSS - Legacy vs UCP

To find a problem with the custom CSS (or to tweak the default), I usually inspect the elements around the problem, and analyse their style rules.

Example
For example, let's say that on AoE Wiki users find that the margin above H2 heading too short, they want even more space between the sections of articles. I go on their their custom CSS (MediaWiki:Common.css), and I find that they already have a rule to increase that margin:Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

/* Giving headers and TOC a little extra space */ h2 { margin-top: 20px; }

But when I inspect the margin (see screenshot below), I find that there are a couple of rules trying and modifying the margin of these type of headings. And that the default Fandom CSS has a rule that is more specific/stronger, and is being applied instead of the custom one.

Check / uncheck each rule to test their effects. Strikethrough rules are not being applied because they're weak.

I would then be able to rewrite the local rule to make it more specific, like:

.skin-oasis .WikiaArticle h2 {...

How it worked on legacy
On the far right of the panel I could see the source of each rule, that is the file behind, providing it. A default rule used to come from "Qualaroo.scss", while a custom one, from "load.php?..."

In more complicated cases, to analyse rules separately, without conflicts, I could use some URL parameters to completely block custom/default CSS requests for that one page load.

How it is on UCP
Now, on UCP wikis, there seems to be only one CSS file that loads all stylesheets: the default by Fandom, the custom local by the wiki, the custom global by the user, and the custom local by the user. Debugging custom CSS has become somewhat harder.

In more common situations, I cannot tell the source of each rule just by looking the link displayed on the right, because now, all appear as "load.php?something". I have to hover or click on them to idendify which file is that. The default is normally a huge link of several lines; while the custom one is much shorter.

And in more complicated cases now, I cannot block specific stylesheets with the URL parameters because they're no longer working. I have to use a browser extension for it.