Confirmed users
295
edits
DevTools/CSSTips: Difference between revisions
Jump to navigation
Jump to search
no edit summary
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
To make Dao's life easier (and optimize our reviews), make sure that your code follows these rules: | To make Dao's life easier (and optimize our reviews), make sure that your code follows these rules: | ||
Basics | == Basics == | ||
* Make sure your code is present for the 3 platforms, and that files are referenced twice in Windows' jar.mn | * 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 | * Make sure each file starts with the standard copyright header | ||
| Line 7: | Line 8: | ||
* Avoid <tt>!important</tt> and make sure it's obvious why you're using it (maybe with a comment if not obvious) | * Avoid <tt>!important</tt> and make sure it's obvious why you're using it (maybe with a comment if not obvious) | ||
Environment | == Environment == | ||
* Some values depend on the OS theme. Use template (?) values (for example: <tt>-moz-dialog</tt> or <tt>@toolbarbuttonCornerRadius@</tt>) (FIXME Is there a list somewhere?) | * Some values depend on the OS theme. Use template (?) values (for example: <tt>-moz-dialog</tt> or <tt>@toolbarbuttonCornerRadius@</tt>) (FIXME Is there a list somewhere?) | ||
* Use <tt>:empty</tt> to match a node that doesn't have children | * Use <tt>:empty</tt> to match a node that doesn't have children | ||
| Line 14: | Line 16: | ||
** Wherever possible use one of the constants: e.g., @toolbarShadowColor@, @toolbarHighlight@, etc | ** Wherever possible use one of the constants: e.g., @toolbarShadowColor@, @toolbarHighlight@, etc | ||
Performance | == Performance == | ||
* Read "Writing Efficient CSS": https://developer.mozilla.org/en/CSS/Writing_Efficient_CSS | * Read "Writing Efficient CSS": https://developer.mozilla.org/en/CSS/Writing_Efficient_CSS | ||
* Descendent selector should be avoided | * Descendent selector should be avoided | ||
Style | == Style == | ||
* Don't use shorthands to overwrite a property | * Don't use shorthands to overwrite a property | ||
* Avoid magic numbers, prefer automatic sizing | * Avoid magic numbers, prefer automatic sizing | ||
* Use <tt>option[checked]</tt> rather than <tt>option[checked="true"]</tt> | * Use <tt>option[checked]</tt> rather than <tt>option[checked="true"]</tt> | ||
Formatting: | == 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; | * Omit units on 0 values. E.g., margin: 0; instead of margin: 0px; | ||
* Add a space after each comma, '''except''' within color functions: <tt>-moz-linear-gradient(top, black 1px, rgba(255,255,255,0.2) 1px)</tt> | * Add a space after each comma, '''except''' within color functions: <tt>-moz-linear-gradient(top, black 1px, rgba(255,255,255,0.2) 1px)</tt> | ||
* Always add a space before <tt> !important</tt> | * Always add a space before <tt> !important</tt> | ||
Localization | == Localization == | ||
* Code must be test in RTL. Use the [https://addons.mozilla.org/en-US/firefox/addon/force-rtl/ Force RTL extension] | * Code must be test in RTL. Use the [https://addons.mozilla.org/en-US/firefox/addon/force-rtl/ Force RTL extension] | ||
** ... or you can go to about:config and set <tt>intl.uidirection.en</tt> to rtl. | ** ... or you can go to about:config and set <tt>intl.uidirection.en</tt> to rtl. | ||
| Line 38: | Line 50: | ||
* 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) | * 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 | == Code Smells == | ||
* Usually, if <tt>margin</tt> or <tt>padding</tt> has 4 values, something is wrong. If the left and right values are asymmetrical, you're supposed to use <tt>-start</tt> and <tt>-end</tt>. If the values are symmetrical, so use only 3 values (see previous tip) | * Usually, if <tt>margin</tt> or <tt>padding</tt> has 4 values, something is wrong. If the left and right values are asymmetrical, you're supposed to use <tt>-start</tt> and <tt>-end</tt>. If the values are symmetrical, so use only 3 values (see previous tip) | ||