css.textile

CSS Style

English Only

You shouldn’t write any non-english characters including comments.

Required Comments

Each file must begin with a comment block in the following format:

/*                                                                                                                         
 * Spec:    http://produce.corp.miiicasa.com/spec/my/20120627/Page_3-1_Shared_from_Friend_by_date.html
 * Mockup:  http://produce.corp.miiicasa.com/mockup/my/20120627/3_1__Shared_from_Friend_by_date.png
 * 
 * @author  Mei Lin
 * @created 2012/05/15
 */

General Format

In general, every CSS rule begins with a selector, followed by a left curly brace on the same line. Each CSS property name-value pair should be indented 4 spaces (no tabs), on it’s own line ending with a semicolon. Example:

#selector1 {
    name1: value1;
    name2: value2;
    name3: value3;
}

Units of Measurement

The rules regarding units of measurement are as follows:

• Padding/margin should be specified in ems, not pixels.
• Borders can be specified in pixels.
• Any measurements related to images can be specified in pixels.

The use of ems only for padding / margin should not be considered a hard and fast rule. For example, if you are adding padding to an element, so that you can display a sprite as a background image, then pixels are often a better choice as the space required will not change when font size changes. Background image offsets should always be specified in pixels.

Consistency is also something to consider. It is generally better to be consistent with units used on each element, for example, don’t specify left padding in pixels and right padding in ems. When you need to specify a width, padding / margin should also be specified in the same units as the width:

This will work at all font-sizes:

.type_module-name div {
    width: 10em;
    padding: 0 2em;
}

but the following is unpredictable because the padding may make the box wider than the parent element, i.e. 20px may be larger than 4% which would put the container over 100% width:

.type_module-name div {
    width: 96%;
    padding: 0 20px;
}

Selector Naming

Use lowercase dashed-words instead of camelCase.

Selectors should be descriptive of function rather than form. For instance, “red” and “bold” should not be used as class names because they indicate the form of the text rather than its function. Selectors such as “button” or “hd” (short for “head”) are preferred because they indicate use.

Selector names should use dash case, meaning all words are lowercase with dashes as separators ( word1-word2-word3). Examples:

• submit-button
• mod-hd
• user-icon

Note: Automatically generated class names, such as those for module types, use an underscore to separate words. This is intentional to tell the difference between these and other, developer-defined selectors.

Selector Specificity

Selectors should be as least specific as possible:

• Bad
  

  
  .type_module-name div ul li .exampleclass {
      ...
  }
  

• Good
  

  
  .type_module-name .exampleclass {
      ...
  }
  

Writing very specific rules means that you have to write even more specific rules to override them, and this is complicated, difficult and unnecessary. The cascade is your friend :)

There was previously an example of using IDs to sandbox styles. As all IDs used inside modules should be namespaced using the module ID (which is not always predictable) it is not possible to use these IDs for CSS hooks.

NOTE: Currently we use Compass / Sass to write CSS. It’s very difficult to achieve above convention. For better maintenance, you can ignore this rule.

Module-Specific Rules

All module styles should begin with the module type ( type_xxxxx ). For example, for a module called type_ymail, the rule should be formatted like this:

.type_ymail .selector1 {
    name1: value1;
}

This ensures that the styles are applied to this module only.

Multiple Selectors Format

When writing CSS code, multiple selectors separated by a comma should each appear on their own line. For example:

.selector1,
.selector2,
.selector3 {
    name: value;
}

Alphabetical Order

The attribute names should be in alphabetical order. You can avoid duplicate attributes by doing this.
Though someone claims the ordering can cause some problems, I havn’t experienced yet.

.selector {
    color: #333;
    display: table;
    font-family: Calibri;
    font-size: 123.1%;
    margin: 0 10px 10px 0;
    padding: 5px;
    position: relative;
    width: 500px;
    _float: left;
}

Use *-bottom and *-right

It’s recommended to use *-bottom and *-right attributes rather than *-top and *-left attributes.
Because the page flow is from top-left to right-bottom, use *-bottom or *-right attributes often reduce both the
complexity and layout issues.

Font Size

Use YUI Fonts.

Layout

Use YUI Grids.