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>

Uitvoer (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> transpileert naar www/docs.css, <style ns=app,docs> naar beide bundels, en een blok zonder ns= naar de defaultNS uit data/app.json. Zie hoofdstuk 2 voor het namespace-model. Dezelfde attribuut werkt op <script>-blokken.

7.2: Ketens & groepen

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

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

Context: body
Targets: h1 en p (met de samengevoegde :first-letter)
De backslash voor :first-letter plakt dat deel aan de voorgaande selector binnen de keten.

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 plek 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 plek voor globale thematisering.

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

body {
  background: $background
  color: $text
}

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

Uitvoer

: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

De frontend-engine van Phlo bevat 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' → live-updates de waarde van --background in de DOM, 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 hebben onmiddellijk invloed op 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: height: 100dvh
body {
  background: #947b6c
  font-family: Sans-serif
  p: line-height: 2em
}
body: h1, p: \:first-letter: color: green
h1 {
  color: white
  @media (max-width: 768px): color: black
}
p {
  color: navy
  \:last-child: color: yellow
}

Uitvoer

body {
  background: #947b6c;
  font-family: Sans-serif;
}
body h1:first-letter,
body p:first-letter {
  color: green;
}
body p {
  line-height: 2em;
}
h1 {
  color: white;
}
html {
  height: 100dvh;
}
p {
  color: navy;
}
p:last-child {
  color: yellow;
}
@media (max-width: 768px){
  h1 {
    color: black;
  }
}

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: Icon sprites

Point icons in data/app.json at one or more folders of PNG files and the build composes them into a single www/icons.png sprite plus the CSS to use them:

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

Naming convention: save.png becomes class .icon.save; save.dark.png becomes the same class scoped to body.dark, so one icon name can have per-context variants (themes, states). Usage in a view:

<i.icon.save/>

The generated CSS lands in the iconNS bundle (default app) and view() preloads the sprite automatically.

Reference. The DOM resources are documented per node in the Manual, generated from the resource files so it never drifts from the code.

Laatst bijgewerkt op 23-08-2026