7: CSS

Phlo gebruikt een compacte, puntkomma-vrije CSS-syntaxis binnen <style>-blokken.
Je schrijft regels met dubbele punten als scheidingstekens:

• selector: property: value
• genest: A: B: property: value → uitvoer: A B { property: value; }

Regels:

• Één regel = één declaratie. Geen puntkomma's in de bron; de engine voegt ze toe.
• De dubbele punt : scheidt ketenniveaus evenals eigenschap van waarde.
• Een backslash \ in genestingen "lijmt" het volgende selectorgedeelte aan de ouder (lijm). Dat volgende gedeelte kan een pseudo (:…), een attribuutselector ([…]), enzovoort zijn.
• @media (…) kan binnen een selectorgroep verschijnen; Phlo verplaatst het naar de juiste plaats terwijl de huidige selector behouden blijft.

7.1: `<style>` blok

<style>
html: height: 100dvh
body {
  background: #947b6c
  font-family: Sans-serif
  p: line-height: 2em
}
</style>

Output (conceptueel):

html { height: 100dvh; }
body { background: #947b6c; font-family: Sans-serif; }
body p { line-height: 2em; }

Een <style> blok kan één of meer bundel namespaces targeten met ns=: <style ns=docs> compileert naar www/docs.css, <style ns=app,docs> naar beide bundels, en een blok zonder ns= naar de defaultNS van data/app.json. Zie hoofdstuk 2 voor het namespace model. Dezelfde attribuut werkt op <script> blokken.

7.2: Ketens & groepen

Keten met dubbele punten; groepeer met komma's, en de volledige context wordt op elk item toegepast.

<style>
body: h1, p: \:first-letter: color: green
</style>

• Context: body
• Doelen: h1 en p (met de samengevoegde :first-letter)
• De backslash voor :first-letter voegt dat deel samen met de voorafgaande selector binnen de keten.

Uitvoer:

body h1:first-letter,
body p:first-letter { color: green; }

7.3: Media queries binnen een selector

Je kunt @media (…) binnen het selectorblok schrijven; Phlo verplaatst het naar de juiste plaats en behoudt de selectorcontext:

<style>
h1 {
  color: white
  @media (max-width: 768px): color: black
}
</style>

Uitvoer:

h1 { color: white; }
@media (max-width: 768px){
  h1 { color: black; }
}

7.4: Variabelen

Phlo ondersteunt CSS-variabelen via $names. Je kunt variabelen definiëren in :root, of op elk ander niveau, maar :root is de gebruikelijke plaats voor globale theming.

<style>
:root {
  $background: #0d0d0d
  $surface: #1a1a1a
  $text: #ffffff
  $accent: #ff4a00
}

body {
  background: $background
  color: $text
}

button {
  background: $accent
  color: $text
}
</style>

Output

:root {
  --background: #0d0d0d;
  --surface: #1a1a1a;
  --text: #ffffff;
  --accent: #ff4a00;
}

body {
  background: var(--background);
  color: var(--text);
}

button {
  background: var(--accent);
  color: var(--text);
}

👉 Phlo converteert automatisch $variables naar --custom-properties en gebruikt var(--...) waar ze worden verwezen. Je kunt variabelen overal hergebruiken, inclusief binnen media queries en geneste selectors.

7.5: Dynamische variabelen

Phlo's frontend engine omvat de DOM/CSS.var bibliotheek, waarmee je gedefinieerde $variables in CSS rechtstreeks vanuit JavaScript kunt lezen en bijwerken, via het globale app.var object.

Elke $variable in je CSS is automatisch beschikbaar als app.var.<name>.

Voorbeeld

<style>
:root {
  $background: #0d0d0d
  $text: #ffffff
}
</style>

<script>
app.var.background = '#000000'
const textColor = app.var.text
</script>

• app.var.background = '#000000' → werkt de waarde van --background in de DOM live bij, zonder een rebuild of reload.
• const textColor = app.var.text → leest de huidige waarde terug.

👉 Deze updates werken in real time in de browser en beïnvloeden onmiddellijk alle elementen die de variabele gebruiken.

Je kunt dit gebruiken voor onder andere:

• Thema wisselingen (donker/licht modus)
• Dynamisch aanpassen van accentkleuren op basis van gebruikersinvoer
• Interactieve UIs zonder aparte CSS-klassen te toggelen

Hoe het werkt

• De CSS-engine converteert $background naar --background.
• De frontend-engine leest/schrijft het via document.documentElement.style.
• app.var biedt een eenvoudig proxy-object, zodat je hiermee kunt werken alsof het gewone JS-eigenschappen zijn.

7.6: Volledig voorbeeld

Invoer

html: hoogte: 100dvh
body {
  achtergrond: #947b6c
  lettertype: Sans-serif
  p: regelhoogte: 2em
}
body: h1, p: \:eerste-letter: kleur: groen
h1 {
  kleur: wit
  @media (max-breedte: 768px): kleur: zwart
}
p {
  kleur: marineblauw
  \:laatste-kind: kleur: geel
}

Uitvoer

body {
  achtergrond: #947b6c;
  lettertype: Sans-serif;
}
body h1:first-letter,
body p:first-letter {
  kleur: groen;
}
body p {
  regelhoogte: 2em;
}
h1 {
  kleur: wit;
}
html {
  hoogte: 100dvh;
}
p {
  kleur: marineblauw;
}
p:last-child {
  kleur: geel;
}
@media (max-breedte: 768px){
  h1 {
    kleur: zwart;
  }
}

7.7: Best practices

• Gebruik $variables voor kleuren, ruimte en lettertypen; dit maakt thematisering en donkere/lichtmodus eenvoudig.
• Definieer globale themavariabelen in :root.
• Gebruik selectorketens en groepering voor compacte, leesbare code.
• Plaats @media direct binnen de blok; Phlo verplaatst het naar de juiste plaats.
• Gebruik \ in nesten om pseudos of attributen aan de bovenliggende selector te koppelen.
• Geen puntkomma's in je code; Phlo produceert correcte CSS-uitvoer.

7.8: Pictogrammen sprites

Wijs icons in data/app.json aan één of meer mappen van PNG-bestanden en de build samenvoegt ze tot een enkele www/icons.png sprite plus de CSS om ze te gebruiken:

{
    "icons": "%app/icons/",
    "iconNS": "app"
}

Naamgevingsconventie: save.png wordt klasse .icon.save; save.dark.png wordt dezelfde klasse beperkt tot body.dark, zodat één pictogramnaam per-context varianten kan hebben (thema's, toestanden). Gebruik in een view:

<i.icon.save/>

De gegenereerde CSS komt in de iconNS bundle (standaard app) en view() laadt de sprite automatisch voor.