Bruut

# Code Guide

# Code editor preferences

  • We use tabs (4 spaces)

Silicon Valley gifje

# HTML / Twig

  • We use hyphen-spaced names for our selectors
  • We stick to the BEM Methodology as much as possible to structure our markup, so __ for elements and -- for modifiers. We don't nest BEM selectors more than one level deep: block__element is ok, but block__element__element-deeper isn't.
  • We use js- prefixed classes to connect elements to Javascript. js- prefixed classes should never appear in CSS and must be placed as the first attribute.
  • When using boolean attributes (checked, readonly), omit extra markup and just use <input type=“checkbox” checked>.
  • HTML attributes should come in this particular order for easier reading of code: class, id, name, data-*, src, for, type, href, valuem title, alt, role, aria-*
  • Make sure every image as a [alt] attribute set
  • Make sure every link has a [name] attribute set
  • Use Lighthouse for audits on performance, SEO and accessibility

Classes make for great reusable components, so they come first. Ids are more specific and should be used sparingly (e.g., for in-page bookmarks), so they come second.

# SCSS

  • We don't use the &--, &__ selectors for BEM-ing in Sass, for the sake of clarity.
  • Only nest <li>, <img> and pseudo-selectors (:before, :after) to 1 level under a selector (.selector li).
  • Comma-separated property values should include a space after each comma (e.g., box-shadow).
  • Don't prefix property values or color parameters with a leading zero (e.g., .5 instead of 0.5 and -.5px instead of -0.5px
  • Operators: For improved readability, wrap all math operations in parentheses with a single space between values, variables, and operators $padding: ($base-spacing * 2) $base-spacing;.
  • Place a space after the selector and the opening bracket. The closing bracket gets it own line. Also: add a space after a property.
.my-selector {
	property: value;
}

// A generic comment
.my-next-selector {
	property: value;
}

/**
 * A more extensive comment
 * This can go multiple lines.
 */
.my-other-selector {
	property: value;
}
  • 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 sentences for larger comments and succinct phrases for general notes.
  • Classes: Keep classes as short and succinct as possible. Use meaningful names; use structural or purposeful names over presentational.
  • When grouping selectors, keep individual selectors to a single line (better for version control).
  • Place media queries as close to their relevant rule sets whenever possible.

← Git Strategy →