Code Guide (CSS)

Golden rule

Every line of code should appear to be written by a single person, no matter the number of contributors.

1.Syntax

• Use soft tabs with two spaces—they're the only way to guarantee code renders the same in any environment.
• When grouping selectors, keep individual selectors to a single line.
• Include one space before the opening brace of declaration blocks for legibility.
• Place closing braces of declaration blocks on a new line.
• Include one space after : for each declaration.
• Each declaration should appear on its own line for more accurate error reporting.
• End all declarrations with a semi-colon. The last declaration's is optional, but your code is more error prone without it.
• Comma-separated property values should include a space after each comma(e.g., box-shadow).
• Don't includes spaces after commas within rgb(), rgba(), hsl(), hsla(), rect().
• Don't prefix property values or color parameters with a leading zero. e.g. .5px;
• #fff. not #FFF. not #ffffff.
• Quote attribute values in selectors.e.g., inpput[type="text"].
• Avoid 0px, just 0. e.g., margin: 0;

2.Declaration order

• Related property declarations should be grouped together following the order:
  1. Positioning
  2. Box model
  3. Typographic
  4. Visual
• Positioning comes first because it can remove an element from the normal flow of the document and overrride box model related styles. The box model comes next as it dictates a component's dimensions and placement.
• Everything else takes place inside the component or without impacting the previous two sections, and thus they come last.

3.Don't use @import

4.Media query placement

• Place media queries as close to their relevant rule sets whenever possible. Don't bundle them all in a separate stylesheet or at the end of the document. Doing so only makes it easier for folks to miss them in the future.

5.Prefixed properties

• When using vendor prefixed properties, indent each property such that the declaration's value lines up vertically for easy multi-line editing.

6.Single declarations

• one line is ok.

7.Shorthand notation

• Strive to limit use of shorthand declarations to instances where you must explicitly set all the available values.
  • padding
  • margin
  • font
  • background
  • border
  • border-radius
• Often times we don't need to set all the values a shorthand property represents. For example, HTML headings only set top and bottom margin, so when necessary, only override those two values. Excessive use of shorthand properties often leads to sloppier code with unnecessary overrides and unintended side effects.

8.Boolean attributes

• A boolean attributes is one that needs no declared value
• e.g.: <input type="text" disabled> 

9.Comments

• Code is written and maintained by people. Ensure your code is descriptive, well commented, and approachable by others. Great code comments convey context or purpose. Do not simply reiterate a component or class name.
• Be sure to write in complete sentensces for larger comments and succinct phrases for general notes.

10.Class names

• Use meaningful names; use structural or purposeful names over presentational.
• Prefix classes based on the closest parent or base class.

11.Selectors

• Use classes over generic element tag for optimum renering performance.
• Keep selectors short and strive to limit the number of elements in each selector to three.
• Scope classes to the closest parent only when necessary(e.g., when not using prefixed classes).

12.Organization

• Organize sections of code by component.
• Develop a consistent commenting hirearchy.
• Use consistent white space to your advantage when separating sections of code for scanning larger decuments.
• When using multiple CSS files, break them down by compents instend of page. Pages can be rearranged and component moved.