magdo
39 lines
2.3 KiB
TeX
39 lines
2.3 KiB
TeX
\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}
|