CSS / JavaScript Name Conventions?

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{
}

Answer 1

[BeamerBen]

Js ist camelCase für variablen und PascalCase für Klassen Standard.

Bei css kebab-case.

Ich würde dir einen Linter empfehlen. Für den Anfang kann man bei js einfach mal „standard“ nutzen. Bei vielen Sachen gibt es unterschiedliche Sichtweisen, ich bin auch nicht der größte Fan davon, aber es sollte dir einen soliden Einstieg geben wenn du dir selber unsicher bist wie dein Code aussehen sollte. https://www.npmjs.com/package/standard/v/11.0.1

Woher ich das weiß: Berufserfahrung – Software Entwickler / Devops

Comments

[Pjhfvb]

Danke, war mir aber nicht 100% sicher ob ich genau verstanden habe.

Js ist camelCase für variablen und PascalCase für Klassen Standard.

const userAge = 18;

Wäre also richtig

Mit PascalCase für Klassen meinst du sinngemäß Funktionen oder ?
Ob man Class oder Function bentzt ist in JavaScript oder React praktisch dasselbe, ist glaube ich nur für Leute die von Java kommen damit sie es Class nennen.

Macht man da nicht statt dem hier

const HandleSubmit =  (e) => {} 

meistens das hier ?

const handleSubmit =  (e) => {} 

oder so also den Anfang klein und eine React Component beide Anfänge groß ?

export const ContactForm = () => {
return(
<form></form>) 
}   
export const Hero = () => {
return(
<section className='hero-section'>
  <div class='cta-btn-container'>
    <div class='cta-btn start-now-btn'>
      Jetzt Starten 
    </div>
    <div className='cta-btn learn-more-btn'>
        Mehr Erfahren
    </div>  
  </div>
 <section>
  )
                                  } 

Und die Datei heißt dann Hero.tsx ContactForm.tsx oder wie genau im detail macht ihr das ? Filename hero.tsx oder contactForm.tsx ?
ESlint kenne ich irgendwo her aber das ist wahrscheinlich irgendwo eingebaut gewesen wie Next.js/React.js oder in Vite.Wie bei TypeScript oder Vercel ein Tool was dich zwingt dich an Regeln zu halten außer man macht ausnahmen oder schaltet es aus.

Und was hat es mit __ also 2x dem _ zu tun ?
muss man dann .hero
__cta-btn-container
____cta-btn
_____ befolgen oder alle "Kinder" von Hero, Button Container usw. bleiben bei 2x _
So eine klare Richtlinie wäre gut, dann lerne ich es einmal richtig und hab dann vernünftige Projekte und wenn ich nicht meinen eigenen Style durchsetze kann ich auch besser in Foren Fragen wenn etwas sein sollte.

[BeamerBen]

@Pjhfvb

Kurzer Disclaimer: ich arbeite normal nicht mit react.

Stimmt nicht ganz, Klassen und functions sind nicht das selbe. An sich nutzt js zwar Prototypen und du kannst quasi alles auch ohne den class syntax machen, Klassen machen es erheblich einfacher Vererbung oder private Felder zu haben.

In JS benennst du Funktionen die du als constructor (also mit new) aufrufst oder Klassen nach PascalCase, normale Funktionen aber nach camelCase.

In React würde man PascalCase für Komponenten nutzen. https://www.npmjs.com/package/eslint-plugin-react dieses Plugin würde dann auch einen Fehler produzieren, wenn man etwa useState in etwas nutzt, was nicht wie eine React Komponente/Hook benannt ist.

[BeamerBen]

@Pjhfvb

Ich bin übrigens nicht sicher was du mit __ meinst. Meinst du die Einrückung?

Da gibt es verschiedene Wege, Hauptsache es ist sinnvoll und in deinem Projekt überall gleich. Erfahrungsgemäß funktioniert das bei mehreren Entwicklern am besten wenn man sich auf linting regeln einigt die jeder nutzt.

So etwas nimmt dir Standard ja auch ab, eingerückt wird da in js mit zwei leerzeichen, und es gibt auch Regeln an welcher Stelle man Zeilenumbrüche macht usw.

