HTML
U današnje vrijeme je praktički nezamislivo nešto napisati na webu bez upotrebe HTML-a. Kako bi napravili što bolje preduvjete, ovdje ćete pronaći sve informacije kako pisati HTML.
Osnovna sintaksa (BEM)
Način na koji pišemo HTML markup se temelji na BEM metodologiji.
Što je BEM?
BEM – Block Element Modifier je metodologija koja vam pomaže da stvorite komponente za višekratnu upotrebu i dijeljenje koda u razvoju front-enda. BEM je vrlo korisna, moćna i jednostavna konvencija imenovanja koja olakšava čitanje i razumijevanje koda za front-end.
BEM je vrlo korisna, moćna i jednostavna konvencija imenovanja koja olakšava čitanje i razumijevanje koda za front-end.
Poznata je činjenica da styleguide može značajno povećati brzinu razvoja, otklanjanje pogrešaka i implementaciju novih značajki u starom kodu. Nažalost, većina CSS kodnih baza ponekad se razvija bez ikakvih struktura ili naziva. To dovodi do neodržive baze CSS kôda u dugoročnom razdoblju.
BEM pristup osigurava da svatko tko sudjeluje u razvoju web-stranice radi s jednom bazom kôda i govori isti jezik. Korištenjem odgovarajućeg imenovanja, promjene u dizajnu web-stranice biti će izuzetno lagane.
Kako pisati BEM?
Blok
Obuhvaća samostalni entitet (modul/komponenta) koji je sam po sebi smislen. Dok blokovi mogu biti međusobno ugniježđeni i međusobno povezani, oni ostaju semantički jednaki; nema prioriteta ili hijerarhije. Holistički entiteti bez DOM-a (kao što su kontroleri ili modeli) mogu biti i blokovi.
Nazivanje
Nazivi blokova mogu se sastojati od latiničnih slova, znamenki i crtica. Da biste stvorili CSS klasu, dodajte kratki prefiks za imenovanje:
.blok
HTML
Bilo koji element u DOM-u može biti blok ako prihvaća ime klase.
...
CSS
- Koristite kao selektor samo naziv klase
- Ne upotrebljavati ID ili naziv taga kao selektor
- Nema ovisnosti o drugim elementima/blokovima na stranici
.blok { color: #000; } Element
Dijelovi bloka koji nemaju samostalno značenje. Bilo koji element je semantički vezan za svoj blok.
Nazivanje
Nazivi elemenata mogu se sastojati od latiničnih slova, znamenki, crtica i donjih crta. CSS klasa se formira kao ime bloka + dvije donje crte (__) + naziv elementa:
.blok__element
HTML
Bilo koji tag unutar bloka može biti element. Unutar danog bloka, svi elementi su semantički jednaki.
...
CSS
- Koristite kao selektor samo naziv klase
- Ne upotrebljavati ID ili naziv taga kao selektor
- Nema ovisnosti o drugim elementima/blokovima na stranici
.blok__element { color: #000; } Modifikator
Modifikatori na blokovima ili elementima. Koristite ih za promjenu izgleda, ponašanja ili stanja
Nazivanje
Imena modifikatora mogu se sastojati od latiničnih slova, znamenki, crtica i donjih crta. CSS klasa se formira kao ime bloka ili elementa + dvije crtice:
.blok--modifikator.blok__element--modifikator
HTML
Modifikator je dodatno ime klase koje dodajete u blok/element. Dodajte klase modifikatora samo blokovima/elementima koje modificiraju i zadržite izvornu klasu:
...
CSS
- Koristite klasu bloka kao osnovni selektor:
.blok--white{ color: #FFF; } - Modifikator elementa unutar bloka:
.blok__element blok__element--white{ color: #FFF; }