Guidelines for Ignite

Ignite based on modern coding styles and syntax. A summery of them can you see below

This Guideline is a summery of different detailed Guidelines like CSS Guidelin.es and Primer CSS Guidelines

CSS/LESS Guidelines

Syntax

  • two space indent
  • max. 80 characters per line

Selector

[selector] {
  [property]: [value];
}
  • related selectors on the same line; unrelated selectors on new lines;
  • a space before our opening brace ({);
  • properties and values on the same line;
  • a space after our property–value delimiting colon (:);
  • each declaration on its own new line;
  • the opening brace ({) on the same line as our last selector;
  • our first declaration on a new line after our opening brace ({);
  • our closing brace (}) on its own new line;
  • each declaration indented by two (2) spaces;
  • a trailing semi-colon (;) on our last declaration.

HTML Guidelines

Syntax

  • four tab indent
  • Avoid writing closing tag comments, like <!-- /.element -->. This just adds to page load time.
    Plus, most editors have indentation guides and open-close tag highlighting.
  • Avoid trailing slashes in self-closing elements. For example: <br>, <hr>, <input>, <img>.
  • Avoid values in boolean attributes. For example: disabled, checked, required.

Don't mix HTML and CSS

HTML and CSS are two different things: HTML structured the Website and CSS add the styling. Therefore separate them consistent.

Avoid style="..." and <style>-Tags in your HTML.

Write Smart

Avoid unnecessary elements. It have a positive effect on the readability and page load time.

<!-- Bad -->
<span class="avatar">
	<img src="...">
</span>

<!-- Good -->
<img class="avatar" src="...">