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. 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:

left/right	begin/end	browser compatibility
text alignment
text-align: left text-align: right	text-align: start text-align: end
padding, margin, border
padding-left padding-right	padding-inline-start padding-inline-end	Gecko 41+
border-left border-right	border-inline-start border-inline-end	Gecko 41+
margin-left margin-right	margin-inline-start margin-inline-end	Gecko 41+
absolute positioning
left right	offset-inline-start offset-inline-end	Gecko 41+
float positioning
float: left float: right	float: inline-start float: inline-end	(not yet supported)

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