Компонентный подход и code reuse в разработке давно известные практики. Но не все ими пользуются, так как тяжело вникать в новое и сначала кажется, что это ужасно сложно. Непонятное дробление элементов, больше файлов, да и зачем если все можно оставить в паре файлов HTML и CSS. Полное непонимание со стороны старой гвардейской дивизии разработчиков, в этом нет ничего плохого. Так учили, а доступные сайты-помощники об этом ничего не говорят, рассматривают только азы.
Обычные решения подходят для простых одностраничных сайтов, а понимание компонентный подход раскрывается как раз в многостраничных. Адаптивный дизайн с локальными изменениями при смене разрешения устройства, много типовых и логических элементов, необходимость последующей простой поддержки кода.
Это наглядный пример того, что разработчики (программисты) учатся всю жизнь, сфера очень динамично развивается и надо быть в теме текущих полезных вещей.
Как это работает?
Путем просмотра адаптивного макета выявляют возможность деления на логические части HTML с последующей привязкой CSS и Javascript . То есть один компонент это один комплект из HTML, CSS, JS локально связанными друг с другом и влияющие опосредованно на другие. Все изменения, которые вносятся в содержимое данного элемента, не влияют на другие. Тем самым упрощается поддержка кода и работа с ним за такого простого, но изначально пугающе сложного процесса.
Дополнительную помощь могут оказать повторное использование кода или code reuse.
По сути это тот же компонентный подход, только в данном случае это мини-компонент, локально меняемый в зависимости от вложенности. Самый адекватный пример это кнопка. Задав для неё весь комплект возможных свойств, мы можем использовать её по всему проекту, задавая локально необходимые. При этом нет нужды создать отдельные кнопки для каждого элемента проекта отдельно.
Эти два момента служат главной задаче - писать оптимизированный код.