Pytania rekrutacyjne dla Front-end developerów

Konwencje nazewnictwa w CSS pomagają w utrzymaniu czytelnego, zrozumiałego i łatwego do zarządzania kodu. Oto najczęściej stosowane metody:

1. BEM (Block Element Modifier)

BEM pomaga tworzyć czytelne i uporządkowane klasy CSS, dzieląc je na trzy części:
✅ Blok – główny element, np. menu
✅ Element – część bloku, np. menu__item
✅ Modyfikator – zmienia wygląd elementu, np. menu__item--active

.menu {
  background-color: blue;
}

.menu__item {
  color: white;
}

.menu__item--active {
  font-weight: bold;
}

2. OCSS (Object-Oriented CSS)

OCSS polega na podziale stylów na:
✅ Strukturę – czyli ogólne bloki używane w różnych miejscach (.media, .grid)
✅ Wygląd (skórki) – które zmieniają styl elementu (.media--highlighted)

.media {
  display: flex;
  align-items: center;
}

.media--highlighted {
  background-color: yellow;
}

Dzięki temu łatwiej ponownie używać kodu i unikać duplikacji.

3. SMACSS (Scalable and Modular Architecture for CSS)

SMACSS pomaga organizować CSS w logiczne części:
✅ Baza – ogólne style (body { font-family: Arial; })
✅ Layout – układ strony (.container, .header)
✅ Moduły – małe komponenty (.button, .card)
✅ Stan – specjalne modyfikacje (.is-active, .is-hidden)
✅ Tematy – zestawy stylów np. jasny i ciemny motyw

.button {
  padding: 10px;
  background-color: blue;
}

.button.is-active {
  background-color: red;
}

4. Atomic CSS

Atomic CSS polega na używaniu bardzo małych klas, które robią tylko jedną rzecz.
✅ Zamiast dużych klas, używa się wielu małych (np. .text-center, .p-10).

.text-center {
  text-align: center;
}

.p-10 {
  padding: 10px;
}

.bg-blue {
  background-color: blue;
}

5. SUIT CSS

Podobna do BEM, ale z innym stylem pisania:
✅ Komponenty – ComponentName (np. Button)
✅ Elementy – ComponentName-descendant (np. Button-text)
✅ Modyfikatory – ComponentName--modifier (np. Button--large)

.Button {
  padding: 10px;
  background: blue;
}

.Button--large {
  font-size: 20px;
}

Rem i Em to jednostki miary wielkości w css, używa się ich do ustawiania wielkości cziconki.

• Em stanowi odniesienie do wielkości czcionki rodzica
• Rem stanowi odniesienie do wielkości czcionki dokumentu głównego (roota, którym najczęściej jest znacznik html).

Można użyć kilku sposobów:

• margin: auto;
• Flexbox
• Grid
• CSS Transform i Position: absolute

Każdy element w dokumencie HTML zajmuje określony obszar. Obszar ten nazywany jest pudełkiem i składają się na niego:

• zawartość (content)
• „marginesy” wewnętrzne (padding)
• obramowanie (border)
• marginesy (margin)

Wszystkie te opcje wpływają na wielkość pudełka. Domyślnie wielkość pudełka ustawiona jest na zawartość content-box, co oznacza, że jeśli ustawisz szerokość lub wysokość elementu np. na 200px i dodasz do niego paddingi, obramowanie lub marginesy, to wielkość pudełka zwiększy się o te dane.

Jeśli chcesz, aby paddingi lub obramowanie nie zwiększały rozmiarów pudełka na zewnątrz, możesz ustawić mu zawartość padding-box lub border-box.

Dostępne opcje dla atrybutu box-sizing: content-box | border-box | padding-box