O čem to bude

• Architektura stylování bez preprocesorů nebo frameworků
• Techniky, které takový styl umožňují
• Mylné představy a špatná srovnávání

A o čem moc ne

• Detaily nových vlastností v CSS

Mám rád nové technologie, ale je tohle nutné?

• za 2 roky přepsat
• použít novou, "daleko lepší" knihovnu
• jít all-in přístupem (Tailwind; některé knihovny komponent)
• použít alespoň 1x za hodinu !important
• používat syntaktické workaroundy (BEM)
• podporovat pouze 2 poslední verze prohlížečů
• bojovat proti kaskádě a specificitě

Požadavky na stylovací systém

• trvanlivost
• jednodušší předání od designéra
• konzistentnost
• responzivita od hodinek po ultra-wide
• ze základu umožnit poskládat různé projekty (jako lego)
• funkční i když minimální v základu, možnost později cokoliv změnit
• adaptivnost - připravenost na RTL, dark mode a další

Omezit možnosti

Nedostatky CSS

Zanořování pravidel a media queries → nesting

.parent {
  /* parent rules */
  .child {
    /* child of parent rules */
  }
}

@media (min-width: 768px) {
  .parent {
    /* some rules */
  }
}

.parent {
  @media (min-width: 768px) {
    /* some rules */
  }
}

Nedostatky CSS

Omezení CSS pravidel na komponentu → scoping

<div class="list">
  <div class="item">
    <slot class="slot"></slot>
  </div>
</div>

<style>
  @scope (.list) to (.slot) {
    /* Scoped styles target only inside `.card` but not inside `.slot` */
    :scope {
    }

    .item {
    }
  }
</style>

Nedostatky CSS

Proměnné → custom properties

:root {
  --brand-color: var(--blue-7);
}

.stack {
  --stack-space: var(--space-5);
}

@container style(--theme-x) {
}

@media (--mobile) {
}

@property --accent-color {
  syntax: "<color>";
  inherits: true;
  initial-value: rebeccapurple;
}

Nedostatky CSS

Nedosažitelné a špatně se chovající barvy → color spaces, oklab()

.my-gradient {
  --hdr-gradient: linear-gradient(
    to right in oklab,
    oklch(70% 0.5 340) 0%,
    oklch(90% 0.5 200) 100%
  );
  --sdr-gradient: linear-gradient(to right, #ff00fa 0%, #0ff 100%);

  background: var(--hdr-gradient);
}

Nedostatky CSS

Priorita pravidel je moc složitá → cascading layers, :where()

:where(body) {
  background: var(--bg-color-body);
}

@import "./base.css" layer(base);
@import "./theme.css" layer(theme);

Nedostatky CSS

Lokální responzivita → container queries, clamp()

form {
  container-type: inline-size;
}

@container (10em <= width <= 20em) {
  /* styles */
}

Nedostatky CSS

Preference uživatelů → prefers-color-scheme, prefers…

@media (prefers-color-scheme: dark) {
  :root {
    --text-color-1: var(--gray-1);
  }
}

@media (prefers-reduced-motion: no-preference) {
  ...
    transition: outline-offset 145ms var(--ease-2);
  ...
}

Nedostatky CSS

Různorodé jazyky → logical properties

.card {
  margin-inline: var(--space-4);
  margin-block: var(--space-6);
  max-inline-size: var(--size-content-2);
}

Techniky

• Open Props
• Utopia
• Every Layout
• ITCSS

Open Props

Modulární škály

:root {
  /* 18.0px => 20.0px */
  --space-4: clamp(1.125rem, 1.08rem + 0.22vw, 1.25rem);
  /* 27.0px => 30.0px */
  --space-5: clamp(1.688rem, 1.62rem + 0.33vw, 1.875rem);
}

Every Layout

ITCSS

Ukázka

<div class="card p-flow">
  <h2 class="heading">Project</h2>
  <p class="description">Enter new project name</p>
  <div class="form-field">
    <label class="p-secondary-text-bold">Name</label>
    <input type="text" />
  </div>
  <div class="p-cluster">
    <button>Cancel</button>
    <button>Submit</button>
  </div>
</div>

<style scoped>
  .card {
    border-radius: var(--radius-default);
    padding: var(--space-4);
  }

  .heading {
    font-size: var(--font-size-body);
  }
  /* ... */
</style>

Ukázka přizpůsobení - TinyCard

<style>
  :root {
    --space-1: 2px;
    --space-2: 0.3rem;
    --space-3: 0.5rem;
    --space-4: 0.7rem;
    --radius-default: 2rem;
    --button-height-default: 1.8rem;
    --font-size--1: 0.8rem;
    --font-size-0: 0.9rem;
  }
</style>

Knihovna Puleo CSS

Shrnutí

• Nativní podpora v prohlížečích se dost posunula
• Techniky a nástroje nejsou přímočaré nebo standardizované
  (narozdíl třeba od Tailwindu)
• CSS je mocné a vlastní design je možné tvořit rychle
  (možné nemusí znamenat jednoduché)