House Rules

CSS, BEM and class names

• CSS mobile first - define a core experience then work in larger screen sizes
• Define/name major section element classes, e.g. header, body, footer. These are generally top-level divs, section and article elements and should describe their role in the page.
• Block __element --modifier
• Hyphenate grouping elements within these, e.g. body-content, body-aside, header-nav
• Child elements of these are treated as BEM elements, so for example header-nav__item, body-content__pullquote
• Modifiers are variations of the above, e.g. header-nav__item--home, body-aside--promotion
• Keep your class names as high up in the DOM as possible, for example for signifying an active link within a navigation apply the active class to the list item and not the link element
• Avoid massively complicated nesting. BEM is there to minimise specificity issues
• Avoid using element selectors except where these might have native state changes, eg a, input
• Use native state changes over classes where possible, eg a:hover, input:focus
• Font sizes should be specified in rem with a px fallback (preferably using a suitable mixin).
• Line heights should ideally be specified relative to font-size, eg 24px line height for a 12px font should be specified as 2.
• Try to use SVG where possible and appropriate but always offer a raster fallback for browser support.
• Optimise raster images using ImageOptim although long-term we should be aiming to have this as part of the deployment process.

As a general rule hyphenate in CSS, camelCase in JS and underscore for PHP, although some PHP requires camelCase (e.g. ExpressionEngine add-on development and some MVC code).

JavaScript

• avoid jQuery functions like hide() and show(). Instead use addClass(), toggleClass() and removeClass() and apply the various display rules in your CSS
• similarly try - where possible - to apply animations in CSS rather than jQuery
• swipe/touch gestures should ideally be implemented with hammer.js