Load order

Within each level, the load order is Common first, then Wikia. This means that if you've said .class { color: red } in Common.css, but .class { color: green} in Wikia.css, the .class will be green. And because personal CSS is last, whatever you put there always overrides the local wiki's choices.

It also critically means that if you're importing CSS or fonts — and your wiki has both Common.css and Wikia.css — those imports need to be at the very top of Common.css.

This chart will help you figure out the best way to merge Common.css into Wikia.css while observing proper load order.

If you want to simplify your wiki's CSS, you can graft the contents of Common.css onto Wikia.css. But you need to observe load order fundamentals when you do. Follow the nearby flowchart, and you'll be fine!

For JS, load order is especially important when considering how to best use MediaWiki:ImportJS. Because ImportJS loads last, you can put your customization of a Dev Wiki script in Common.js or Wikia.js, but have the import of the script itself in ImportJS. The full JS load order is:

Common.js

Wikia.js

Imported scripts through Common.js

Imported scripts through Wikia.js

ImportJS

Finally, remember the obvious: pages load from top to bottom. That means that declarations made at the top of a page can be overridden by ones at the bottom.

!important in CSS

Due to CSS load orders, you may sometimes need to make use of the !important property to ensure a CSS rule is applied. But !important should be avoided when possible by use of specific (even overly specific) CSS selectors.

Caching issues

Every file you download from the internet gets cached. Normally that's great because it reduces traffic both for your own device and for Fandom's servers, but it can be a problem when it comes to testing design changes. It may take a while before your changes to take effect unless you bypass your cache.

If bypassing your cache doesn't work, you can try debugging your code by adding ?debug=1 at the end of the URL of any page. Debugging your code means that the code will almost 100% guarantee the load of the recently added script(s) and/or stylesheet(s).

Popular JavaScript snippets

To get an idea of some scripts others have written that you might find useful or would like to try, take a look at the list of JS Enhancements on the Fandom Developers Wiki.

Duplicate JavaScript

Many scripts can have problems if they are run multiple times on the same page. Make sure to write the code in such a fashion that a particular piece of code runs only once. Avoid pasting the same JS in multiple files as it will likely conflict and cause confusing errors for you and other visitors.

Temporarily disabling CSS/JS

Custom CSS and JS can be temporarily disabling using the following commands.

If more than one command is needed, instead of question mark (?), put an ampersand (&) for the second, third and fourth commands (in case if there are) (example:/wiki/Special:Random?usesitecss=0&useuserjs=0. [The following example disables site CSS and personal JS]).

CSS and JS editor error checking

As you type code, the page will let you know about any errors in the syntax that might have occurred.

Note that not every flagged issue has to be solved; CSS (and even JS) technology is ever evolving, and browsers do not all behave identically: some messages may not require action.

Common issues

CSS issues

Issue

Explanation

@import prevents parallel downloads, use <link> instead

Link tags are normally used to import CSS. However, MediaWiki does not support adding your own link tags without use of JS, so this error can normally be ignored. Using @import is the preferred method.

Expected X but found Y

This means you have entered an invalid value for a property. For example, in color: foo; foo is an invalid value for the color property because it is not a color.

Use of !important

!important should generally be avoided in CSS as it can make it harder to maintain, and also makes it harder for users to override settings in their personal CSS. Most of the time, using the correct and specific selector will help you avoid using !important.

Unknown property 'codename'

Although not all CSS code is recognized by the tool (as CSS itself is a frequently updated artform), certain CSS codes can still be read when they are implemented for a certain object on the page (For example, mix-blend-mode: color-dodge;).