DevProTalk

Forumi IT profesionalaca
web development, web design, e-business, SEO


Idite nazad   DevProTalk > Web development i web aplikacije > (X)HTML, JavaScript, DHTML, XML, CSS
Beach Wedding Dresses - Looking for the Wedding Dress? Here, 1dress.co.uk stunning collection of beach wedding dresses is just what you are looking for.
charles wang

(X)HTML, JavaScript, DHTML, XML, CSS Client scripting tehnologije, Dynamic HTML, Cascading Stylesheets, XML i standardi

Odgovori
 
Alati teme Način prikaza
Staro 08. 09. 2011.   #1
kwisko
član
Na probnom radu
 
Avatar kwisko
 
Datum učlanjenja: 08.08.2007
Lokacija: Niš
Poruke: 34
Hvala: 19
6 "Hvala" u 5 poruka
kwisko is on a distinguished road
Lightbulb Optimizacija renderovanja CSS-a i gotovi CSS frejmvorci

Pozdrav svima.

Već duže vreme se igram sa nekim gotovim css frejmvorcima (css frameworks ) i ono što sam primetio jeste da oni baš i ne "brinu" za brzinu renderovanja CSS stilova u browseru - ukoliko se osvrnem na ovaj Googleov članak.

Po tom uputstvu sugeriše se korišćenje klasa kada god zatreba (.page-title, .submenu) umesto korišćenja ugnježdenih stilova i tagova (.main_content h1 {...}, menu ul li {...}). Razlog za to je taj da, ukoliko se koriste ugnježdene varijante, browser da bi primenio stilove mora pronaći baš tu kombinaciju koja je navedena u css-u, što oduzima određeno vreme.

Sa druge strane, nekom ko radi frontend je znatno lakše da ne dodaje novu klasu za svaki bitniji deo, jer mnogo stvari može postići ugnježdavanjem tagova ili klasa.

Kakva su Vaša iskustva po tom pitanju? Da li poštujete smernice iz Googleovog uputstva ili ne, i u kojoj meri?

Generalno, ima dosta smisla to što piše, ali me interesuje kako se to pokazalo u praksi, pogotovu kod onih koji imaju veći broj projekata za sobom.
__________________
About.me / Code Control / MagelanApp
kwisko je offline   Odgovorite uz citat
Staro 08. 09. 2011.   #2
ivanhoe
Ivan Dilber
Sir Write-a-Lot
 
Avatar ivanhoe
 
Datum učlanjenja: 18.10.2005
Lokacija: Bgd
Poruke: 5.320
Hvala: 104
1.941 "Hvala" u 579 poruka
ivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svima
Pošaljite poruku preko Skype™ za ivanhoe
Default

to ti je tipicna preuranjena optimizacija... brzina renderovanja CSS-a je potpuno zanemarljiva za 99.99% stranica, kad se uporedi sa brzinom ucitavanja strane, css i js fajlova, slika, parsiranjem js-a i svim ostalim... s druge strane "ugnjezdena" struktura ti obicno znacajno smanji velicinu css fajla, i olaksava izmene i odrzavanje, sto je po meni mnogo bitnije...
__________________
Leadership is the art of getting people to want to do what you know must be done.
ivanhoe je offline   Odgovorite uz citat
"Hvala" ivanhoe za poruku:
Staro 09. 09. 2011.   #3
noviKorisnik
Dejan Katašić
Wrote a book
 
Avatar noviKorisnik
 
Datum učlanjenja: 10.06.2005
Lokacija: Novi Sad
Poruke: 1.017
Hvala: 129
86 "Hvala" u 43 poruka
noviKorisnik će postati "faca" uskoro
Talking

Citat:
Use class selectors instead of descendant selectors.
For example, if you need two different styles for an ordered list item and an ordered list item, instead of using two rules:
Kôd:
    ul li {color: blue;}
    ol li {color: red;}
You could encode the styles into two class names and use those in your rules; e.g:
Kôd:
    .unordered-list-item {color: blue;}
    .ordered-list-item {color: red;}
If you must use descendant selectors, prefer child selectors, which at least only require evaluation of one additional node, not all the intermediate nodes up to an ancestor.
Primer preporuke kaže da svaki list item u html-u moraš da nakitiš odgovarajućom klasom ili nećeš imati prikaz koji bi inače želeo da ostvariš pravilima koja proglašavaju za neefikasna. (???)
noviKorisnik je offline   Odgovorite uz citat
Staro 09. 09. 2011.   #4
kwisko
član
Na probnom radu
 
Avatar kwisko
 
Datum učlanjenja: 08.08.2007
Lokacija: Niš
Poruke: 34
Hvala: 19
6 "Hvala" u 5 poruka
kwisko is on a distinguished road
Default

Hvala obojici na odgovorima... generalno već dosta dugo koristim "ugnježdene" css stilove iz istih razloga koje je i @ivanhoe naveo (održavanje stilova i sve ostalo), nego sam nedavno našao na ovo pa pošto radim nešto drugačije od "preporučenog" zainteresovao me je da čujem mišljenje drugih ljudi.

