Over a period of almost 20 years of web development I have repeatedly confirmed to myself the concept that “naming things is hard”. In an effort to reduce my own (and hopefully other’s) cognitive load, I have put together an HTML Component Vocabulary.
This vocabulary defines standardized markup and classes (using BEM) for common content concepts and components seen on websites.
While the primary focus is on HTML, the document will also provide some limited insights and thoughts on CSS and the separation between HTML, JavaScript, and CSS. The intent is that this provides you, the frontend developer, with a vocabulary and a starting point to create well-named HTML structure to later style with CSS or make interactive with JavaScript.
Please note, this is a work in progress. There are some ideas that I am still exploring and I welcome any thoughts or input (both complimentary and critical). I will expand and refine the vocabulary over time and pull requests are welcome.
A Brief Word on “Component”
I recognize that the term “component” has become loaded in recent times – especially with the advent of namespaces and more modular development. I am using it in the title in a general sense, to represent a small piece that makes up a greater whole; but within the “component vocabulary” itself I address the term in its more specific sense as it relates to a concise, contained structure in HTML development.