Schulung · Workshop · Coaching · Beratung

CSS für Entwickler Schulung: Layers, :has() und Container Queries

CSS für Entwickler: Cascade Layers, :has(), Container Queries, Architektur

Dauer: ab 1 Tag (8 UE) | Preis: ab 900 EUR (netto) | Live online oder vor Ort | Termin nach Vereinbarung

Auf soliden Grundlagen aufbauend bringen Sie Stylesheets auf den Stand moderner Webgestaltung: Kaskade mit Layern steuern, Komponenten mit Container Queries und :has() bauen, Architektur festlegen und mit Stylelint absichern.

Gesamtpreis für bis zu 3 Teilnehmende · Unverbindliche Anfrage · Keine Vorkasse

Modernes CSS ersetzt viel Sass, JavaScript und Namensdisziplin

CSS hat sich in den letzten Jahren stärker verändert als im Jahrzehnt davor. Cascade Layers ordnen Reset, Komponenten und Utilities in eine feste Reihenfolge, natives Nesting macht den Präprozessor für viele Projekte entbehrlich, :has() reagiert auf Kindelemente, @scope begrenzt Selektoren auf einen Bereich, und Container Queries machen Komponenten unabhängig von der Seitenbreite. Das Seminar CSS für Entwickler richtet sich an Frontend- und Fullstack-Entwickler:innen, die die Grundlagen kennen und ihre Stylesheets auf diesen Stand bringen wollen.

Wir beginnen mit dem Modell dahinter: Rendering-Pipeline, Kaskade mit Layern und Spezifitätssteuerung über :where(). Darauf bauen Custom Properties mit @property, Farbfunktionen wie oklch() und color-mix(), Container Queries mit Container-Einheiten und logische Eigenschaften auf. View Transitions und @starting-style bringen Übergänge, für die früher eine Animationsbibliothek nötig war. Im Architekturteil vergleichen Sie BEM, CSS Modules und Utility-First, ordnen CSS-in-JS und Präprozessoren ein und richten Stylelint, einen Build mit Lightning CSS und visuelle Regressionstests ein. Tailwind, Sass und Bootstrap streifen wir nur so weit, wie es für Architekturentscheidungen nötig ist – dafür gibt es eigene Seminare.

Ob ein Sprachmittel produktiv nutzbar ist, entscheiden wir am Baseline-Status: „Widely available“ bedeutet, dass ein Feature seit mindestens 30 Monaten in allen großen Browsern läuft. Für jüngere Features lernen Sie, mit @supports und sinnvollen Rückfallwerten zu arbeiten, statt auf Polyfills zu setzen.

Claude Code im Terminal eignet sich gut für CSS-Umbauten, wenn es eine harte Rückmeldung bekommt: Stylelint mit Ihrer Konfiguration und Playwright-Screenshots, die nach jeder Änderung laufen. Ohne diese Schleife schreiben Modelle gern CSS im Stil von 2018 – Clearfix, handgeschriebene Vendor-Präfixe, Ketten von !important. Sie üben, Layer-Reihenfolge und Namenskonvention als Projektregel festzuhalten und ein gewachsenes Stylesheet in kleinen, prüfbaren Schritten auf Layers und Nesting umstellen zu lassen.

Fast jedes große Stylesheet, das ich in Projekten übernehme, hat denselben Kern: einen Wettlauf um Spezifität, den irgendwann jemand mit !important gewonnen hat. Cascade Layers beenden diesen Wettlauf, weil die Reihenfolge der Ebenen vor der Spezifität entscheidet. Für mich ist das die folgenreichste Neuerung in CSS seit Grid – weniger spektakulär als View Transitions, aber sie verändert, wie Teams Stylesheets organisieren. Wer heute ein Projekt aufsetzt, sollte die Layer-Reihenfolge vor der ersten Komponente festlegen.

Was Sie danach können

  • Sie erklären, wie Kaskade, Layer und Spezifität zusammenwirken, und lösen Konflikte ohne !important.
  • Sie bauen Komponenten mit Container Queries, :has(), @scope und Custom Properties, die unabhängig vom Seitenkontext funktionieren.
  • Sie bewerten die Browser-Unterstützung neuer Sprachmittel am Baseline-Status und sichern jüngere Features mit @supports ab.
  • Sie wählen eine CSS-Architektur (BEM, CSS Modules, Utility-First) begründet aus und sichern sie mit Stylelint und Screenshot-Tests ab.
  • Sie lösen typische Layout- und Gestaltungsprobleme mit nativem CSS statt mit JavaScript oder Präprozessor.

