Zadanie końcowe – Moduł 2 – CSS ekspercki – techniki i wydajność

Na koniec Modułu 2 masz okazję sprawdzić swoją wiedzę w praktyce. Zadanie polega na stworzeniu komponentu w pełni zgodnego z zasadami, które poznałeś w tym module. Skoncentruj się na jakości kodu, przemyślanej strukturze, użyciu zmiennych i wydajnych selektorów.

Cel zadania

Zaprojektujesz komponent „karta produktu” (product card), który:

jest w pełni stylowany za pomocą klas, bez stylowania po tagach HTML,
jest skalowalny (można go umieścić w różnych kontekstach bez konfliktów),
używa zmiennych CSS do kolorów i layoutu,
ma wersję w motywie jasnym i ciemnym (light/dark mode),
jest zgodny z konwencją BEM (nawet uproszczoną).

Co powinno się znaleźć w karcie?

Struktura komponentu (HTML):

<div class="product-card">
  <img src="product.jpg" alt="Nazwa produktu" class="product-card__image">
  <h3 class="product-card__title">Nazwa produktu</h3>
  <p class="product-card__description">Krótki opis produktu.</p>
  <span class="product-card__price">199 zł</span>
  <button class="product-card__button">Kup teraz</button>
</div>

Struktura stylów (CSS lub SCSS):

Użyj :root do zdefiniowania zmiennych globalnych (kolory, radius, spacing),
Użyj body.dark do nadpisania zmiennych w trybie ciemnym,
Nie styluj tagów (h3, p itd.) – tylko klasy,
Każdy element ma swoją klasę komponentową – np. .product-card__button, a nie .btn,
Nie zagnieżdżaj selektorów głębiej niż 2 poziomy.

Podpowiedzi

Jeśli nie pamiętasz, jak działają zmienne CSS – wróć do lekcji 2.2: Praca z CSS variables na dużą skalę
Jeśli nie jesteś pewien, jak poprawnie tworzyć komponenty z BEM – zobacz lekcję 2.1: Architektura CSS
Jeśli masz wątpliwości, jak unikać konfliktów – przypomnij sobie 2.4: Minimalizacja konfliktów

Wersja ciemna – wymaganie

Dodaj klasę .dark do <body>, która zmieni wygląd komponentu. Wystarczy zmienić kolory – nie pisz nowych stylów, tylko nadpisz zmienne:

body.dark {
  --color-bg: #121212;
  --color-text: #eeeeee;
  --color-accent: #00bcd4;
}

Efekt końcowy

Twój komponent powinien:

wyglądać dobrze w obu trybach (jasnym i ciemnym),
mieć przejrzystą strukturę klas,
nie kolidować ze stylami globalnymi,
być możliwy do ponownego użycia w dowolnym miejscu.

Jak przetestować?

Wklej komponent do pustej strony HTML lub JSFiddle i sprawdź:

Czy można go wkleić 2 razy na stronie i każdy działa niezależnie?
Czy zmiana trybu ciemnego działa po dodaniu klasy .dark?
Czy nie trzeba używać !important?

Wniosek

To ćwiczenie łączy wszystkie kluczowe umiejętności z tego modułu. Jeśli coś sprawia trudność – śmiało wracaj do odpowiednich lekcji. Dobry CSS nie powstaje na szybko – ale dzięki architekturze, zmiennym i klasom komponentowym, zbudujesz kod, który będzie działał dzisiaj, jutro i za rok.

Previous Zagadnienie

Back to Zagadnienie

Next Quiz