Normalerweise rückt man in JS pro {} block ein, oder wenn ein Statement einen Zeilenumbruch hat. Und in HTML usw. so, dass alle Unterelemente eine Einrückung weiter als das Elternelement ist. Also natürlich dann auch alle direkten Unterelemente auf der gleichen Einrückung. Alles andere wäre ja Wahnsinn.

[regex9]

@Pjhfvb

Mit PascalCase für Klassen meinst du sinngemäß Funktionen oder ?

Nach üblicher Konvention (Kamelhöckerschreibweise) beginnen sowohl Klassen, als auch Prototypen mit einem Großbuchstaben.

class Lion {}

function Elephant() {}

In deinem Fall soll handleSubmit eindeutig keinen Prototyp darstellen und beginnt daher passenderweise mit einem Kleinbuchstaben.

Ob man Class oder Function bentzt ist in JavaScript oder React praktisch dasselbe, (...)

Nein, das kann man so pauschal nicht sagen. Bei einer Klasse wird unter der Haube zwar ein Funktionsprototyp erzeugt, aber der hat auch immer ein prototype-Objekt, welches später beispielsweise zum Binden von Elementfunktionen genutzt wird. Auf der anderen Seite kann man Funktionen erzeugen, die kein prototype-Objekt besitzen (z.B. anonyme oder explizit asynchrone Funktionen).

Answer 2

[regex9]

Für JavaScript ist die Kamelhöckerschreibweise gebräuchlich.

Ein absoluter Zwang, den zu benutzen, besteht allerdings nicht. Wenn du einen anderen Stil bevorzugst (snake_style, PascalCase, o.a.), kannst du den ebenso anwenden, so lange du es nur konsequent durchziehst. Der Sinn/Zweck dahinter ist ja immerhin der, den Code gut lesbar zu halten.

Bei Projekten, an denen mehrere Entwickler arbeiten, solltest du dich im Voraus mit den Teammitgliedern abstimmen.

Bezogen auf dein Beispiel kommt es darauf an, was für ein Tokentyp benannt werden soll. Eine Variable hieße in Kamelhöckerschreibweise heroSection. Wäre es eine Klasse, dann wäre die korrekte Form HeroSection.

Ob du dir die Wortkombination mit Section sparen kannst, kannst du dir selbst beantworten, indem du dir die Frage stellst, ob das, was bezeichnet werden soll, dann noch leicht/deutlich erkennbar ist.

Auch bei CSS kannst du frei entscheiden, welcher Konvention du folgst. Wenn du kein eigenes System hast (oder ein Hilfstool wie Tailwind, welches bereits eine Form vorgibt), schau dir Atomic CSS, BEM, CSS Modules, OOCSSS oder SMACSS an. Das sind jeweils eigene Konzepte, die sich generell damit beschäftigen, wie man Selektoren baut. So ist beispielsweise bei BEM bereits ein Grundgedanke, dass Kaskaden möglichst flach bleiben.

Beispiel:

<section class="hero">
  <h1 class="hero__headline>...</h1>
  <button class="hero__button">...</button>
</section>  

React hat im Übrigen ebenfalls keinen offiziellen Leitfaden. Wie schon oben geschrieben, kannst du dir einen eigenen Stil ausdenken oder dich an bestehenden Guides anderer Entwickler (z.B. Airbnb oder Google) orientieren.

Hinsichtlich der Benennung von Dateinamen würde ich empfehlen, nur mit Kleinbuchstaben und Bindestrichen (oder alternativ Unterstrichen) zu arbeiten (Kebab-Style). So kann es dir vollkommen egal sein, ob das darunterliegende System case-sensitive ist oder nicht.

Answer 3

[ingosteinkeseo]

Abgesehen von Standards / Best Practice und eigenen Vorlieben ist Konsistenz sinnvoll: wenn ich bestehenden Code erweitere und der lässt ein System erkennen, dann führe ich es fort.

Woher ich das weiß: Berufserfahrung