Zielgruppe und Voraussetzungen

  • Frontend- und Fullstack-Entwickler:innen mit CSS-Grundlagen
  • Backend-Entwickler:innen, die moderne Webstandards verstehen und sicher anwenden wollen
  • Teams, die konsistente und skalierbare CSS-Ansätze einführen möchten
Themen und Inhalte für Ihre Beratung, Coaching, Workshop, Training, Schulung und Weiterbildung:

CSS für Entwickler: Cascade Layers, :has(), Container Queries, Architektur

Wie CSS funktioniert
  • Warum CSS komplex wirkt: Kontext, Kaskade und intrinsische Größen statt fester Anweisungen
  • Deklarativ statt imperativ: Bedingungen beschreiben, der Browser rechnet das Ergebnis
  • Rendering-Pipeline moderner Browser: Style, Layout, Paint, Composite – was Reflows auslöst
  • Syntax und Struktur heute: At-Regeln wie @layer, @container, @scope und @property
  • Effizienter Start durch semantisches HTML als Grundlage schlanker Selektoren
Kaskade und Spezifität steuern
  • Kaskade und Vererbung im Detail: Herkunft, Kontext, Layer, Spezifität, Reihenfolge
  • Cascade Layers: Reset, Basis, Komponenten und Utilities in festgelegter Reihenfolge
  • Fremd-CSS mit @import url() layer(vendor) in eine eigene Ebene einhegen
  • Spezifität gezielt senken oder bündeln mit :where() und :is()
  • Gültigkeitsbereiche mit @scope und Untergrenze per to (…)
  • :has() als relationaler Selektor: Formular- und Kartenzustände ohne JavaScript
Nesting, Custom Properties und Funktionen
  • Natives CSS-Nesting mit & und wo es sich bei der Spezifität von Sass unterscheidet
  • Custom Properties: Kaskade, Rückfallwerte und Theming über Kontexte
  • Typisierte Eigenschaften mit @property: Syntax, Startwert, animierbare Variablen
  • Design-Tokens für Farben, Abstände und Typo-Skala als Custom Properties organisieren
  • Farbfunktionen: oklch(), color-mix() und relative Farbsyntax für Varianten
  • Berechnete Werte mit calc(), clamp(), min() und max() für fließende Größen
  • Farbmodi mit color-scheme und light-dark() statt doppelter Regelsätze
Layouts und responsive Komponenten
  • Einheiten bewusst wählen: rem, em, ch, lh und dynamische Viewport-Einheiten dvh
  • Box-Modell vertieft: box-sizing, intrinsische Größen min-content und fit-content
  • Layout- und Positionierungsstrategien: Normalfluss, Flexbox, Grid, Subgrid, sticky
  • Container Queries: container-type, Größenabfragen und Container-Einheiten wie cqi
  • Logische Eigenschaften und Schreibrichtungen für mehrsprachige Oberflächen
  • Style Queries (Baseline seit Mai 2026) und Anchor Positioning (noch nicht Baseline): Browserstand vor dem Einsatz prüfen
Übergänge und Interaktion
  • View Transitions im selben Dokument mit document.startViewTransition()
  • Seitenübergreifende View Transitions mit @view-transition und ihr Browserstand
  • Einblenden aus display: none mit @starting-style und transition-behavior
  • CSS aus JavaScript steuern: Klassen und Custom Properties statt Inline-Styles
  • Bewegung respektvoll einsetzen: prefers-reduced-motion in jeder Animation
CSS-Architektur im Team
  • Dateien organisieren: Tokens, Layer-Definition, Basis, Komponenten, Utilities
  • Namenskonventionen wie BEM – und was @scope daran überflüssig machen kann
  • CSS Modules: lokal gekapselte Klassennamen in Vite-, React- und Vue-Projekten
  • Utility-First im Architekturvergleich; Tailwind in der Tiefe im eigenen Seminar
  • Komponentenframeworks wie Bootstrap in einen eigenen Layer einbinden
  • CSS-in-JS: Laufzeitkosten, Server-Rendering und Ansätze ohne Laufzeit
  • Präprozessoren Sass und Less einordnen: was natives CSS inzwischen übernimmt
Qualität, Build und Browser-Unterstützung
  • CSS-Linting mit Stylelint: stylelint-config-standard, eigene Regeln, Autofix
  • Baseline als Zielvorgabe im Team: Browserslist-Abfrage und Lint-Regeln gegen zu junge Features
  • Neue Sprachmittel absichern mit @supports und Rückfallwerten
  • Build mit Lightning CSS oder PostCSS: Minifizierung, Präfixe, Nesting für ältere Browser
  • Visuelle Regressionstests mit Playwright-Screenshots je Breakpoint
  • Ungenutztes CSS finden mit der Coverage-Ansicht der Chrome-Entwicklertools
