Variables - zmienne w CSS

Kiedy stosować zmienne w CSS:?

Zmienne w CSS, znane również jako niestandardowe właściwości, są bardzo przydatne do zarządzania wartościami, które są wielokrotnie używane w kodzie.
1. Spójność stylów: Zmienne są idealne do utrzymania spójności stylów w całym projekcie. Możesz zdefiniować kolory, rozmiary czcionek, odstępy itp. w jednym miejscu i używać ich w różnych miejscach kodu.
2. Łatwość aktualizacji: Zmienne ułatwiają aktualizację wartości. Zamiast zmieniać każdą instancję koloru lub rozmiaru czcionki, wystarczy zmienić wartość zmiennej w jednym miejscu.
3. Tematyzacja: Zmienne są świetne do tworzenia różnych tematów dla aplikacji. Możesz zdefiniować zestawy zmiennych dla różnych tematów i łatwo przełączać się między nimi.
4. Redukcja powtarzalności: Zmienne pomagają zredukować powtarzalność kodu, co sprawia, że jest on bardziej czytelny i łatwiejszy do utrzymania.
5. Przykład variables

Dobre praktyki dla stosowania szmiennych w CSS
1. Nazewnictwo zmiennych: Używaj opisowych nazw, które jasno wskazują, do czego zmienna jest używana. Stosuj konwencję: małe litery oddzielone myślnikami dla nazw zmiennych
   (przykład: --primary-color: #3498db; --secondary-color: #2ecc71;).
2. Organizacja zmiennych: Deklaruj zmienne w bloku :root na początku pliku CSS, aby były łatwo dostępne globalnie. Grupuj zmienne według ich przeznaczenia (np. kolory, rozmiary, odstępy) dla lepszej czytelności.
3. Używanie zmiennych w media queries: Zmienne mogą być używane w media queries, co ułatwia zarządzanie responsywnymi stylami.
4. Wartości domyślne: Używaj wartości domyślnych (fallback values) w funkcji var(), aby zapewnić kompatybilność z przeglądarkami, które nie obsługują zmiennych
   (przykład: body { color: var(--primary-color, #000000);} ).
5. Unikaj nadmiernego użycia zmiennych: Chociaż zmienne są bardzo przydatne, unikaj nadmiernego ich używania, co może prowadzić do nieczytelnego kodu. Stosuj je tam, gdzie rzeczywiście przynoszą korzyści.
6. Dokumentacja: Dokumentuj zmienne w kodzie (używaj komentarzy), aby inni deweloperzy mogli łatwo zrozumieć ich przeznaczenie i sposób użycia.

cw 670

• Utwórz dokument cw670.html oraz cw670.css
• Zaimplementuj kod z przykładu

  kod html

• Dodaj sekcję pentagon, w której umieścisz pięć bloków sformatowanych na kształt okręgu i ułożonych w taki sposób, aby ich centralne punkty były usytuowane na wierchołkach pięcioboku równobocznego (patrz załączony zrzut ekranu).
• Podziel obszar main na dwie sekcje w proporcjach 60/40
• W sekcji zajmującej 60% pozostaw wszystko co dotychczas byo na stronie.
• W sekcji zajmującej 40% zaproponuj własne elementy (minimum trzy różne), po tytułem: Technologia i Gadżety:
  Powinny się tu znaleźć:
  • Nowinki technologiczne, recenzje najnowszych smartfonów, komputerów, konsol do gier itp.
  • Nagłówek dla artykułu
  • Krótki opis
  • Foto + odnośnik do filmu z recenzją (może być własna)
• Zmodyfikuj styl tak, aby otrzymać efekt podobny jak na załączonym obrazie. Przykład

 

Pytania i odpowiedzi: