DevTools/CSSTips: Difference between revisions

Jump to navigation Jump to search

DevTools/CSSTips (view source)

Revision as of 23:49, 29 November 2011

111 bytes added ,  29 November 2011
no edit summary
No edit summary
Line 7: Line 7:
** 3 added files: <tt>/browser/themes/[gnome|pin|win]stripe/browser/devtools/foo.css</tt>
** 3 added files: <tt>/browser/themes/[gnome|pin|win]stripe/browser/devtools/foo.css</tt>
** 4 changes to the 3 files: <tt>/browser/themes/[gnome|pin|win]stripe/browser/jar.mn</tt>
** 4 changes to the 3 files: <tt>/browser/themes/[gnome|pin|win]stripe/browser/jar.mn</tt>
* Avoid <tt>!important</tt> 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
* Avoid setting styles in JavaScript. It's generally better to set a class and then specify the styles in CSS
* <tt>classList</tt> is generally better than <tt>className</tt>. There's less chance of over-writing an existing class
=== Boilerplate ===
* Make sure each file starts with the standard copyright header (see [https://www.mozilla.org/MPL/boilerplate-1.1/ License Boilerplate])
* Make sure each file starts with the standard copyright header (see [https://www.mozilla.org/MPL/boilerplate-1.1/ License Boilerplate])
** For work funded by Mozilla, the 'Initial Developer of the Original Code' should be 'The Mozilla Foundation'
** For work funded by Mozilla, the 'Initial Developer of the Original Code' should be 'The Mozilla Foundation'
Line 12: Line 19:
** The first letter of contributors names should be under the 'n' of 'contributors'
** The first letter of contributors names should be under the 'n' of 'contributors'
** The original author of the code should have the string ' (original author)' after his/her email address
** The original author of the code should have the string ' (original author)' after his/her email address
* 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> but if you have to use it, make sure it's obvious why you're using it (maybe with a comment)
=== Testing ===
* Avoid magic numbers, prefer automatic sizing, but add comments when the choice (i.e. complex DOM math) is worse than just hard coding
 
* Avoid setting styles in JavaScript. It's generally better to set a class and then specify the styles in CSS
CSS changes should be tested visually on:
* <tt>classList</tt> is generally better than <tt>className</tt>. There's less chance of over-writing an existing class
* 4 platforms (XP/7/OSX/Ubuntu)
* A browser with the default theme, a dark theme and a light theme (for example [https://addons.mozilla.org/en-US/firefox/addon/simplewhite/ light] / [https://addons.mozilla.org/en-US/firefox/addon/nasa-night-launch/ dark])


== Formatting ==
== Formatting ==
JoeWalker
Confirmed users
295

edits

Retrieved from "https://wiki.mozilla.org/Special:MobileDiff/374304"

Navigation menu