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 (once for XP, once for Vista/7)
• 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 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

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
• Assume ="true" in attribute selectors
  • Example: Use option[checked], not option[checked="true"]
• Use longhand versions of properties so it's clear what you're changing.
  • Example: Use border-color: red, not border: red;

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

Theme values:

• Use them 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

Lists of 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

Text Direction:

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

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)