Front end development methodology

Philosophy

All public-facing content crawlable at page load.
All page content pieces linkable, and linkable cross-device.
Semantics trumps aesthetics.
All content to all users. Never show or hide content based on device.
Device agnostic design and UX. Mobile and widescreen should look and feel similar; basically less media-queries = more device agnostic.
Consider viewport height as much as width.
As resolution-independent as possible. Vector > raster.
Embrace native. Scroll, inputs, etc. Never disable pinch/zoom.
Either do it well, or push back with a suggestion.

Support evergreen browsers and IE 9+.
< 5MB initial page load.
Optimize the shit out of media assets (we have a process for SVG, JPG, PNG and video).
Mobile first (min-width media queries).
In context media queries, not grouped at the end of the stylesheet.
No front end frameworks such as Bootstrap or Foundation.
No globally-scopped CSS selectors!!!! Always scope styles to a component id/class.
Semantic, layout-agnostic classnames only (“.intro” instead of .left-column”).
SCSS.
CSS selectors leverage the semantic markup (no BEM).
Vanilla JS.
JS as modular components, documented inline with JSDoc.
Gulp not Grunt. Gulp 4.0+, used locally in projects (no global install).
Always document project meta, setup and deployments in a readme.
Git.
Preference NPM dev dependencies over gems, etc.
Validate the document outline with the HTML5 algorithm.
Validate markup.

Full component based project structure. All component assets (HTML template, CSS, JS, images) stored togeather.
Drop SCSS for standard CSS Level 4 (variables, etc) via PostCSS plugins.
Drop font icons for SVG.
Drop Base64 font embedding in anticipation of HTTP/2 and to benefit from WOFF 2.0.

The ultimate future is isomorphic React builds on Node, e.g. http://fluxible.io.