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 7: | Line 7: | ||
* Functional stuff (for example, toggling the display property based on application state) should be in content css rather than theme css | * 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) | * Avoid <tt>!important</tt> and make sure it's obvious why you're using it (maybe with a comment if not obvious) | ||
* Avoid magic numbers, prefer automatic sizing | * Avoid magic numbers, prefer automatic sizing | ||
== Formatting == | == Formatting == | ||
| Line 37: | Line 19: | ||
Also: | Also: | ||
* Omit units on 0 values | * Omit units on 0 values | ||
* 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> | ** Example: Use <tt>margin: 0;</tt>, not <tt>margin: 0px;</tt> | ||
* Add a space after each comma, '''except''' within color functions | |||
** Example: <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> | ||
* Don't use shorthands to overwrite a property | |||
* Assume <tt>="true"</tt> in attribute selectors | |||
** Example: Use <tt>option[checked]</tt>, not <tt>option[checked="true"]</tt> | |||
== Performance == | |||
* Read "Writing Efficient CSS": https://developer.mozilla.org/en/CSS/Writing_Efficient_CSS | |||
* Descendent selector should be avoided | |||
== The Mozilla 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?) | |||
* 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 | |||
== Localization == | == Localization == | ||