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

• em, rem, %
• You don't have to add any units, if the value is 0

body {
  font-size: 10px;
}

  1rem = 10px
  1px = 0.1rem

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

 /*single selector*/
 .gaia {
  ...
 }

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

Comments

Describe a section of code

/**
 * Your Comment Here.
 */

Shorter inline comments may be added after a property, preceded with a space

... {
  padding-left: 2em; /* dir="ltr" */
}

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.

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

Background

• color is first
• image path without any quotes
• background repeat
• background position with % or rem
• Don't use shorthand property when you change only a single value(except when you need to override a rules)

... {
  background: #fff url(images/default.png) no-repeat 3rem 100%;
  padding: 0 0 0 5rem;
}

Multiple Backgrounds

... {
  background: url(images/image-3.png),
              url(images/image-2.png),
              url(images/image-1.png),
              #fff;
}

Gradients

... {
  background: linear-gradient(to bottom, #fff, #000);
}

Borders

... {
  border: 0.1rem solid #fff;
}

Colors

... {
  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 */
}

Direction (RTL/LTR and Bidi)

Rules that are direction-specific (e.g LTR) should have the same specificity as their RTL counterparts. Rules with an implicit direction should be made explicit using either the dir attribute selector (html[dir="ltr|rtl"]), or the :-moz-dir(rtl) pseudo-class. RTL and LTR -specific rules should always be grouped together in the same stylesheet to simplify maintenance.

html[dir="ltr"] .foo {
  left: 0;
}
html[dir="rtl"] .foo {
  right: 0;
}