DevTools/CSSTips: Difference between revisions

DevTools/CSSTips (view source)

Revision as of 16:07, 31 October 2011

708 bytes added , 31 October 2011

no edit summary

Paul

Confirmed users

591

edits

@@ Line 1: / Line 1: @@
-https://developer.mozilla.org/en/CSS/Writing_Efficient_CSS
+* Must read "Writing Efficient CSS": https://developer.mozilla.org/en/CSS/Writing_Efficient_CSS;
-Is all of this tested with RTL? (add link to extension)
+* Code must be test in RTL. Use the [https://addons.mozilla.org/en-US/firefox/addon/force-rtl/ Force RTL extension];
+* For RTL compatibility, for margins, padding and borders, don't use <tt>*-left</tt> or <tt>*-right</tt> but <tt>*'''-start'''</tt> and *'''-end''');
-s/left/start
+* 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);
-Same for padding: 3px 4px 2px 3px;
+* 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 <tt>-start</tt> and <tt>-end</tt>. If the values are symmetrical, so use only 3 values (see previous tip);
-if 4 values for padding, not normal (use end/start, or same values)
+* replace <tt>0px/0em/…</tt> by <tt>0</tt>;
-s/0px/0
+* some values depends on the OS theme. Use template (?) values for (<tt>-moz-dialog</tt> or <tt>@toolbarbuttonCornerRadius@</tt>) (FIXME Is there a list somewhere?);
-border-radius: @toolbarbuttonCornerRadius@ on mac.
+* Avoid magic numbers, privilege automatic sizing;
-font-size: 12px; No magic numbers. No relative unit?
+* In a selector: <tt>s/[checked="true"]/[checked]</tt>
-s/[checked="true"]/[checked]
 > border: 1px solid hsla(210,8%,5%,.6);

DevTools/CSSTips: Difference between revisions

DevTools/CSSTips (view source)

Revision as of 16:07, 31 October 2011

Navigation menu

Search