DevTools/CSSTips: Difference between revisions

DevTools/CSSTips (view source)

Revision as of 16:12, 31 October 2011

623 bytes removed , 31 October 2011

no edit summary

Paul

Confirmed users

591

edits

@@ Line 7: / Line 7: @@
 * 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?);
 * Avoid magic numbers, privilege automatic sizing;
-* In a selector: <tt>s/[checked="true"]/[checked]</tt>
+* In a selector: <tt>s/[checked="true"]/[checked]</tt>;
+* Don't use shorthands to overwrite a property;
-> border: 1px solid hsla(210,8%,5%,.6);
+* Make sure you know why you use <tt>!important</tt> (add a comment if not obvious);
-> use border-color
+* Always add a space before !important;
-Don't use shorthands to overwrite a property, use the actual property name.
+* Use <tt>:empty</tt> to match a node that doesn't have children;
+* Make sure your code is present for the 3 platforms, and that files are referenced twice in the Windows' jar.mn;
-Make sure you know why you use !important (add a commend if really needed).
+* Instead of using <tt>margin:0</tt>, Add the <tt>plain</tt> to the node;
+* new line after <tt>;</tt>;
-Add a space to prefix !important.
+* 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>;
+* Descendent selector should be avoided;
-nit: "0" instead of "0px"
+* Functional stuff should be in content;
->+#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.

DevTools/CSSTips: Difference between revisions

DevTools/CSSTips (view source)

Revision as of 16:12, 31 October 2011

Navigation menu

Search