Web guidelines

Apart from 🎯 Zen, the following guidelines apply to the web development.

HTML guidelines

These rules apply to HTML:

  • ID’s must use the kebab-case format

  • Attributes use the kebab-case format

  • Boolean attributes will not use prefixes like is…, has…, can…

CSS guidelines

These rules apply to CSS:

  • Vanilla CSS is better than Sass or Less.js

  • CSS classes must use the kebab-case format

  • CSS .class selectors must be used for styling when multiple elements are affected

  • CSS #id selectors can (!= must) be used for styling when only one element is affected

  • BEM, OOCSS, SMACSS, or alike must not be used at all

Hint

Most of the CSS coding guidelines are automatically checked by the stylelint.

Also have a look at the Web Component guidelines.

JavaScript guidelines

These rules apply to JavaScript:

  • Vanilla JavaScript is better than frameworks

  • ECMAScript 6 is better than their predecessors

  • Backward compatibility is not required and can be ignored

  • The id attribute must be used to query unique / distinct elements in JavaScript

Hint

Most of the JavaScript coding guidelines are automatically checked by the ESLint.

Also have a look at the Web Component guidelines.

Web Component guidelines

These rules apply to Web Components:

  • Web components must only be customisable by attributes.

  • Passing CSS classes to web components is prohibited.

  • CSS selectors directly on the :host() are preferred over any layer of indirection or abstraction.

Hint

Since web components use all web technologies, HTML, JavaScript & CSS coding guidelines are also applied to Web Components.