DevTools/CSSTips
- Must read "Writing Efficient CSS": https://developer.mozilla.org/en/CSS/Writing_Efficient_CSS;
- Code must be test in RTL. Use the Force RTL extension;
- For RTL compatibility, for margins, padding and borders, don't use *-left or *-right but *-start and *-end);
- 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 a margin or padding has 4 values, something is wrong. If the left and right values are asymmetrical, you're supposed to use -start and -end. If the values are symmetrical, so use only 3 values (see previous tip);
- replace 0px/0em/… by 0;
- some values depends on the OS theme. Use template (?) values for (-moz-dialog or @toolbarbuttonCornerRadius@) (FIXME Is there a list somewhere?);
- Avoid magic numbers, privilege automatic sizing;
- In a selector: s/[checked="true"]/[checked]
> border: 1px solid hsla(210,8%,5%,.6); > use border-color Don't use shorthands to overwrite a property, use the actual property name.
Make sure you know why you use !important (add a commend if really needed).
Add a space to prefix !important.
nit: "0" instead of "0px"
>+#highlighter-nodeinfobar-container { >+ height: 48px; >+} What is this needed for? In general, automatic sizing is preferable to magic numbers.
Can you use :empty?
make sure code is everywhere: x3 + 1.
Instead of removing the margin in the themes, can these nodes have the "plain" CSS class?
>+#inspector-end-resizer { >+ width: 12px; height: 8px; new line after ;
add a space after each comma, *except* within color functions:
-moz-linear-gradient(top, black 1px, rgba(255,255,255,0.2) 1px)
>+ margin: 7px 7px 8px 7px;
margin: 7px 7px 8px; (affects all themes)
By the way, 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).
Always add a space before !important.
I'm asking because the descendent selector should be avoided. https://developer.mozilla.org/en/Writing_Efficient_CSS#Avoid_the_descendant_selector
Functional stuff should be in content. pointer-events and z-index probably fall into this category.