Generalno, neke stvari koje su u tom članku navedene mi baš nemaju mnogo smisla (primer koji je @noviKorisnik naveo), mada su mi neki primeri sasvim ok.
Na primer ne koristiti tagove i #id-jeve zajedno kao ovde:
Kôd:
ul#top_blue_nav {...}
form#UserLogin {...}
već da je dovoljno samo ovo
Kôd:
#top_blue_nav {...} 
#UserLogin {...}
#id bi ionako trebao biti jedinstven na stranici.

U svakom slučaju ako još neko ima neko mišljenje iz svog iskustva voleo bih da čujem.

Pozdrav!
__________________
About.me / Code Control / MagelanApp
kwisko je offline   Odgovorite uz citat
Staro 09. 09. 2011.   #5
ivanhoe
Ivan Dilber
Sir Write-a-Lot
 
Avatar ivanhoe
 
Datum učlanjenja: 18.10.2005
Lokacija: Bgd
Poruke: 5.320
Hvala: 104
1.941 "Hvala" u 579 poruka
ivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svima
Pošaljite poruku preko Skype™ za ivanhoe
Default

potrazi po netu, Stabornella (iz Facebooka) je cini mi se pisala oko efikasnosti renderovanja CSS-a... recimo #bla .bla se u svim browserima prikazivalo sporije nego samo .bla, sto na prvi pogled nema nikakve logike, ali eto, tako je valjda programiran css engine.. u svakom slucaju ako te zanima ta tema super je text...
__________________
Leadership is the art of getting people to want to do what you know must be done.
ivanhoe je offline   Odgovorite uz citat
"Hvala" ivanhoe za poruku:
Staro 09. 09. 2011.   #6
Milos Vukotic
Knowledge base
Wrote a book
 
Avatar Milos Vukotic
 
Datum učlanjenja: 07.06.2005
Lokacija: Neđe ođe...
Poruke: 1.197
Hvala: 339
678 "Hvala" u 178 poruka
Milos Vukotic je pravi dragi kamenMilos Vukotic je pravi dragi kamenMilos Vukotic je pravi dragi kamenMilos Vukotic je pravi dragi kamenMilos Vukotic je pravi dragi kamenMilos Vukotic je pravi dragi kamen
Pošaljite poruku preko Skype™ za Milos Vukotic
Default

Čitah malo Staborneline tekstove, http://www.stubbornella.org/content/...eral/geek/css/

Možda me s godinama izdaje strpljenje, ali baš me nekako podsjeti na ovo:

__________________
Чак Норис може да си ги врзе врвките на чевлите со стапалата.
Milos Vukotic je offline   Odgovorite uz citat
"Hvala" Milos Vukotic za poruku:
Staro 09. 09. 2011.   #7
kwisko
član
Na probnom radu
 
Avatar kwisko
 
Datum učlanjenja: 08.08.2007
Lokacija: Niš
Poruke: 34
Hvala: 19
6 "Hvala" u 5 poruka
kwisko is on a distinguished road
Default

Hvala @ivanhoe na sugestiji za Stubbornell - pogledao sam par klipova na brzinu i deluje mi prilično korisno i intersantno.

Generalno, ona radi na "projektu" OOP CSS tako da se njena priča manje-više svodi na organizaciju i optimizaciju CSS-a za ponovno korišćenje, ali uz poštovanje nekih osnovnih pravila koje se u Googleovom dokumentu navode. U jednom od članaka je navela da je čak i Facebook imao dosta reduntandnih stilova i da je prilikom jednog redizajna smanjio broj heading stilova sa 850+ na samo 25, što je prilično velika razlika.

Inače i na Bootstrap Google Groups sam otvorio temu pa ako nekoga interesuje može pratiti. Kao što reče Mark Otto u toj poruci - verovatno je najbolji neki "balanced mix" - i da bude pogodan za održavanje i da ne bude nešto posebno "težak" za renderovanje.

Cenim da se razlika u brzini renderovanja meri milisekundama i da u većini slučajeva i nije zapaženo primetna - sigurno je primetnija razlika u učitavanju kompresovanog i nekopresovanog css-a, nego u renderovanju.
__________________
About.me / Code Control / MagelanApp
kwisko je offline   Odgovorite uz citat
Staro 09. 09. 2011.   #8
ivanhoe
Ivan Dilber
Sir Write-a-Lot
 
Avatar ivanhoe
 
Datum učlanjenja: 18.10.2005
Lokacija: Bgd
Poruke: 5.320
Hvala: 104
1.941 "Hvala" u 579 poruka
ivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svima
Pošaljite poruku preko Skype™ za ivanhoe
Default

@Milosh: a jbga, ona je CSS Evangelista, od toga zivi, a kad CSS-u oduzmes sve bagove ne ostane ti bas puno toga o cemu mozes da diskutujes na konferencijama
__________________
Leadership is the art of getting people to want to do what you know must be done.
ivanhoe je offline   Odgovorite uz citat
3 članova zahvaljuje ivanhoe za poruku:
Staro 09. 09. 2011.   #9
webarto
expert
Grand Master
 
