7. CSS - Phlo

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

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

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

Benamingconventie: save.png wordt klasse .icon.save; save.dark.png wordt dezelfde klasse die is 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.