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: | ||
* 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 <tt>!important</tt> and make sure it's obvious why you're using it (maybe with a comment if not obvious) | |||
* | Environment: | ||
* Code must be test in RTL. Use the [https://addons.mozilla.org/en-US/firefox/addon/force-rtl/ Force RTL extension] | * 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 | |||
* Instead of using <tt>margin:0</tt>, Add the <tt>plain</tt> 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 <tt>option[checked]</tt> rather than <tt>option[checked="true"]</tt> | |||
Formatting: | |||
* Omit units on 0 values. E.g., margin: 0; instead of margin: 0px; | |||
* Replace <tt>0px/0em/…</tt> with <tt>0</tt> | |||
* New line after <tt>;</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> | |||
Localization: | |||
* 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. | ||
* For RTL compatibility, for margins, padding and borders, don't use <tt>*-left</tt> or <tt>*-right</tt> but <tt>*-start</tt> and <tt>*-end</tt>) | * For RTL compatibility, for margins, padding and borders, don't use <tt>*-left</tt> or <tt>*-right</tt> but <tt>*-start</tt> and <tt>*-end</tt>) | ||
* When there is no special RTL-aware property (eg. float: left|right) available, add the pseudo :-moz-locale-dir(ltr|rtl) | * 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 | * 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) | |||
* 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 <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) | 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) | |||