Avatar webarto
 
Datum učlanjenja: 11.04.2010
Poruke: 998
Hvala: 141
894 "Hvala" u 153 poruka
webarto is on a distinguished roadwebarto is on a distinguished roadwebarto is on a distinguished roadwebarto is on a distinguished roadwebarto is on a distinguished roadwebarto is on a distinguished roadwebarto is on a distinguished roadwebarto is on a distinguished road
Default

Blago onome kome je CSS optimizacija jedini problem
__________________
Github // LinkedIn // PHP // ZCE // Stackoverflow PHP // Site5 Web Hosting
webarto je offline   Odgovorite uz citat
2 članova zahvaljuje webarto za poruku:
Staro 27. 09. 2011.   #10
kwisko
član
Na probnom radu
 
Avatar kwisko
 
Datum učlanjenja: 08.08.2007
Lokacija: Niš
Poruke: 34
Hvala: 19
6 "Hvala" u 5 poruka
kwisko is on a distinguished road
Thumbs up Još jedan korista resurs

Evo još jednog korisnog resursa - http://smacss.com/book/. Više se tiče neke organizacije CSS-a ali se prožimaju i principi navedeni u OOCSS i drugim praktičnim sugestijama za brže renderovanje stilova.

Hvala još jednom svima na odgovorima i resursima - pronašao sam par interesantnih stvari da malo unapredim svoj CSS
__________________
About.me / Code Control / MagelanApp
kwisko je offline   Odgovorite uz citat
Odgovori


Alati teme
Način prikaza

Pravila pisanja
Možete ne započinjati nove teme
Možete ne slati odgovore
Možete ne slati priloge
Možete ne izmeniti svoje poruke
vB kôd je Uključen
Smajliji su Uključen
[IMG] kod je Uključen
HTML kôd je Isključen
Pogledajte forum


Vreme je GMT +2. Trenutno vreme je 20:27.


Blogodak - Domaci blogovi na jednom mestu Caught in a web - web dev blog
Powered by vBulletin® Verzija 3.6.8
Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.
Copyright © DevProTalk. All Rights Reserved.
Mišljenja, saveti, izjave, ponude ili druge informacije ili sadržaji nastali na Sajtu su vlasništvo onoga ko ih je kreirao, a ne DevProTalk.com, tako da ne morate da se oslanjate na njih.
Autori poruka su jedini odgovorni za ovakve sadržaje. DevProTalk.com ne garantuje tačnost, kompletnost ili upotrebnu vrednost informacija, stavova, saveta ili datih izjava. Ne postoje uslovi pod kojima bi mi bili odgovorni za štetu ili gubitak koji je posledica bilo čijeg oslanjanja na nepouzdane informacije, ili bilo kakve informacije nastale kroz komunikaciju između registrovanih članova.
Web sajt može sadržavati linkove na druge web sajtove na Internetu ili neke druge sadržaje. Ne kontrolišemo niti podržavamo te druge web sajtove, niti smo pregledali bilo kakve sadržaje na takvim sajtovima. Mi nećemo biti odgovorni za legalnost, tačnost ili prikladnost bilo kog sadržaja, oglasa, proizvoda, usluga ili informacije lociranim na ili distribuiranih kroz druge web sajtove, niti za bilo kakvu štetu nastalu kao posledica takvih informacija. DevProTalk.com drži i čuva druga prava vlasništva na web sajtu. Web sajt sadrže materijale zaštićene copyright-om, zaštitne znakove i druge informacije o pravu vlasništva ili softver. Članovi mogu poslatu informacije zaštićene pravima vlasništva njihovih nosilaca i ona ostaju zaštićena bez obzira da li su oni koji prenose te informacije to naveli ili ne. Osim informacija koje su u javnom vlasništvu ili za koje dobijete dozvolu, nemate pravo da kopirate, modifikujete ili na bilo koji način menjate, objavljujete, prenosite, distribuirate, izvršavate, prikazujete ili prodajte bilo koju informaciju zaštićenu pravima vlasništva. Slanjem informacija ili sadržaja na bilo koji deo DevProTalk.com, Vi automatski dozvoljavate i predstavljate garanciju da imate pravo da dozvolite DevProTalk.com ili članovima DevProTalk.com bespovratnu, kontinualnu, neograničenu, globalnu dozvolu da koriste, kopiraju, izvršavaju, prikazuju i distribuiraju takve informacije i sadržaje i da iz takvih sadžaja koriste bilo koji deo u bilo koje svrhe, kao i pravo i dozvolu da koriste gore navedene sadržaje. Svi zaštitni znakovi (trademarks), logotipi, oznake usluga, firme ili imena proizvoda koji se pominju na ovom web sajtu su vlasništvo kojim raspolažu njihovi vlasnici.