\section{Stílusozás}

\begin{frame}{A CSS megközelítések áttekintése}
  \begin{itemize}
    \item \textbf{Globális CSS:} hagyományos, minden komponens látja --- névütközések kockázatával.
    \item \textbf{CSS Modules:} minden komponensnek saját, automatikusan lokalizált CSS osztályai vannak --- nincs névütközés.
    \item \textbf{CSS-in-JS} (pl. styled-components, Emotion): közvetlenül JavaScript-ben írunk stílusokat, dinamikus értékek könnyen használhatók.
    \item \textbf{Utility-first} (Tailwind CSS): előre definiált kis osztályokat kombinálunk --- nincs saját CSS fájl.
  \end{itemize}
\end{frame}

\begin{frame}{Mi az a Tailwind CSS?}
  \begin{block}{Az alapötlet}
    A Tailwind CSS nem komponenseket, hanem apró, egy-egy CSS tulajdonságot képviselő \textbf{utility osztályokat} ad. Ezeket közvetlenül a JSX-be írjuk --- pl. \texttt{flex}, \texttt{pt-4}, \texttt{text-gray-700}.
  \end{block}
  \vspace{0.5em}
  \begin{itemize}
    \item Előny: nem kell kitalálni osztályneveket, nincsenek névütközések, konzisztens design tokenek.
    \item Hátrány: a JSX-ben hosszú osztálylisták keletkezhetnek --- komponens-szintű absztrakciókkal kezelhető.
  \end{itemize}
\end{frame}

\begin{frame}{Design rendszer gondolkodás}
  \begin{itemize}
    \item Jól felépített alkalmazásban definiálunk \textbf{UI primitíveket}: \texttt{Button}, \texttt{Input}, \texttt{Card}, \texttt{Badge} stb.
    \item Ezek belül rejtenek el minden stílust --- a felhasználójuk csak a variánst adja meg (pl. \texttt{variant="primary"}).
    \item \textbf{Egységes spacing, színek, tipográfia:} ezeket design tokenek (Tailwind config vagy CSS változók) rögzítik, nem ismétlünk hardcoded értékeket.
  \end{itemize}
\end{frame}

\begin{frame}{Hozzáférhetőség (accessibility)}
  \begin{itemize}
    \item \textbf{Kontraszt:} a szöveg és háttér közötti kontraszt arány elégítse ki a WCAG irányelveket.
    \item \textbf{Fókuszállapot:} billentyűzettel is navigálható legyen az oldal --- a fókuszjelzőt ne távolítsuk el.
    \item \textbf{Szemantikus HTML:} helyes heading hierarchia, gomb valóban \texttt{<button>}, ne \texttt{<div onClick>}.
    \item \textbf{ARIA attribútumok:} ahol a HTML szemantika nem elég (pl. egyedi komponensek).
  \end{itemize}
\end{frame}