CSS-Umbauten mit Claude Code
  • Stylelint und Playwright-Screenshots als Prüfschleife, die der Agent nach jeder CSS-Änderung ausführt
  • Layer-Reihenfolge und Namenskonvention in CLAUDE.md festhalten, damit keine Spezifitätskämpfe entstehen
  • Veraltete Muster im erzeugten CSS abweisen: Clearfix, Vendor-Präfixe von Hand, !important-Ketten
  • Gewachsenes Stylesheet schrittweise auf Layers und Nesting migrieren, je Schritt ein Screenshot-Vergleich
  • Projektregel: Features unterhalb von Baseline nur mit @supports-Weiche übernehmen
Praxisprojekt: Dashboard-Komponenten modernisieren
  • Bestehendes BEM-Stylesheet in Cascade Layers und Design-Tokens überführen
  • Kennzahlenkarte mit Container Queries und :has()-Zuständen für Warnungen
  • Hell-/Dunkel-Umschaltung mit light-dark() und einer View Transition
  • Stylelint-Konfiguration und Screenshot-Tests in die CI-Pipeline einbinden

*) Die Inhalte werden individuell abgestimmt und mit Praxisbeispielen abgerundet.

Ein Symbol für einen Kalender.

Offene Termine

Kostenlose Reservierung
Ein Symbol für Angebot erhalten.

Unser Angebot

Individuelle Schulung für Einzelpersonen und Teams – live online oder vor Ort.

Dauer

Ein Symbol für Dauer.
ab 1 Tag (8 UE)

Die Dauer richtet sich nach Ihren Inhalten.

Preis

Ein Symbol für Preis.
ab 900 EUR (Nettopreis)
ab 1.071 EUR (Bruttopreis)

Die Preise verstehen sich bei Unternehmern gemäß § 14 BGB zzgl. MwSt. Der dargestellte Ab-Preis gilt für firmeninterne Veranstaltungen und entspricht dem niedrigsten Gesamtpreis für Veranstaltungen mit bis zu drei (3) Teilnehmenden.

Termin

Ein Symbol für einen Kalender.
Ganztägig + halbtägig
nach Vereinbarung

Ganztägig oder halbtägig nach Vereinbarung, live online oder vor Ort.

Ihre Vorteile

Ein Symbol für ein Vorgespräch durchführen.
Persönliches Vorgespräch
Ein Symbol für die individuelle Vorbereitung.
Individuelle Vorbereitung
Ein Symbol für Experten aus der Praxis.
Experten aus der Praxis
Ein Symbol für ein Zertifikat.
Inklusive Zertifikat

Unsere Garantien

1. Relevanz-Garantie

Wir passen den Inhalt spezifisch an die Bedürfnisse jedes Teilnehmers an. Irrelevante Themen werden ausgespart, um den größtmöglichen Nutzen zu garantieren.

2. Qualitäts-Garantie

Durch regelmäßiges Feedback optimieren wir unsere Schulungen kontinuierlich und garantieren Ihnen ein Lernerlebnis der Extraklasse.

3. Zufriedenheits-Garantie

Unsere Zufriedenheitsgarantie spricht für sich – bei Unzufriedenheit entstehen Ihnen keine Kosten.

Wir helfen gerne weiter!

Rufen Sie uns an, schreiben eine E-Mail oder nutzen das Kontaktformular.

Schulung anfragen

Unverbindlich · Keine Vorkasse

Einige Unternehmen, für die wir tätig waren

Bayerische Landesbank

RHIEM Intermedia GmbH

Madsack Online GmbH & Co. KG

Teilnehmer

Feedback

Herr Hecker ist sehr gut auf individuelle Wünsche, Fragen und Anregungen eingegangen. Eine sehr informative, interessante und gelungene Veranstaltung.
Teilnehmer

Feedback

Herr Hecker hat das Thema sehr anschaulich dargestellt und ist auf alle Fragen eingegangen. Ich fühle mich jetzt gut vorbereitet, um durchzustarten.
Teilnehmer

Feedback

Die gelassene, professionelle Art hat mir gut gefallen. Kompetent, engagiert, professionell. Gute Beispiele, sympathisches Auftreten. Eigene Themenideen wurden aufgegriffen.
Unser Angebot für Ihre firmeninterne Beratung, Coaching, Workshop, Training und Weiterbildung

Lösungen für Ihren Bedarf an Coaching, Workshop, Training, Schulung und Weiterbildung

