Why you should avoid inline styles

As we recommended in the Portability Checklist, it's best to avoid inline styles on your pages in consideration of users who look at your articles via mobile devices. This is a more in-depth explanation of why inline styles cause portability issues.

## What exactly are inline styles?

**Inline styles** are the bits of CSS code that are put directly in the page (or template) content. You can spot them by looking for style="..." inside a page's wikitext.

Inline styles stand in contrast to **stylesheets** (which live outside the text, and so are not inline). You can find and edit your community's style sheet at MediaWiki:Wikia.css and other pages in the MediaWiki space. You can improve your wiki's portability immensely if you move away from inline styles and compile all of your styling commands in a stylesheet instead.

Keep in mind that you still need to be aware of what exactly your code does, because even using a stylesheet doesn't automatically guarantee all your content is portable!

## What do they do?

Styles change how the content of your page looks. They affect the visual presentation of your information — for example, they can tell an image to display at a certain size and position, they can put a border around something on your page, or they can change the color of your text.

Some of the styling commands don't take into account that your page will be viewed not only on desktop, but also on mobile phones and tablets of various sizes and screen orientations. Due to these device constraints, the great layout and look you imposed on your content with your styling code may not work so well - not least because a phone screen is significantly smaller and narrower than your laptop screen.

Because of this, phones and other mobile devices ignore your styling information, and display the simplified and unstyled content. If the device can't distinguish content from styling code, because they're mixed in with each other on the page, that can lead to portability issues.

Less complex pages suffer from this as well. Simple tables can look bad without their custom styles. It's hard to predict how certain styles will influence your content on mobile - it may look just fine on some devices, and completely break your page on others. This is why it's best to play it safe and not include any styling with your page content.

## The more complex the code, the more likely problems will arise

CSS styling can do great things to your pages and make content look absolutely amazing. Communities use it to customize their articles in a myriad different and very creative ways. Since most coding (and adding styles does count as coding) is done on desktop, the coder often neglects to take the needs of their mobile users into consideration. Older pages (that were set up before everyone started using smartphones) often completely disregard the need for portability.

When you use CSS, please:

* Think about performance. Styling can affect performance and make your page slower to load. A small phone in your hand will take longer to load a complex page than the quad-core desktop monster you may have under your desk.
* Remember that some screens are very small and long rather than wide.
* Try to contain each element (Infobox, Navbox, etc.) in a template, and style it with a CSS class.
* Don't feel you need to reinvent the wheel. Remember that some elements, like Portable Infoboxes, already have built in selector classes. Other elements like Navboxes can use classes to duplicate parts of your Portable Infobox style for consistency.
* The worst sin (from a wiki server's point of view) is to use inline styles or tables for layout of full pages. In practice, this is like rearranging the furniture in the home of a blind person (without their knowledge) and replacing it with deadly traps and pitfalls. Rather than doing this, consider using block divisions (AKA <div>) with a class.

## It's not all about the looks

Many users only think about how the page will look when they style their templates and content, but not about whether theirs is the most elegant and efficient code. They neglect to consider that other users may have to understand and work with their code when they are gone.

The most common examples of misused code are infoboxes built as tables instead of with infobox templates, and definition lists (semicolon or ; in wikitext) used to represent quotes or dialog. A device trying to interpret what kind of content this is won't recognize a quote as a quote, and won't realize that the table is supposed to be an infobox. This can result in incorrectly displayed pages. And these are just a few examples - there are many other ways to hide the true nature of a part of your page with CSS.

A person looking at a page may not much care if an infobox is made up of a table or an infobox template, because both look roughly the same. To a machine, such as search engine crawlers, this type of role-vs-code mismatch can be confusing and negatively affect your search engine ranking. Where very complex markup is involved, content may even be hidden entirely.

## But I can't do what I want to do without inline styles!

Many users achieve amazing results with the raw coding tools available on Fandom: wikitext and CSS. It may be messy and difficult, but through trial and error, and possibly some tricks, they achieve the result they were looking for. However, if too many tricks and portability violations are necessary to make your page do what you want it to do, this might be a sign that Fandom is missing a feature. Tell us about it!

There is a team focused on the contribution experience at Fandom, and they'd like to hear what tools you could use to make styling easier for you. What do you want to achieve that you just can't seem to do in a mobile-friendly way? Let us know what wikitext/CSS/JS hacks you may have put together. Chances are if you're struggling with something, so are others! You can find a forum that reaches this team at Portability Development and Suggestions.

## Using site-wide style sheets: MediaWiki:Wikia.css

To make your wiki more portable, put your CSS into your community's stylesheet at MediaWiki:Wikia.css. A stylesheet serves the same purpose as inline styles, but serves an entire community, not just one article or template. It provides styling rules to content, no matter what page it’s on. That way, your styling code can't confuse mobile devices with rules those devices can't use.

## Do you still have questions or concerns about this?

You can always talk to other users at the Help Board, or contact the Portability Hub admins and Fandom Staff. They're always eager to answer you directly or point you to the right place.

## See also

* Requests for comment/Deprecating inline styles#Known problematic use of inline styles

## References

1. ↑ Inline styles and why they are considered harmful for accessibility. Available at:http://web.archive.org/web/20160511135410/http://www.nomensa.com/blog/2011/inline-styles-and-why-they-are-considered-harmful-accessibility.