Board Thread:Darwin/@comment-5275700-20131118191131/@comment-4522253-20131118203142

We have some pretty complex CSS on our Wiki, and works pretty well on Fluid. I'd love to share some tips on best practices that have gotten us there.


 * 1) Try to avoid style= attributes on your elements, and go with classes whenever possible. It helps, if you are styling things like Infoboxes, to have those class names identify them (infobox.character and infobox.episode, for example). Working with the class names that Wikia templates already use is most helpful, because:
 * 2) Mobile almost completely ignores CSS. Class names and style= attributes will be stripped. There's a way around it if you want to style for mobile, but your CSS should be well formed first. Ask me for details.
 * 3) If you have multiple CSS files that you're importing with importArticle, identify the CSS that is most crucial for layout, and what is most crucial for discrete parts (again, Infoboxes and Navboxes come to mind). The new Special:CSS only applies to Fluid (desktop and tablet views), not mobile.
 * 4) If you have CSS patterns that are repeated (like using Flexbox, rounded corners, etc) consider using SCSS or a similar language to make mixins / macros. There are a lot of web based preprocessors (like SassMeister) that can help you, since Wikia does not currently accept SCSS. The code will be a lot cleaner when you feed it into Special:CSS, though.
 * 5) Using percentage widths instead of pixel counts is good for blocks and graphics, but bad for text. If you want to style text that can flow with Fluid, using em instead of px is the way to go.
 * 6) If you're using prefixes (like -webkit), Special:CSS is going to throw errors. If you are using the syntax correctly, you can safely ignore them. The pages will render just fine.
 * 7) The parser doesn't like adjoining classes, but they're great for keeping your code simple and consistent.