Three Conventions Already in This Repo

Consistency beats purity. Pick one for a surface and stay with it.

block__element

.nav__links
.nav__link
.nav__cta

Common in Reference samples. Teach as a convention, not “strict BEM”.

kebab-block__element

.nav-classic-brand__panel
.nav-classic-brand__links

Used in ui/navbars/. Block can be multi-word kebab.

Flat kebab

.northstar-marquee
.northstar-hero

Used in CSS/combine/. Fine for page-unique sections.

Chosen for this demo: block__element