Mozilla Theme CSS Tips

Erratic Wisdom shares five tips for maintaining your stylesheets [via derkilicious]. And here are my thoughts on those tips as they apply to CSS for Mozilla themes.

1. Indent descendant and related rules. I couldn’t imagine maintaining an entire theme without structurally-indented stylesheets. They mate perfectly with the XUL hierarchy. I’ll often insert empty selectors to fill in the structure of the stylesheet so it’s easier to follow and debug later.
2. Use shorthand properties. Using shorthand properties may cut down on file size, but i sometimes find it easier to test and debug with full rules written out so i can change, remove, or comment out individual properties line by line. I’ll also sometimes use a shorthand group and then follow it with a specific longhand property which overrides the previous rule. File size is less of an issue with XUL themes since the stylesheets are used locally and don’t have to be downloaded, so i’m less concerned about being “efficient” in this way.
3. Divide your stylesheet into sections. Firefox’s defualt theme stylesheets are often terribly convoluted from years of patching. Grouping things together logically keeps you organized and helps prevent redundant or conflicting style rules. Using commented “headers” (or flags) to break up a sheet into logical sections goes hand-in-hand with the first tip. You can have the cleverest code in the land, but what good is it if you can’t read it when it’s time to update? When scanning thousand-line sheets you need these visual speed bumps to quickly get your bearings. I even have multiple levels of headers for sections, subsections, etc. Doesn’t matter how you format it as long as you’re consistent. Just be careful with all these comments—one little slash can drive you crazy.
4. Let the cascade flow. This tip about the cascade is doubly important with XUL themes. Writing efficient top-down CSS makes it easier to effect changes throughout the stylesheet and the entire theme. Keep the lowest common denominators in the top-level base elements, then style variants using more and more specific selectors and properties down the line. On the large scale, having well-defined global element styles goes a long way towards building a strong theme. You’ll spend less time defining styles for browser and other features if they’re properly inheriting styles from the global set. For example, toolbarbuttons are used everywhere and you can inject styles that they’ll all inherit in global/toolbarbutton.css, instead of styling each instance scattered throughout the UI. That makes for efficient CSS and consistent theme design.
5. Organization strategies. The fifth tip wasn’t exactly a tip—more of a summary with some suggestions for how to use the preceding tips.

While i’m at it, i’ll go ahead and add a few theme-specific tips of my own.

• Comment, comment, comment. The inner-workings of Mozilla are mysterious. Your style rules could be even more mysterious. Write comments. Do it now. You won’t know remember later.
• Optimize your stylesheets. The quality of your CSS rules can have a real affect on how fast your theme is rendered. Optimize your stylesheets using the guidelines in the Writing Efficient CSS document at the Mozilla Developer Center.
• @import. Break out large sections to external stylesheets with @import. I moved all my bookmark styles from browser/browser.css to browser/bookmarks.css which i @import back into browser.css. Functionally exactly the same, but easier to manage as separate files.
• The underscore hack. This is probably my favorite. The quickest way to disable a property is to tag an underscore (_) to the front of it. Gecko sees the underscored properties and doesn’t recognize them so they are ignored. Saves so much time when testing code or trying to isolate bugs—you can leave the properties in place and simply “turn them off” without deleting or changing them. And it’s way quicker than trying to wrap stuff in comments. Plus, they visually stand out in the stylesheets, so you can easily identify which properties are disabled. Use this with longhand properties for very flexible style testing. Beware—last time i checked, this trick doesn’t work in Internet Explorer because it incorrectly parses the underscored properties as normal.
• Identify with big bold color. Use big, off-colored borders or backgrounds to help identify or find the selectors for elements you want to target.

An example snippet showing some of the ideas mentioned above:

/* =====| about.css |===== ===== */
 /* styles for extension/theme About dialogs */

#genericAbout {
  width: 30em;
  }

#clientBox {
  }

	#extensionName {
	  font-size: 1.25em;
	  font-weight: bold;
	  }

	#extensionVersion {
	  margin-left: 4ex;
	  }
		#extensionHomepage {
		 /* Visit Home Page links */
		  margin-right: 0;
		  padding-left: 1px; /* so outline doesn't overlap text */
		  _background-color: magenta;
		  cursor: pointer;
		  }

technorati tags: CSS, Mozilla, Firefox theme, theme, tips, XUL