View source for Gaia/CSS Guidelines

==Indentation==
* No tabs.
* Indent by two spaces.
* No (trailing spaces) spaces that appears at the end of a string.

==Style==
* Use lowercased-and-hyphen delimited classes and ids.

==Units==
* <b>em</b>, <b>rem</b>, <b>%</b>
* <b>You don't have to add any units, if the value is 0</b>
<pre>
body {
  font-size: 10px;
}

  1rem = 10px
  1px = 0.1rem
</pre>

==Selectors==

* end in an opening brace
* be closed with a closing brace on a separate line without indentation
* Multiple selectors should each be on a single line

<pre>
 /*single selector*/
 .gaia {
  ...
 }

 /*multiple selectors*/
 .b2g,
 .gaia,
 .firefox-os {
  ...
 }
</pre>

==Comments==

Describe a section of code

<pre>
/**
 * Your Comment Here.
 */
</pre>


Shorter inline comments may be added after a property, preceded with a space
  
<pre>
... {
  padding-left: 2em; /* dir="ltr" */
}
</pre>

==Properties==

* All properties should be on the following line after the opening brace.
* have a single space before the property value
* allways add a semi-colon at the end
* multiple values - each value should be separated with a space.

<pre>
.b2g {
  color: #efefef;
  font-size: 0.9rem;
  font-family: Open Sans, sans-serif;
}
</pre>

==Background==

* color is first
* image path without any quotes
* background repeat
* background position with <b>%</b> or <b>rem</b>
* Don't use shorthand property when you change only a single value(except when you need to override a rules)
<pre>
... {
  background: #fff url(images/default.png) no-repeat 3rem 100%;
  padding: 0 0 0 5rem;
}
</pre>

===Multiple Backgrounds===
<pre>
... {
  background: url(images/image-3.png),
              url(images/image-2.png),
              url(images/image-1.png),
              #fff;
}
</pre>

===Gradients===
<pre>
... {
  background: linear-gradient(to bottom, #fff, #000);
}
</pre>

==Borders==
<pre>
... {
  border: 0.1rem solid #fff;
}
</pre>

==Colors==
<pre>
... {
  color: #0f0; /* HEX color - defined using the 3-character dash notation */
  color: #00ff00 /* HEX color - defined using the 6-character dash notation */
  color: rgba( 34, 12, 64, 0.3);  /* rgba(R,G,B,a) - using only for transparent colors */
}
</pre>