A one-page questionnaire to help your team establish effective frontend guidelines, so that you can write consistent & cohesive code together.
What are some general principles your team should follow when writing HTML? (for example, authoring semantic HTML5 markup, accessibility, etc.)
Are you using an HTML preprocessor (such as HAML, Pug, etc)? Are you using a templating engine (such as Mustache, Handlebars, etc)? Does your backend architecture influence the frontend markup in any way?
Spaces or Tabs? What does HTML commenting look like?
What are some general principles your team should follow when writing CSS? (For example, modularity, avoiding long selector strings, etc.)
Is your team using a CSS methodology (such as SMACSS, BEM, or OOCSS)? If yes, where is the documentation for that methodology? Are you deviating from the methodology in any way?
Is the team using a preprocessor (such as Sass or Less)? What are the guidelines for using that preprocessor? Are you using a CSS base (such as Normalize or a reset)? Are you using any CSS postprocessors (such as Prefixfree or Autoprefixer)? Are there specific CSS techniques you're utilizing (such as critical CSS)?
Is the team using a framework (such as Bootstrap or Foundation)? If yes, where is the documentation for that framework? Are you deviating from the framework in any way?
Spaces or Tabs? Spacing around rules? Grouping properties? What does CSS commenting look like?
What are some general principles your team should follow when writing JavaScript?
Are you using a JavaScript framework (such as jQuery, Ember, Angular, etc)? Where is the documentation for those frameworks? Are you using any polyfills or shims? What third-party scripts are dependencies for your project? Do you test your JavaScript?
Spaces or Tabs? What does JS commenting look like? What patterns are you following?
How are you handling icons (such as using SVG, icon fonts, etc)? How are you handling responsive images (such as using srcset & <picture />)? Are you using any tools to optimize and serve images?
How do you load custom fonts? Do you use any tools to help implement web fonts? Do you use a service to manage and serve custom fonts?
Do you use performance budgets? How are you measuring your project's speed? What techniques are you using to decrease file size? What performance-related tools are you using in your workflow?
Are you following the accessibility recommendations laid out in the accessibility checklist? What accessibility-related tools are you using in your workflow?
Are you using a task runner, dependency manager, scaffolding tools, or linters? What version control system are you using? How is your front-end code integrated into production?
A Design System isn’t a Project. It’s a Product, Serving Products.
medium.com/eightshapes