Was ist euch lieber oder ist der Standard?

Am Beispiel von meiner Hero Section: Hero_Section, HeroSection, Hero-Section, nur Hero?
Und groß oder klein alles, nur Anfangsbuchstabe groß?

In JavaScript dürfen Variablen keinen Bindestrich haben.

1. CSS Klassen & ID
2. JavaScript Variablen, lieber heroSection oder Hero_Section?
3. React.js Component-Namen groß klein? Unterstrich (_) oder keins
4. JSX/TSX Filename groß klein?

Bei den Klassen sollte es schon lesbar und aussagekräftig sein, weil es noch hero section headline gibt, hero section button usw.. Oder soll ich einfach sagen

.hero-section{
 cta-button{}
} 

?
Mir war es immer so lieber, damit auf jeden Fall nicht mit irgendwas, das ich nicht selber gemacht habe, überschrieben wird. Aber ist viel länger natürlich und damit es nur dort greift, geschachtelt in hero-section.

.hero-section {
.hero-section-cta-button{}
} 

Und das war schon SCSS. Mit CSS wäre es:

.hero-section .hero-section-cta-button{
}