Confirmed users
66
edits
DevTools/CSSTips: Difference between revisions
Jump to navigation
Jump to search
Updating page to be more accurate with latest code base
(→Content or Theme CSS: no more *stripe) |
(Updating page to be more accurate with latest code base) |
||
| Line 1: | Line 1: | ||
This page is for information about CSS used by the DevTools toolbox. Wondering about the Dev Edition theme? See this page for more information about the [https://wiki.mozilla.org/DevTools/Developer_Edition_Theme Developer Edition theme] | |||
== Basics == | == Basics == | ||
First, you can find existing DevTools CSS at https://dxr.mozilla.org/mozilla-central/source/browser/themes/shared. Here are some basic tips that can optimize reviews if you are changing CSS. | |||
* Split your CSS into theme and content files (see below) | * Split your CSS into theme and content files (see below) | ||
* Avoid <tt>!important</tt> but if you have to use it, make sure it's obvious why you're using it (maybe with a comment) | * Avoid <tt>!important</tt> but if you have to use it, make sure it's obvious why you're using it (maybe with a comment) | ||
* Avoid magic numbers, prefer automatic sizing | * Avoid magic numbers, prefer automatic sizing | ||
| Line 18: | Line 17: | ||
=== Testing === | === Testing === | ||
CSS changes should be | CSS changes to the toolbox should generally be similar across platforms since they used a shared implementation, but there can still be differences worth checking out. Check major changes on Windows, OSX and Ubuntu. | ||
== Formatting == | == Formatting == | ||
| Line 42: | Line 40: | ||
** Example: Use <tt>border-color: red</tt>, not <tt>border: red;</tt> | ** Example: Use <tt>border-color: red</tt>, not <tt>border: red;</tt> | ||
Naming Standards | Naming Standards for class names: | ||
* lower-case-with-dashes is the most common | |||
* lower-case-with-dashes | * But camelCase is also used sometimes. It makes sense to first try to fit in with code around, and if there is doubt or if isn't anything to fit in with to use lower-case-with-dashes. | ||
* camelCase is also used | |||
== Performance == | == Performance == | ||
| Line 130: | Line 126: | ||
* [https://developer.mozilla.org/en/CSS/font#Mozilla_Extensions System Fonts] | * [https://developer.mozilla.org/en/CSS/font#Mozilla_Extensions System Fonts] | ||
* [https://developer.mozilla.org/en/CSS_Reference/Mozilla_Extensions CSS Extensions] | * [https://developer.mozilla.org/en/CSS_Reference/Mozilla_Extensions CSS Extensions] | ||
== Tips == | == Tips == | ||