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)
• Avoid magic numbers, prefer automatic sizing

Formatting

In general the formatting looks like this:

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

Also:

• Omit units on 0 values
  • Example: Use margin: 0;, not margin: 0px;
• Add a space after each comma, except within color functions
  • Example: -moz-linear-gradient(top, black 1px, rgba(255,255,255,0.2) 1px)
• Always add a space before !important
• Don't use shorthands to overwrite a property
• Assume ="true" in attribute selectors
  • Example: Use option[checked], not option[checked="true"]

Performance

• Read Writing Efficient CSS
• Use an iframe where possible so your rules are scoped to the smallest possible set of nodes
• If your CSS is used in browser.xul, you need to take special care to performance:
  • Descendent selector should be avoided
  • If possible find ways to use only id selectors, class selectors and selector groups

The Mozilla Environment

Pre-defined classes:

• Use plain in place of margin: 0

• Use theme values where possible
  • Example: border-radius: @toolbarbuttonCornerRadius@, not border-radius: 3px
• Where a theme value doesn't fit, make sure you have buy-in from UX

Theme values:

• System Colors
• System Fonts
• CSS Extensions
• Also shared.inc.html has some values (but there must be a better reference?)

Tips

• Use :empty to match a node that doesn't have children

Localization

• For margins, padding and borders, use start/end rather than left/right
  • Example: Use margin-start: 3px; not margin-left: 3px
• When there is no special RTL-aware property (eg. float: left|right) available, use 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)

• For testing:
  • Use the Force RTL extension
  • Or go to about:config and set intl.uidirection.en to rtl

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)