!important property causing problems for custom CSS

Specifically for <pre> tags, this skin's usage of the !important CSS property makes it difficult for extensions or user CSS to change the foreground and background color. From what I can tell, there doesn't seem to be a reason for these (and possibly other) CSS attributes to be using the !important property. Could the !important property please be removed at least from this section?

DarkVector/darkvector.less

Lines 27 to 33 in 9e1d504

    
           pre, 
        
           .mw-code, 
        
           .wikiEditor-ui-toolbar { 
        
               color: #ccc !important; 
        
               background-color: #4C4C4C !important; 
        
               border: none; 
        
           }

Hi.

property makes it difficult for extensions or user CSS to change the foreground and background color

Why extensions or users are allowed to change CSS on our wiki instance?

there doesn't seem to be a reason for these (and possibly other) CSS attributes to be using the !important property

Actually, there is. Extensions like WikiEditor contain builtin CSS styles which are designed to be used on themes with whiteish background only. And because CSS styles of extensions are loaded after skin styles, they have higher priority.

!important fixes this issue. I agree that this is quite a nasty hack, but I can't ask all the authors of MediaWiki extensions to make their styles overridable.

Why extensions or users are allowed to change CSS on our wiki instance?

Users have the ability to set both global and user-specific CSS styles in the MediaWiki software. This is an intended feature. I'm specifically trying to change the color theme used for code blocks used on a wiki (particularly with plain <pre> tags as well as those generated by the SyntaxHighlight extension. I haven't run into a skin besides this one where I was unable to set a user customizable color theme for code blocks, since none of them use !important.

It seems that this CSS rule is too broad, which is why the usage of !important seems justified. I can't imagine that there is a need to have a style use !important in order to affect all <pre> tags. Generally, all issues with overriding in CSS can be resolved without using !important and instead using the rules of the specificity hierarchy. There are only two situations where usage of !important is remotely justified: trying to override inline styles in the HTML, or trying to override the usage of !important somewhere else in CSS. In both of those cases the issue is actually upstream and should be fixed there. Using !important is only justifiable if it isn't possible to change it upstream.

In this specific case, perhaps it would be better to create a separate rule for <pre> tags that doesn't use !important and only have this rule for the things that absolutely need it. Something like this perhaps?

 pre { 
     color: #ccc; 
     background-color: #4C4C4C; 
     border: none; 
 } 

 .mw-code, 
 .wikiEditor-ui-toolbar { 
     color: #ccc !important; 
     background-color: #4C4C4C !important; 
     border: none; 
 }

I did some tests and please correct me if I am wrong, but the only issue with what I suggested above was the CodeMirror extension, but using !important there seems applicable. Making this minor modification seemed to work well in my tests:

 pre { 
     color: #ccc; 
     background-color: #4C4C4C; 
     border: none; 
 } 

 .CodeMirror,
 .mw-code, 
 .wikiEditor-ui-toolbar { 
     color: #ccc !important; 
     background-color: #4C4C4C !important; 
     border: none; 
 }

Please open the pull request with corresponding changes

	pre,
	.mw-code,
	.wikiEditor-ui-toolbar {
	color: #ccc !important;
	background-color: #4C4C4C !important;
	border: none;
	}