Micro-Frontend HTML and CSS Starter Template

REFERENCES:

Micro-frontends and composable frontend architectures

Similar concept as micro-services, micro-frontends are the result of aplying "Separation of Concerns" (business logic from GUI logic) principles, breaking down, and or decoupling large user interfaces into smaller, more manageable and independently deployable pieces, with benefits that range from simplified coding and development workflows to future-proofing, and project organization.
https://microfrontend.dev/

Modern CSS For Dynamic Component-Based Architecture

Modern project architecture, theming, responsive layouts, and component design
https://moderncss.dev/modern-css-for-dynamic-component-based-architecture/

Cascade Layers:

Don't let specificity force you into strict selector conventions. Cascade Layers allow us to manage specificity without resorting to naming hacks or the !important flag.
https://12daysofweb.dev/2022/cascade-layers/

Style with Stateful, Semantic Selectors

If a state is important enough to indicate visually, it's probably important enough to expose to assistive technologies. Building with accessible semantics from the get-go can give you expressive, meaningful style hooks for free.
https://benmyers.dev/blog/semantic-selectors/

Solutions to Replace the 12-Column Grid

Examining modern CSS solutions to problems Stephanie Eckles has been solving over the last 15+ years as a front-end dev. https://moderncss.dev/solutions-to-replace-the-12-column-grid/

Using CSS to Enforce Accessibility

ARIA brings a lot to the table that HTML does not, such as complex widgets and state information that HTML does not have natively.
https://adrianroselli.com/2021/06/using-css-to-enforce-accessibility.html

Feature Detection for Modern CSS

Live, in-browser detection of modern CSS support for selectors, features, and at-rules. Applies support-based classes, exposes a results object, and allows custom tests.
https://supportscss.dev/

Guide to CSS Units for Relative Spacing

Spacing units relative to the document, :root, Viewport, Element, Content
https://dev.to/5t3ph/guide-to-css-units-for-relational-spacing-1mj5

The details and summary elements, again

HTML’s <details> and <summary> elements can be used to create native disclosure widgets - an expand/collapse widget where more information or interactive controls related to a topic (identified via the subtree content of the <summary>, or text preceding the disclosure widget) can be found.
https://www.scottohara.me/blog/2022/09/12/details-summary.html

W3C Accessible Rich Internet Applications (WAI-ARIA) 1.3: Specification 5:3 Categorization of Roles

To support the current user scenario, this specification categorizes roles that define user interface widgets (sliders, tree controls, etc.) and those that define page structure (sections, navigation, etc.). Note that some assistive technologies provide special modes of interaction for regions marked with role application or document.
https://w3c.github.io/aria/#roles_categorization

Represent State with HTML Attributes, Not Class Names

Representing an element’s state using HTML attributes and styling the element using the CSS attribute selector.
https://www.aleksandrhovhannisyan.com/blog/represent-state-with-html-attributes-not-class-names/

Navigation: You Are Here

You-are-here navigation consists of signs that help orient website visitors as they explore the site. Many websites need stronger location indicators.
https://www.nngroup.com/articles/navigation-you-are-here/