Help:CSS best practices

Thinking of customizing your community's design? Here are a few things to think about when mapping out a CSS strategy. The basic notion? Make your wiki a welcoming place for the broadest possible range of editors and readers.

Use the theme designer
The simplest way to customize your community is to use FANDOM's theme designer. It lets you easily change your site's base color palette, wordmark, favicon and background.

Be careful with colors
Avoid low-contrast, clashing or lurid colors — especially in the content area. You want people to be able to easily read your articles so that they'll stick around longer.

Remember:
 * Not everyone's eyesight works the same as yours. A significant number of people have issues with degraded eyesight and color blindness.
 * Different device screens behave differently. The colors you see on your own might not work quite as well on another.
 * Have good contrast between text and the background.
 * Background images are cool, but not if you can't read the text on top of them. So don't go crazy with theme designer's transparency slider if you have a busy background.
 * Try not to make font sizes too small, especially in the main text area.

Keep it 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. Make sure your design fully works by varying the width of your browser during testing.

Write readable code
Write code that can be read and understood easily. Since your CSS will almost certainly be read by others at some point:
 * annotate it with comments like
 * give your custom classes and IDs *understandable names*. If it makes a box around something, consider calling it, not
 * add in spacing and indentation
 * organise the code logically, keeping code that affects the same part of the wiki together

Useful links

 * Help:Customization policy - FANDOM's policy on allowed customizations
 * 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 and 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 最佳實踐