Help:CSS best practices

Thinking of customizing your community's design via the wonders of CSS? Here are a few guidelines to help you do so with a minimum of fuss.

Use the Theme Designer!
The simplest way to customize your community and ensure that any tweaks we make to the site layout is to use FANDOM's Theme Designer feature.


 * ThemeDesigner gives you quick and easy customization abilities, such as letting you change the logo, colors, and background of your community.
 * Read more about it on Help:Theme designer, and visit Special:ThemeDesigner on your community.

Avoid clashing or lurid colors
This especially applies to the content area.


 * Not everyone's eyesight works the same as yours might. A significant number of people have issues with degraded eyesight and color blindness.
 * Different device screens also behave differently. The colors you see on your own might not work quite as well on another.

Of course, this is not easy to judge when you're working on your theme, so a few particular ideas to follow are:
 * Try to ensure good contrast between text and the background, such as dark text on a light background.
 * Background images are cool, but not if you can't read the text on top of them! Note that the Theme Designer includes a simple transparency slider if you want some of the overall background to show through the skin.
 * Try not to make anything too small, especially the main text area.

Keep the design simple
There may be a temptation to cover your community with icons, animations and colors, but this can be very distracting for someone visiting the community.

Additionally, remember that FANDOM has a fluid width. What you see might not exactly match what another user sees on a differently sized screen. For example, investigate specifying widths as percentages instead of as absolute values. This will reduce the likelihood of large gaps or overlapping elements appearing.

Write readable code
Don't forget that you might not be the only person who ever customizes the community, so try to ensure that the code you write can be read and understood by someone else. Spacing and clear names are great methods to help with this.

Additionally, add comments to code that may not be easily identifiable as to what it does. You can do this by wrapping some explanatory text in /* and */ markers above the relevant CSS. For example:

/* I am a comment */

Useful links

 * Help:Customization policy - FANDOM's policy on allowed customizations
 * Help:Wikitext/CSS - Local help page about Inline CSS modifications. (note: generally recommended against, but could help to understand or build templates.)
 * W3Schools - an online guide to CSS
 * CSS-Tricks - an online CSS code library of supported codes
 * The W3C CSS Validation Service - this helps check for code errors, similar to Special:CSS itself.

Further Help & Feedback
de:Hilfe:Beste CSS-Praktiken es:Ayuda:Mejores prácticas en CSS fi:Ohje:CSS:n parhaat käytännöt fr:Aide:Bonnes pratiques du CSS ja:ヘルプ:CSSベストプラクティス pl:Pomoc:Najlepsze praktyki w CSS pt:Ajuda:Melhores práticas de CSS ru:Справка:Советы по использованию CSS uk:Довідка:Поради щодо використання CSS vi:Trợ giúp:Thực hành CSS tốt nhất zh:Help:CSS 最佳實踐