SCSS a AI asistence při stylování

Asistent při psaní stylů

Asistent v editoru umí styly psát rychleji, než je stihneme napsat sami. Zároveň umí sebejistě napsat nesmysl, takže se z něj stává užitečný nástroj až ve chvíli, kdy víme, co po něm chtít a jak výstup zkontrolovat.

Na čem se osvědčí

Nejlíp mu jde to, co je otravné a dobře popsatelné: převod hotového CSS na mixin, doplnění všech stavů k tlačítku, přepsání barev na tokeny, řada responzivních variant, dopsání komentářů. Tedy práce, u které dopředu víme, jak má výsledek vypadat, a kontrola je rychlá.

Kde selhává

Rozhodnutí o vzhledu za nás neudělá – vyrobí průměr toho, co viděl. A hlavně je vždycky trochu pozadu: na Tailwind vám s velkou pravděpodobností nabídne tailwind.config.js a trojici direktiv @tailwind, protože tak se to psalo v předchozí velké verzi a takových návodů viděl nejvíc. U novinek typu container queries nebo :has() sáhne radši po starším řešení, které dobře zná.

Jak zadávat

Obvykle:

Uděláš mi CSS na kartu?

Líp:

Projekt používá nativní CSS a tokeny na :root (--color-surface,
--color-border, --space-2). Napiš pravidla pro .card: rámeček, zaoblení,
vnitřní odsazení a obsah pod sebou. Barvy ber jen z tokenů, nové nezaváděj.

Rozdíl nedělá délka, ale tři věci: kontext (co v projektu je), jedna úloha místo pěti a hranice toho, co se dělat nemá.

Kontrola je naše práce

Poslední krok kola se nedá přeskočit a nedá se ani delegovat zpátky na asistenta. Kontroluje se ve třech místech: v prohlížeči, jestli to dělá, co má; v dokumentaci, jestli použité vlastnosti znamenají to, co si myslíme; a očima, jestli tam není něco navíc, co jsme nechtěli.