I think we are all in agreement that the CSS in MediaWiki is a mess but it's not clear how to solve the mess.
I think I've created a useful bit of JS to visualise this mess and make a path to solving it clearer. If you visit: http://jonrobson.me.uk/lsg/ You will see in the dropdown mediawiki vector styles. This is a CSS file I created by manually concatenating all CSS files loaded by default on desktop. When visualised you see a lot of interesting things: 1) We have 6 ways of describing modal windows that take up the full screen (click 6 times on that demo to delete these 6 rules and see the stuff underneath) * .fullscreen * .modal_editor * #guider_overlay * .mw-fullscreen-overlay * .mwEmbedPlayer * .ui-widget-overlay' 2) We have 4 slightly different ways of describing a blue button * body .ui-button.ui-button-blue * .mw-ui-button.mw-ui-primary * .guider_button * button.button.blue 3) There are 13 different CSS rules for creating a pdf icon next to a link I've also added mobile styles and styles introduced by visual editor and if you compare those to the desktop one you'll see we have even more inconsistencies. I encourage you to dig into these styles and notice similarities and help us fix this mess! I'd suggest we start moving the common styles into a common library in MediaWiki core and change all our extensions to make use of the same class names. It's a big job but I think we can get this. This script is still very much a proof of concept so if anyone is interested in improving the visualisation I'd encourage you to send me a pull request on github :) _______________________________________________ Wikitech-l mailing list Wikitech-l@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/wikitech-l
