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)

Many UI elements are have to be mirrored for languages written Right-To-Left. This comes for free with flex-box and other inline element layouts. However, if you need to use positioning or other explicit styling and layout, here’s how you can make it easier.

Use the same specificity for LTR and RTL

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;
}

Use direction-sensitive rules

Many CSS rules that include a `left` or `right` keyword can be written with `start` or `end` instead:

Warning: in most cases, you don’t want to apply these direction-sensitive rules to HTML elements carrying a dir="auto" attribute because the layout would be modified by the content direction.

margin, padding, border: do not use 4-value shorthands

Beware of the shorthands on margin/padding/border rules:

margin: 1rem;                /* OK: start and end margins are set to 1rem */
margin: 1rem 2rem;           /* OK: start and end margins are set to 2rem */
margin: 1rem 2rem 3rem;      /* OK: start and end margins are set to 2rem */
margin: 1rem 2rem 3rem 4rem; /* direction-specific! */

Shorthands with 1, 2 or 3 values are BiDi-proof; shorthands with 4 values are not.

As an example, rather than using:

.myClass {
  padding: 1rem 2rem 3rem 4rem;
}

you should use:

.myClass {
  padding: 1rem 2rem 3rem;
  padding-inline-start: 4rem;
}

or, if the target element has a dir="auto" attribute (or if your browser doesn’t support -inline-start):

.myClass {
  padding: 1rem 2rem 3rem;
}
html[dir="ltr"] .myClass {
  padding-left: 4rem;
}
html[dir="rtl"] .myClass {
  padding-right: 4rem;
}