CSS, postavitve in odzivnost

Kaj CSS dela

CSS določa, kako je HTML predstavljen. To pomeni:

• barve,
• pisave,
• razmike,
• robove,
• širine,
• poravnave,
• postavitve,
• odzivnost.

Pomembno pa je, da dijak CSS ne dojema samo kot “ličila”, ampak kot sistem pravil, ki ureja prikaz vsebine.

Tri ideje, brez katerih CSS ne steče

Preden greš v Flexbox in Grid, moraš razložiti tri stvari:

• selektorje,
• kaskado,
• box model.

Če tega ni, dijaki kasneje samo ugibajo, zakaj se nekaj ni obarvalo ali zakaj je element “čudno velik”.

Selektorji

Selektor pove, kateri elementi naj dobijo pravilo.

Primeri:

body {
  font-family: sans-serif;
}

h1 {
  margin-bottom: 1rem;
}

.card {
  border: 1px solid #ccc;
}

#glava {
  padding: 1rem;
}

Za začetni predmet zadošča, da dijak razume:

• selektor po elementu,
• selektor po razredu,
• selektor po identifikatorju,
• osnovno gnezdenje in kombiniranje.

Kaskada in specifičnost

To je eden najpomembnejših, a pogosto zanemarjenih konceptov.

Če za isti element velja več pravil, mora brskalnik odločiti, katero pravilo zmaga. Pri tem pomagajo:

• vrstni red pravil,
• specifičnost selektorjev,
• dedovanje nekaterih lastnosti.

Primer:

p {
  color: blue;
}

.opozorilo {
  color: red;
}

Če ima odstavek razred opozorilo, bo praviloma prevladala bolj specifična nastavitev.

Za začetnike ni treba v matematično točkovanje specifičnosti. Dovolj je, da razumejo, da “močnejši” ali pozneje zapisani selektor lahko prepiše prejšnje pravilo.

Box model

Vsak element si lahko predstavljaš kot škatlo:

• vsebina,
• notranji odmik (padding),
• rob (border),
• zunanji odmik (margin).

.card {
  padding: 1rem;
  border: 1px solid #ccc;
  margin-bottom: 1rem;
}

Če dijak ne razume box modela, bo težko razumel prostor med elementi.

Praktična opomba

Zelo uporabno je zgodaj pokazati:

* {
  box-sizing: border-box;
}

S tem širina elementa vključuje tudi padding in border, kar začetnikom močno poenostavi razmišljanje o postavitvi.

Pogoste lastnosti, ki jih res uporabljamo

Za začetni predmet je dovolj majhen, uporaben nabor:

• color
• background
• font-size
• font-family
• font-weight
• line-height
• width, max-width
• margin, padding
• border, border-radius
• display
• gap
• justify-content, align-items

Prevelik seznam lastnosti začetnike samo utopi.

Enote

Dijaki naj spoznajo vsaj:

• px za fiksne mere,
• % za relativne širine,
• rem za bolj prijazne razmake in velikosti,
• vw ali vh samo orientacijsko.

Za razmake in tipografijo je pogosto zelo uporabna praksa, da se uporabi rem, ker se lažje ohranja doslednost.

display in osnovna postavitev

Pred Flexboxom je koristno povedati vsaj toliko:

• blokovni elementi zavzamejo novo vrstico,
• vrstični elementi tečejo po vrstici,
• display lahko spremeni način obnašanja elementa.

To dijakom pomaga razumeti, zakaj div in span nista enaka.

Flexbox – enodimenzijska postavitev

Flexbox je namenjen postavitvam v eni dimenziji:

• vrstica ali
• stolpec.

To je idealno za:

• menije,
• vrstice gumbov,
• kartice v eni osi,
• poravnavanje elementov znotraj komponente.

Primer:

.nav {
  display: flex;
  gap: 1rem;
  align-items: center;
}

Primer stolpca:

.form-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

Zakaj je Flexbox tako uporaben

Ker zelo hitro reši vprašanja:

• kako postaviti elemente v vrsto,
• kako narediti razmik med njimi,
• kako jih poravnati,
• kako naj se obnašajo ob pomanjkanju prostora.

Grid – dvodimenzijska postavitev

Grid je namenjen postavitvam v dveh dimenzijah:

• vrstice,
• stolpci.

To je odlična izbira za:

• večje strukture strani,
• mreže kartic,
• galerije,
• razporejanje vsebine v več stolpcev.

Primer:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

Kdaj Flexbox in kdaj Grid

Dobro praktično pravilo:

• Flexbox uporabi, ko razmišljaš v eni osi,
• Grid uporabi, ko razmišljaš v mreži.

To je poštenejše do dijakov, kot da jim implicitno sporočiš, da se vse na svetu rešuje s Flexboxom.

Odzivnost in mobile-first

Spletne strani ne živijo več samo na velikih monitorjih. Stran mora biti uporabna na telefonu, tablici in računalniku.

Mobile-first pristop

Pri tem pristopu najprej napišeš pravila za manjši zaslon, nato pa jih razširjaš za večje.

Primer:

.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 768px) {
  .grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

To je zelo učljiv in zelo uporaben vzorec.

Tipografija in berljivost

Dober CSS ni samo postavitev. Gre tudi za berljivost.

Osnovne smernice:

• ne uporabljaj premajhne pisave,
• poskrbi za dovolj razmika med vrsticami,
• ne natlači vsebine od roba do roba,
• glavno vsebino omeji z max-width,
• ohrani dovolj kontrasta.

Primer:

body {
  font-family: system-ui, sans-serif;
  line-height: 1.6;
  margin: 0;
}

main {
  max-width: 70ch;
  margin: 0 auto;
  padding: 1rem;
}

Organizacija CSS

Tudi pri malem projektu se hitro zgodi kaos. Zato je dobro zgodaj vpeljati nekaj reda:

• uporabljaj smiselna imena razredov,
• ne piši predolgih selektorjev,
• grupiraj pravila po komponentah ali delih strani,
• ne podvajaj pravil brez potrebe.

Začetnikom ni treba uvajati kompleksnih metodologij, je pa koristno, da vidijo razliko med čistim in kaotičnim slogom.

Pogoste napake

Vse mere so v px

To ni vedno narobe, a pogosto hitro vodi v togo in manj prijazno postavitev.

Manjka box-sizing: border-box

Potem širine pogosto delujejo “čudno”.

Prevelika specifičnost

Predolgi selektorji kasneje otežijo popravljanje slogov.

Flexbox za vse

Flexbox je super, a ni čarobna palica za vsako 2D postavitev.

Videz je vezan na napačen HTML

Če je struktura HTML slaba, CSS običajno postane vedno bolj zapleten.

Kontrolni seznam

1. Ali je stran berljiva brez zoomiranja?
2. Ali je dovolj razmika med elementi?
3. Ali je struktura primerna za Flexbox ali Grid?
4. Ali je postavitev uporabna tudi na telefonu?
5. Ali imajo glavni bloki smiselne širine?
6. Ali nisem pretiraval s selektorji?
7. Ali je kontrast dovolj dober?

Kaj naj dijak zna po tem poglavju

• razumeti osnovne selektorje,
• razložiti box model,
• uporabiti margin in padding,
• narediti meni ali vrstico s Flexboxom,
• narediti mrežo kartic z Gridom,
• s @media prilagoditi postavitev širšim zaslonom.

Najpomembnejše

Če moraš izbrati samo eno sporočilo tega poglavja, naj bo to: najprej struktura, potem postavitev, potem odzivnost. Ko dijaki to ponotranjijo, je CSS precej manj kaotičen.