Czym jest CSS i dlaczego się go używa?

CSS (ang. Cascading Style Sheets) to język arkuszy stylów, który służy do opisywania sposobu prezentacji elementów HTML na stronie internetowej. Umożliwia on oddzielenie warstwy stylu od warstwy struktury, co ułatwia utrzymanie i rozwijanie kodu. Dzięki CSS można kontrolować m.in. kolory, rozmiary, rozmieszczenie czy animacje elementów, co pozwala na poprawę wyglądu oraz dostępności strony.

Materiały:

• MDN Web Docs (PL) – Podstawy CSS
• W3C – Specyfikacja CSS (ENG)

Co reprezentuje model pudełkowy (box model) w CSS?

Model pudełkowy (box model) określa sposób obliczania rozmiarów i rozmieszczenia elementów. Każdy element w CSS jest rozpatrywany jako prostokąt, składający się z:

1. Content (zawartość) – główna treść elementu, np. tekst czy obrazek.
2. Padding – przestrzeń między obramowaniem a zawartością.
3. Border – obramowanie elementu.
4. Margin – zewnętrzny odstęp między elementem a otaczającymi go elementami.

Materiały:

• MDN Web Docs (PL) – Model pudełkowy (box model)

Jakie istnieją rodzaje selektorów CSS i kiedy należy ich używać?

W CSS wyróżnia się kilka podstawowych typów selektorów:

1. Selektory tagów (elementów) – np. p, div, span. Stosuje się je do formatowania wszystkich elementów określonego typu.
2. Selektory klas – np. .nazwa-klasy. Używane w sytuacjach, gdy chcemy zestylizować grupę elementów o tej samej klasie.
3. Selektory identyfikatorów – np. #nazwa-id. Używa się ich do zaznaczenia unikalnego elementu na stronie (występuje tylko raz).
4. Selektory atrybutów – np. input[type="text"]. Pozwalają uzależnić styl od konkretnego atrybutu lub jego wartości.
5. Selektory złożone (kombinatory) – np. z użyciem (descendant), > (child), + (sibling) i ~ (general sibling). Służą do bardziej precyzyjnego powiązania elementów względem ich położenia w strukturze DOM.
6. Pseudoklasy i pseudoelementy – np. :hover, :before, :after. Są wykorzystywane do stylowania stanów i części elementów.

Źródła:

• MDN Web Docs: Rodzaje selektorów (PL)
• W3C: CSS Selectors (EN)

Jak działa kaskadowość (cascade) i specyficzność (specificity) w CSS?

Kaskadowość to mechanizm nakładania stylów z różnych arkuszy (i różnych miejsc w kodzie) na element. Im dalej w drzewie, tym styl jest bardziej szczegółowy. W przypadku konfliktu, styl zdefiniowany "niżej" (np. w pliku importowanym na końcu) ma wyższy priorytet, o ile specyficzność i ważność reguł nie narzucają innych zasad. Specyficzność określa, która reguła ma większą moc w przypadku konfliktu:

