Iskustva oko izrade responsive stranica

A so…
Nisam radio sa parserima,
sada mi malo jasnije.

Ali ne kužim šta misliš pod “css toliko ograničen za uređivanje i održavanje”.

Pod održavanje mislim na naknadne izmjene prilikom korekcije nekog parametra.
Tu je zahtjev jasan, svaka izmjena u layoutu treba zahtjevati što manje izmjena u kodu. (Pogotovo, na što manje mjesta u kodu)
A što manje izmjena možemo omogućiti isključivo sljedeći DRY dizajn, koji stoji za: Dont Repeat Yourself

Evo trivijalnog primjera. Imaš neku plavu boju na stranici koja prevladava, neka to bude: #2FAAD4

…i sad, sljedeći DRY ti ne smiješ lijepiti code boje posvuda, jer ako klijent kasnije odabere malo drugačiju nijansu…isto tako ćeš morati posvuda mijenjati taj code.
Logično, napravit ćemo klasu: .myBlueColor {color:#2FAAD4} …pa ćemo klasu lijepiti po svuda, a code naknadno možemo zamijeniti samo u atributu klase.
No imamo tu već jedan problem: boja se može pojaviti kao color, kao background-color, kao dio nekog gradienta, kao dio nekog shadow-a …i to te već tjera da razbiješ svoj DRY dizajn i da u najmanju ruku radiš nekoliko klasa koje sadrže izvorni code boje.
Druga nespretna stvar je što ne želim da moram na svaki element lijepiti klasu od boje, što ako želim imati klasu: .myBlueBox{} …kako ću boju iz klase .myBlueColor pridružiti u klasu .myBlueBox{} …ostaje nam jedino kasnije pisanje
<div class='myBox myBlueColor'></div> …jer nismo mogli DRY metodom prenesti code boje u .myBlueBox

Ali ocke, to su samo boje …to je zapravo jednostavno kako god okreneš :smiley:
Dolaze nam dimenzije…one su malo složenije od boja.
Kod dimenzija imaš malo više atributa koje ih mogu posjedovati:
top, left, width, height, padding, margin, padding-top, padding-left, …
…i sad kad imaš neku dimenziju u svom dizajnu ti ju moraš lijepiti posvuda. Ako se klijent kasnije sjeti, ja bi da su mi ovi razmaci malo veći…to može biti pravi problem. Jer taj razmak koji je uvijek isti, nekad je bio padding, nekad margin…nekad relative+left…itd itd…
A da stvar bude još kompliciranija, nekad ista dimenzija po vrijednosti kao taj razmak možda i nije u relaciji s tom vrijednosti! …dok neka druga dimenzija koja nije ista kao taj razmak, može biti u relaciji s tom dimenzijom! Recimo, negdje imaš duplo veći razmak koji ovisi o tom razmaku upravo što mora biti “2 x tvoj_razmak”.
A relacije ovisne o tvom razmaku mogu biti svakakve, recimo: element_width: calc(100% - 2 x tvoj_razmak).
Ti naravno u css-u ne možeš napisati 2 x tvoj_razmak, pa ručno računaš potrebnu dimenziju i tipkaš ju na njenu poziciju kao mrtvo (pasivno) slovo …koje se proturječi DRY dizajnu, jer ako ćeš mijenjati vrijednost razmak, morat ćeš tražiti svugdje u code-u gdje si koristio taj razmak, ili gdje ti je nešto kalkulirao ovisno o tom razmaku. Prilično gadno za održavanje i za autora code-a, što tek ako će kasnije raditi izmjene netko drugi…

E sad, divota koju ti omogućava preparser: kreiraj varijablu
Jednostavno napraviš:
$myBlueColor = #2FAAD4;

Kasnije kad definiraš klasu .myBlueBox =>
.myBlueBox:
{
color:$myBlueColor;

}

…više nema ni potrebe da radimo uopće klasu .myBlueColor koju ćemo lijepiti po svuda, možemo direktno vrijednost varijable staviti u klase gdje trebamo…bilo pod color, background-color…shadow…itd. A kod izmjene, mijenjamo samo vrijednost varijable $myBlueColor.

Kod dimenzija dobivamo još puno više benefita, zato jer prepaser omogućava:
$my_razmak=10px;
$my_double_razmak=2*$my_razmak;

…znači omogućava zbrajanje, oduzimanje…dijeljenje…svašta. Nema potrebe da se išta onda radi izvan DRY dizajna, a cijela stranica se može napraviti skroz povezano da kad se promjeni jedna dimenzija u parametru…da sve sjedne točno tamo gdje treba sjesti. To sa čistim CSS-om je nemoguće za imalo kompleksniji layout.

LESS (ili SASS), ako nisu već postali standardi…postat će uskoro! A nije ih teško naučiti i zato nema razloga da se ne koriste.
Oni nude i puno više od gore spomenutog…ali fora je da kad pišeš css za less, ti zapravo i ne moraš ništa znati od mogućnosti koje on nudi…jer ako pišeš čisti css, sve će štimati…samo preparser neće imati što doraditi. Znači, ti od njega možeš koristiti onoliko metoda koje ti se sviđaju ili koje si upoznao…sve ostalo izgleda kao css isto kao i prije.
A da samo koristiš varijable, imaš već ogroman benefit spram “mrtvog” css-a. Nadam se da je sad jasnije zašto je ograničen. :slight_smile:

3 Likeova

Shvaćam.
Da, ima to prednosti…
Čuo sam hiljadu puta za LESS i SASS ali sam ih poistovječivao sa frameworcima.
Baciti ću oko na neki tutor.

O da, mislim da u svojem CSS-u imam 3145643 puta napisan isti kod boje.
Odličan info

1 Like

@Bozoou ti si kralj pisanja tutorijala. Ovo što si napisao u vezi parsera mi je razbistrilo poglede. Krenuo sam pa stao u istraživanje naprednijih mogućnosti u kreiranju css-a no nikako si nisam uzeo više vremena. Sjetim se kad počnem duplirati kodove po css-u i kad mi je potrebna izmjena jedne boje a ona se nalazi na preko nekoliko mjesta.

1 Like

Mislim da se trenutno treba fokusirati na SASS, a LESS ostaviti po strani.

Koliko znam i novi Bootstrap 4 je prepisan u SASS iz LESSA.

Uglavnom zgodna stvar, a nije mnogo komplikovana.

Ja koristim SASS/SCSS i obični CSS ne znam pisati jer sam odmah učio raditi preko pre-processora

Osim varijabli i svega navedenog, za mene najveci preporod je bilo nestanje.

Znaci u klasicnom css-u:

.parent {
	rule: value;
}

.parent .child {
	rule: value;
}

A u SCSS-u:

.parent {
	rule: value;

	.child {
		rule: value;
	}
}

Sto se odabira LESS/SASS(SCSS) tice, SASS je trenutno vise “u modi”, no mnogi kao buducnost smatraju PostCSS.

Ja koristim SASS, odnosno SCSS. Za one koje buni ta razlika, SCSS je isto sto i SASS jedino sto koristi istu sintaksu kao obican CSS, dok SASS ne koristi zagrade {} nego forsira pravilnu indentaciju. Ja sam poceo sa SASS jer mi se to svidjelo a i dosta je cistije, ali me pocelo zivcirati kada sam copy paste-ao neke snippete iz starih projekata ili s neta pa sam ih morao formatirati. Ovako kada koristite SCSS, svaki CSS file je validan SCSS file.

scss + BEM :slight_smile:

1 Like

Slazem se, bem je pre dobra stvar. Za one koje zanima vise, preporucam http://webuild.envato.com/blog/chainable-bem-modifiers/ (ima i link na osnove BEM-a na pocetku).

Vidiš, zanimljiva još jedna primjena pre-parsera. Ne loša ideja da se pisanje CSS-a očisti od svih onih zagrada…

No meni se općenito svidjelo kako ti pre-procesori unose još neistražene mogućnosti koje postoje neovisno od ograničenja sintakse koju razumiju browseri…

  • sva pravila koja unesu pre-parseri, automatksi su cross browser kompatibilni. Tj. nema nikakve potrebe čekanja da se svi browseri prilagode nekom novom “dogovorenom” pravilu, nego pre-parser to novo pravilo prilagodi već postojećem razumjevanju browsera :slight_smile: Prilično cool.

A snaga pre-parsera ne leži samo u parsiranju CSS-a, nego i JS-a. Tako reći …bilo bi moguće napraviti pre-parser JS-a koji će omogućiti pisanje sintakse kao u pythonu ili nekom drugom omiljenom programskom jeziku. Vjerujem da takve stvari već i postoje…kad se pogleda, oni alati za pisanje mobilnih aplikacija…gdje pišeš u samo jednoj sintaksi, a poslije dobiješ code i za android i za iOS …upravo jesu to.