Extension:TemplateStyles/Q&A

 What is the most convenient way to apply styling to templates?

About and Rationale
The extensionTemplateStyles allows CSS styling to be added to templates. This will result in more flexibility in both the way templates are visually designed, plus a better adaptability to screen options, i.e. no more garbled templates view on mobile devices. By providing a better and more mobile friendly page rendering, we are better able to deliver the sum of all knowledge, in a more refined experience, to all our mobile readers. More info on Phabricator task T155813.

We need to decide on the best way to add styling to templates, in order for the team to understand which approach they should certainly avoid. The styling storage decision will basically determine how the extension is being built, so once we decide on this, other performance decisions are dependent on what we decide upon, and therefore it will be very inefficient to change our minds and redo all the work again.

Work Flow changes
Adding CSS to existing or new templates can be implemented in two ways. Since the extension is still under development, we would like to get a better understanding of how template editors would like the change to take place, in order to plan implementation accordingly.

1. Store CSS in template page
The CSS code will be inserted within the parser tags. The is an easy and flexible way to implement styling. Template authors can chose to include CSS from a subpage, or use template parameters in the CSS code, or even generate dynamic CSS via #tag or a Scribunto module.

2. Store CSS in a separate page
In this option, styling will live in a separate subpage, something like. With this option, restrictions to template styling could be applied (anyone can edit the template, but not anyone can edit styling). It will also be easier to search and sort templates by style (example: find templates with non-mobile-friendly styles). In the future, as this is when MCR is in place, we will be able to have virtual subpages, with enhanced UI function (a button that says "edit CSS" for example).

Another possibility here would be to load the styles explicitly with a tag, e.g., instead of using a magic subpage.

Rollout plan open questions

 * 1) Shall we target specific, no so heavily used templates as a "test" templates