#Web Components#
-
consist of three separate technologies that are used together:
Custom Elements. Quite simply, these are fully-valid HTML elements with custom templates, behaviors and tag names (e.g. ) made with a set of JavaScript APIs. Custom Elements are defined in the HTML Living Standard specification.
Shadow DOM. Capable of isolating CSS and JavaScript, almost like an <iframe>. This is defined in the Living Standard DOM specification.
HTML templates. User-defined templates in HTML that aren’t rendered until called upon. The tag is defined in the HTML Living Standard specification.
~ (1) Set the ground rules ~ (2) Explain the structure of code ~ (3) Establish coding standards ~ (4) Avoid long stylesheets ~ (5) Document with a style guide in mind ~ (6) Breakfown stylesheets into sections ~ (7) Index content of stylesheets ~ (8) Find the sweet spot dont get stuck in the weeds ~ * Incorporate a living style guide as part of documentation
On large sites and applications, it is not unusual to have different themes. There are certainly different ways of dealing with themes but I personally like having them all in a
themes/folder.Note — This is very project-specific and is likely to be non-existent on many projects.
Reference: Sass Guidelines > THEMENAME > Themes folder