Currently the MediaWiki markup allows the inclusion of html elements with style attributes. Mixing layout with content causes various problems with reusability, maintainability and is not future proof. Already on the mobile version of MediaWiki problems are being seen with inline styles with how pages render on smaller screens which could be solved via css3 media queries, however these cannot be done in inline styles.

It should be possible for templates to have associated stylesheets so that media queries can be applied where necessary. This is related to bugzilla:35704.

In terms of how separating styles into stylesheets will help things out on mobile fundamentally it allows you to use media queries. Thus you can do radically different things such as have a 2 column layout on a desktop browser but have a 1 column layout on mobile. For instance in this code snippet:

@mediaall and (min-width:600px){.leftPane{width:300px;float:left;}.rightPane{width:300px;float:right;}}

This means if the screen is smaller than 600px then none of these css rules will apply. On a screen of 320px such a style introduced via inline style would be broken (and you cannot do media queries in a style attribute).

Various rendering issues on mobile are caused by the existence of inline styles which do not degrade. See bug 35704.

Templates could use conflicting CSS names causing incompatibilities between templates

This is seen as a good thing as it leads to better template maintenance and promotes reuse and collaboration

However, there is a difference between factoring out code cleanly (a CSS library) and one template mysteriously relying on another's styles (possibly in a totally undocumented way). Superm401 - Talk 23:12, 16 September 2013 (UTC)

Actually assuming a CSS base that defines common styles that all subsequent stylesheets can rely on is a good pattern going forward. To be clear, what I am describing is a 1 level dependency on CSS, not "n" levels.That is, the base styles are well defined and applied to common elements. They do not define styles of features. By definition the "base layer" is small and namespaced to prevent conflicts. NRuiz (WMF) (talk) 10:13, 26 March 2014 (UTC)

CSS rules within templates could be applied to UI chrome

This can be resolved by using scoped style tags that only apply styles to the template itself (or potentially a part of it) - scoped styles is currently a W3C candidate recommendation

For older browsers that do not support scoped CSS there is a JavaScript shim

For browsers that do not support JavaScript there is a danger that CSS could leak outside templates. It is decided that this in acceptable tradeoff

with LESS support and some work we could fallback to scoping the stylesheet to #bodyContent to at least prevent spillage into the UI

Balanced and unbalanced templates could lead to styles leaking to places that they shouldn't

It is proposed that by allowing template designers to add style tags in the wikitext itself this gives them control to ensure they are applied correctly. For example, a top template would have

<div><style scoped>styles here</style>

tag, and a bottom template would have

</div>

(and thus close the <style scoped> tag's applicability). This is basically a logical conclusion of how unbalanced templates work now.