DevTools/CSSTips

To make Dao's life easier (and optimize our reviews), make sure that your code follows these rules:

(please contribute)

• Must read "Writing Efficient CSS": https://developer.mozilla.org/en/CSS/Writing_Efficient_CSS;
• Code must be test in RTL. Use the Force RTL extension;
  • ... or you can go to about:config and set intl.uidirection.en to rtl.
• For RTL compatibility, for margins, padding and borders, don't use *-left or *-right but *-start and *-end);
• When there is no special RTL-aware property (eg. float: left|right) available, add the pseudo :-moz-locale-dir(ltr|rtl)
• Remember that while a tab content's scrollbar still shows on the right in RTL, an overflow scrollbar will show on the left.
• Write "padding: 0 3px 4px;" instead of "padding: 0 3px 4px 3px;". This makes it more obvious that the padding is symmetrical (so RTL won't be an issue);
• Usually, if margin or padding has 4 values, something is wrong. If the left and right values are asymmetrical, you're supposed to use -start and -end. If the values are symmetrical, so use only 3 values (see previous tip);
• replace 0px/0em/… with 0;
• some values depend on the OS theme. Use template (?) values (for example: -moz-dialog or @toolbarbuttonCornerRadius@) (FIXME Is there a list somewhere?);
• Avoid magic numbers, privilege automatic sizing;
• In a selector: s/[checked="true"]/[checked];
• Don't use shorthands to overwrite a property;
• Make sure you know why you use !important (add a comment if not obvious);
• Always add a space before !important;
• Use :empty to match a node that doesn't have children;
• Make sure your code is present for the 3 platforms, and that files are referenced twice in Windows' jar.mn;
• Instead of using margin:0, Add the plain class to the node;
• new line after ;;
• add a space after each comma, except within color functions: -moz-linear-gradient(top, black 1px, rgba(255,255,255,0.2) 1px);
• Descendent selector should be avoided;
• Functional stuff (for example, toggling the display property based on application state) should be in content css rather than theme css.
• Avoid picking arbitrary colors without signoff, recommendation or consultation with UX.
  • Wherever possible use one of the constants: e.g., @toolbarShadowColor@, @toolbarHighlight@, etc.