Profitieren Sie von unserer langjährigen Expertise in der beruflichen Weiterbildung, modernen Lernmethoden und einem Portfolio von über 600 IT-, Online- und Digital-Beratungsleistungen.
Selbstverständlich lassen sich die einzelnen Themen kombinieren. So erhalten Sie genau die Weiterbildung, die Sie wünschen und brauchen - als Coaching, Workshop, Training, Schulung und Weiterbildung!

✓
Ein Symbol für eine einzelne Person.

Für eine Person

Training & Coaching für Einzelpersonen

  • Passgenaue Inhalte auf den einzelnen Teilnehmer zugeschnitten
  • Ein sehr effektives Format, das schnell Ergebnisse bringt
  • Individuelles Training und Coaching motivieren und wirken
Jetzt anfragen
✓
Ein Symbol für eine Gruppe von Personen.

Für eine Gruppe

Training & Workshops für Teams und Abteilungen

  • Bedarfsgerechte Inhalte auf die Herausforderung der Praxis zugeschnitten
  • Konsequente Praxisorientierung, modernste Techniken und Tools
  • Neue Fähigkeiten und Kenntnisse nachhaltig in den Arbeitsalltag integrieren
Jetzt anfragen
✓
Ein Symbol für ein Unternehmen.

Für eine Firma

Training-Komplett-Lösungen für Ihr Unternehmen‍

  • Ganzheitliche Konzepte für Ihre Mitarbeiterentwicklung
  • Individueller Skill-Katalog zur Erweiterung Ihres internen Weiterbildungsangebots
  • Nachhaltige Personalentwicklung realisieren
Jetzt anfragen

So wird daraus Ihre Firmenschulung

1. Bedarf klären: Im kostenlosen Vorgespräch besprechen wir Ziele, Vorkenntnisse und Praxisaufgaben.

2. Angebot abstimmen: Inhalte, Format (live online oder vor Ort), Dauer und Preis legen wir gemeinsam fest.

3. Schulung durchführen: Sie arbeiten an Übungen aus Ihrem Alltag oder an einem neutralen Beispiel und nehmen konkrete nächste Schritte mit.

Häufige Fragen zur Schulung

Gilt der Ab-Preis pro Person oder für die Veranstaltung?

Die 900 EUR netto sind der niedrigste Gesamtpreis für eine firmeninterne Veranstaltung mit bis zu drei Teilnehmenden. Größere Gruppen und einen anderen Umfang bieten wir individuell an. Der verbindliche Preis steht in Ihrem Angebot.

Können wir eigene Aufgaben einbringen?

Ja. Welche Aufgaben sich eignen, welche Zugänge nötig sind und wie wir die Vertraulichkeit sichern, klären wir im Vorgespräch. Alternativ arbeiten wir an einem neutralen Beispiel.

Ist die Anfrage schon eine Buchung?

Nein. Sie erhalten zuerst ein abgestimmtes Angebot und entscheiden dann über die Beauftragung. Eine Vorkasse gibt es nicht.

Ihre unverbindliche und kostenlose Schulungsanfrage zum Thema

CSS für Entwickler - Beratung, Coaching, Workshop, Training, Schulung und Weiterbildung

Schildern Sie uns kurz Ihren Bedarf. Ziele, Inhalte und Termin stimmen wir persönlich mit Ihnen ab.

Ich interessiere mich für den Termin:

Termin anfragen

Das Angebot von "HECKER CONSULTING" richtet sich ausschließlich an Unternehmen und Behörden (iSv § 14 BGB). Verbraucher (§ 13 BGB) sind vom Vertragsschluss ausgeschlossen. Mit Absendung der Anfrage bestätigt der Anfragende, dass er nicht als Verbraucher, sondern in gewerblicher Tätigkeit handelt. § 312i Abs. 1 S. 1 Nr. 1-3 und S. 2 BGB (Pflichten im elektronischen Geschäftsverkehr) finden keine Anwendung.

Vielen Dank, Ihre Nachricht wurde empfangen!
Beim Absenden des Formulars ist etwas schiefgelaufen.
Beratung, Coaching, Workshop, Training, Schulung

Ähnliche Leistungen, die Sie interessieren könnten.

Wir erweitern ständig unser Beratungsportfolio. Über 600 IT-, Online-, Digital-Beratungsleistungen haben wir für Sie im Programm. Selbstverständlich lassen sich die einzelnen Themen kombinieren. So erhalten Sie genau die Beratung, die Sie wünschen und brauchen - als Coaching, Workshop, Training, Schulung und Weiterbildung!

Mehr IT-, Online-, Digital-Beratungsleistungen anzeigen >>
Nach oben