1. Najniższa waga: selektor tagu (np. div)
2. Wyższa waga: selektor klasy (np. .klasa)
3. Jeszcze wyższa waga: selektor ID (np. #id-elementu)
4. Najwyższa waga: reguły !important oraz style wbudowane (atrybut style="")

Przykładowo, jeśli mamy konflikt między #footer p a .main p, zwycięży #footer p ze względu na wyższą specyficzność wynikającą z selektora ID.

Źródła:

• MDN Web Docs: Kaskadowość i specyficzność (PL)

Jakie są tryby pozycjonowania elementów (static, relative, absolute, fixed, sticky)?

• static – domyślne pozycjonowanie elementów, które nie jest w żaden sposób modyfikowane. Elementy pojawiają się w kolejności przepływu dokumentu (tzw. flow).
• relative – element jest pozycjonowany względnie względem swojego pierwotnego położenia w normalnym przepływie. Przesunięcia za pomocą właściwości top, left, right czy bottom odnoszą się do oryginalnej pozycji elementu.
• absolute – element jest usuwany z normalnego przepływu i pozycjonowany względem najbliższego przodka, który ma zdefiniowaną pozycję inną niż static. Brak takiego przodka oznacza pozycjonowanie względem okna przeglądarki.
• fixed – element jest pozycjonowany względem okna przeglądarki, co powoduje, że pozostaje w niezmienionym położeniu nawet podczas przewijania strony.
• sticky – łączy cechy relative i fixed. Element zachowuje się jak relative do momentu, aż osiągnie określony próg przewijania, po czym przykleja się do krawędzi okna.

Polecane źródła:

• MDN: Pozycjonowanie w CSS (po polsku)

W jaki sposób wycentrować element w poziomie i w pionie z wykorzystaniem nowoczesnych podejść (np. Flexbox, CSS Grid)?

Flexbox

.container {
  display: flex;
  justify-content: center; /* wyrównanie w poziomie */
  align-items: center;    /* wyrównanie w pionie */
  height: 100vh;          /* przykład pełnego ekranu */
}

CSS Grid

.container {
  display: grid;
  place-items: center; /* wyrównanie w pionie i poziomie */
  height: 100vh;
}

Obydwa podejścia są dużo wygodniejsze i bardziej elastyczne od starszych technik (np. margin: 0 auto razem z inline-block lub manipulacje przy użyciu position i przeliczeń transform).

Polecane źródła:

• MDN: Flexbox (po polsku)
• MDN: CSS Grid Layout (po polsku)

Czym się różni CSS Grid od Flexboxa i w jakich sytuacjach każdy z nich sprawdza się lepiej?

• CSS Grid – przeznaczony do tworzenia dwuwymiarowych układów (zarówno wiersze, jak i kolumny). Jest szczególnie przydatny przy tworzeniu kompleksowych struktur layoutu, gdzie zależy nam na rozbudowanej siatce i precyzyjnym zdefiniowaniu obszarów.
• Flexbox – najlepiej sprawdza się w jednowymiarowych układach (szczególnie rozmieszczenie elementów w jednym wierszu lub kolumnie). Nadaje się znakomicie do prostych i elastycznych układów, list czy pasków nawigacji.

Polecane źródła:

• MDN: Różnice między CSS Grid i Flexbox (po angielsku)
• CSS-Tricks: A Complete Guide to Flexbox (angielski)
• CSS-Tricks: A Complete Guide to Grid (angielski)

Czym są media queries i jak się je stosuje, aby tworzyć responsywne projekty?

Media queries to funkcjonalność w CSS, która pozwala na określenie reguł stylów w zależności od cech urządzenia (np. szerokości ekranu czy orientacji). Dzięki temu można dostosować układ elementów strony, kolory czy rozmiary czcionek do różnych rozdzielczości i urządzeń. Stosowanie media queries polega na definiowaniu bloków kodu w pliku CSS z użyciem dyrektywy @media. Przykładowo:

@media (max-width: 768px) {
  .container {
    width: 100%;
    padding: 10px;
  }
}

Powyższy przykład sprawi, że na ekranach o szerokości do 768px element .container będzie miał szerokość 100% i wewnętrzne wcięcie 10px.

Polecane źródła:

• MDN Web Docs (PL) – Media Queries
• W3C (EN) – Media Queries Level 3

Na czym polega podejście mobile-first i dlaczego warto je rozważyć?

Podejście mobile-first polega na projektowaniu i wdrażaniu witryny w pierwszej kolejności z myślą o urządzeniach mobilnych, a następnie rozszerzaniu i dostosowywaniu projektu dla większych ekranów (tabletów czy komputerów stacjonarnych). Główne zalety to:

1. Lepsza wydajność – Strona jest projektowana tak, aby była wydajna i lekka na małych urządzeniach.
2. Priorytet funkcjonalności – Najważniejsze elementy interfejsu i treści są projektowane w taki sposób, aby użytkownicy mobilni mieli najistotniejsze informacje czytelnie i szybko dostępne.
3. Łatwiejsze skalowanie – Mając sprawnie działający projekt na małych ekranach, łatwiej jest dodać kolejne style dla większych rozdzielczości.

Polecane źródła:

• Kurs Bootstrap (PL) – Artykuł o Mobile First
• Google Developers (EN) – Responsive Web Design Fundamentals

Jaka jest różnica między ::before a ::after?

::before i ::after to tzw. pseudoelementy, które dodają wirtualne elementy przed lub za treścią wybranego elementu. Mogą służyć do generowania zawartości (np. za pomocą właściwości content), ikon lub dekoracyjnych elementów:

• ::before – umieszcza generowaną zawartość przed faktyczną zawartością elementu.
• ::after – umieszcza generowaną zawartość po faktycznej zawartości elementu.

Przykład:

.element::before {
  content: "Przykład: ";
  font-weight: bold;
}

.element::after {
  content: " •";
  color: red;
}

Polecane źródła:

• MDN Web Docs (PL) – Pseudoelementy ::before i ::after
• CSS-Tricks (EN) – ::before and ::after Content

Na czym polegają transformacje (transforms) i przejścia (transitions) w CSS?

• Transformacje (transforms) – Pozwalają na przekształcenie elementu w przestrzeni 2D lub 3D. Można go obracać (rotate), skalować (scale), pochylać (skew) czy przesuwać (translate).

  .rotate {
    transform: rotate(45deg);
  }
  

• Przejścia (transitions) – Umożliwiają zdefiniowanie stopniowej zmiany właściwości CSS w czasie (np. koloru, rozmiaru, pozycji). Wystarczy wskazać, które właściwości ulegną zmianie oraz zdefiniować czas trwania.

  .box {
    transition: background-color 0.3s ease;
  }
  .box:hover {
    background-color: #f00;
  }
  

Polecane źródła:

• MDN Web Docs (PL) – transform
• MDN Web Docs (PL) – transition

Czym są preprocesory CSS, takie jak SASS czy LESS, i jakie korzyści zapewniają?

Preprocesory CSS (np. SASS czy LESS) to narzędzia, które pozwalają na pisanie kodu CSS w bardziej zorganizowany i efektywny sposób. Oferują m.in.:

• Zmienną – umożliwiają definiowanie wartości (np. kolorów) w jednym miejscu i wykorzystywanie ich w wielu plikach.
• Zagnieżdżanie reguł – pozwalają na bardziej czytelne pisanie struktur selektorów w stylu drzewiastym.
• Mixiny – fragmenty kodu wielokrotnego użytku, dzięki którym można łatwo wstawiać skomplikowane reguły wraz z dynamicznymi parametrami.
• Funkcje i operacje matematyczne – dają możliwość wykonywania obliczeń bezpośrednio w plikach styli.

Korzystanie z preprocesorów upraszcza utrzymanie dużych projektów i ułatwia wprowadzanie zmian w jednym miejscu, co poprawia czytelność i minimalizuje redundancję kodu.

Dodatkowe materiały

• Artykuł w języku polskim: Co to jest SASS? - Samouczek Programisty

Na czym polega konwencja nazewnictwa BEM (Block Element Modifier) i dlaczego jest przydatna?

BEM (Block Element Modifier) to konwencja organizacji i nazewnictwa klas w kodzie CSS.

• Block – samodzielny blok funkcjonalny (np. menu, header).
• Element – część bloku, bez znaczenia jeśli jest wyjęty z kontekstu bloku (np. menu__item).
• Modifier – wariant wyglądu lub stanu określonego bloku/elementu (np. menu__item--active).

Ta metodologia pomaga unikać kolizji nazw klas, uprościć utrzymanie kodu oraz ustandaryzować styl pisania reguł. Dzięki temu deweloperzy mogą szybciej odnajdywać się w projekcie i łatwiej pracować równolegle nad różnymi jego częściami.

Dodatkowe materiały

• Artykuł w języku polskim: BEM – jak sobie ułatwić nazewnictwo klas w CSS
• Oficjalna dokumentacja (EN): BEM Methodology

Czym jest krytyczny CSS (critical CSS) i jak można go wdrożyć?

Krytyczny CSS to pojęcie oznaczające minimalny zestaw stylów niezbędnych do poprawnego wyświetlenia zawartości widocznej natychmiast po załadowaniu się strony (tzw. Above the Fold). Wdrożenie polega na wyizolowaniu tych kluczowych reguł i umieszczeniu ich wewnątrz znaczników <style> w sekcji <head>, dzięki czemu przeglądarka może szybciej zrenderować podstawowy widok strony. Reszta stylów może zostać wczytana asynchronicznie (np. poprzez mechanizm lazy loading).

W praktyce stosowane jest narzędzie Critical lub podobne skrypty, które automatycznie generują krytyczne CSS na podstawie konkretnej ścieżki URL.

Polecane źródła:

• Projekt Critical (EN)

Czym są rozwiązania CSS-in-JS (np. styled-components, Emotion) i czym różnią się od tradycyjnego podejścia?

CSS-in-JS to podejście polegające na definiowaniu styli bezpośrednio w kodzie JavaScript (np. w środowisku React). Umożliwia to dynamiczne modyfikowanie stylów w zależności od stanu komponentu czy atrybutów przekazywanych do niego.

• W styled-components czy Emotion tworzy się komponenty stylowane za pomocą składni szablonowej (Template Literals w JS) lub obiektów JavaScript.
• Główną zaletą jest enkapsulacja stylów – unikamy kolizji nazw klas z innymi modułami, a także zyskujemy prostsze mapowanie stylów na logikę komponentu.
• W odróżnieniu od tradycyjnego podejścia, gdzie piszemy kod w plikach *.css, a potem dołączamy do szablonów, CSS-in-JS pozwala utrzymać całą logikę i styl w jednym pliku z komponentem.

Polecane źródła:

• Oficjalna dokumentacja styled-components (ang.)
• Emotion – dokumentacja (ang.)

Czym są zmienne CSS (Custom Properties) i czym różnią się od zmiennych w preprocesorach?

Zmienne CSS, zwane również Custom Properties, to mechanizm wbudowany w specyfikację CSS, który pozwala na definiowanie i wykorzystanie własnych właściwości w arkuszu stylów. Różnią się one od zmiennych w preprocesorach (Sass, LESS) tym, że:

• Działają w czasie rzeczywistym w przeglądarce, dzięki czemu mogą być dynamicznie zmieniane za pomocą JavaScriptu (np. w celu przełączenia motywu).
• Są dostępne w kaskadzie CSS – można je definiować w różnych miejscach (np. w :root lub w innych selektorach) i korzystać z ich dziedziczenia.
• Nie wymagają kompilacji, ponieważ są natywną funkcją CSS, a nie wstępną transformacją kodu.

Polecane źródła:

• MDN: Korzystanie z właściwości niestandardowych CSS (pl)
• Oficjalna specyfikacja W3C dot. Custom Properties (ang)