DevTools/CSSTips

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

Basics

• Make sure your code is present for the 3 platforms, and that files are referenced twice in Windows' jar.mn
• Make sure each file starts with the standard copyright header
• Functional stuff (for example, toggling the display property based on application state) should be in content css rather than theme css
• Avoid !important and make sure it's obvious why you're using it (maybe with a comment if not obvious)

Environment

• Some values depend on the OS theme. Use template (?) values (for example: -moz-dialog or @toolbarbuttonCornerRadius@) (FIXME Is there a list somewhere?)
• Use :empty to match a node that doesn't have children
• Instead of using margin:0, Add the plain class to the node
• Avoid picking arbitrary colors without signoff, recommendation or consultation with UX.
  • Wherever possible use one of the constants: e.g., @toolbarShadowColor@, @toolbarHighlight@, etc

Performance

• Read "Writing Efficient CSS": https://developer.mozilla.org/en/CSS/Writing_Efficient_CSS
• Descendent selector should be avoided

Style

• Don't use shorthands to overwrite a property
• Avoid magic numbers, prefer automatic sizing
• Use option[checked] rather than option[checked="true"]

Formatting

In general the formatting looks like this:

selector,
alternate-selector {
  property: value;
  other-property: other-value;
}

Also:

• Omit units on 0 values. E.g., margin: 0; instead of margin: 0px;
• Add a space after each comma, except within color functions: -moz-linear-gradient(top, black 1px, rgba(255,255,255,0.2) 1px)
• Always add a space before !important

Localization

• 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)

Code Smells

• 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)