Píšeme CSS s tipmi a trikmi
Anglicky písané doplnenie CSS tips and tricks k môjmu nedávnemu článku Píšeme svoje prvé komplexné CSS je zamerané skôr prakticky ako tie moje žvásty :-)
Stručne:
* veľkosť písma určujme relatívne a nie pomocou „px“ – ja viem, nedá sa tomu odolať :-)
* píšte čitateľný kód – počul som už všeličo, najprijateľnejšia výhovorka je, že sa mi nechce. Ale počul som rádoby objektívnu – vraj je to metóda skrývania toho bordelu, čo spáchate :-)
* separujte kód do blokov (používame komentovanie)
* prestaňte zneužívať DIVy a premýšľajme
Posledný bod si vybavíte aj z iných weblogov.
Čítal som aj diskusiu pod tým a je tam aj pár úsmevných príspevkov.
ad. posledný bod -> myslíš posledný bod Tvojho zhrnutia alebo posledný bod z toho článku? Lebo *{margin: 0;padding: 0;} zbytočne nuluje margin a padding u všetkých prvkov, tie default hodnoty tam nie sú pre srandu, ani preto aby webdesignerom ničili život…
Tibor: problem s prednastavenymi hodnotami je iba jeden – tvorcovia Opera, IE, Firefox a Safari atd. sa nezhodli na standardnych rozmeroch. Preto je idealne vynulovat ich a nastavit separe, bay to vsade vyzeralo idealne naozaj rovnako.
[1] nulovanie margin padding border a nasledne TEBOU nastavene hodnoty – musis to naozaj odmakat – ti prinesu v istom zmysle uzitok – vsimni si ako nastavuje defaultne hodnoty IE, Opera, FF pre zoznamy (LI). Preto maju niektore stranky – napr. aj moja – rozdielne odstupy u tychto zoznamov.
[2], [3] presne toto som čakal… O rozdielnych default hodnotách v prehliadačoch samozrejme viem. Čo je zlé na rozdielnom vykreslení stránky keď rozdielom je iba iná „medzera“ v texte? Ja som za určitú benevolentnosť v zobrazovaní stránky, alebo je podľa vás zobrazenie na pixel presne jediný správny výstup kodéra? Maľovať stránky?
[4] ano, robi to problem v istych pripadoch, napr. ked mas uzke stlpce a nedopatrenim odladujes v jednom prehliadaci. to nie su pixelove „rozdiely“. problem je ako vzdy s dedenim v css. ak na to zabudnes, tak sa tie hodnoty mozu kludne spocitavat pri vnarani. toto sa mi uz niekolkokrat stalo.
Odkedy sa nulujú defaulty pre riešenie rozdielov?
Odjakživa to robím pre ušetrenie mnohých riadkov — prax ukazuje, že pri väčšine designov je užitočnejšie vynulovať všetko a staticky deklarovať, dajme tomu, 20 vlastností ako redeklarovať 40 vlastností (tých 20 navyše je nulovanie defaultov). Verte mi, 3000 riadkový štýlopis nie je sranda.
Mňa na tom článku zaujal komentár od Mike Rundle (ani neviem ako jeho meno vyskloňovať, alebo to neskloňujeme?) o tom, prečo je dobré nastaviť veľkosť písma práve na 62.5%. Defaultne písmo tak dostaneme na 10px, s ktorého násobkami sa jednoducho pracuje. Robil som to stále mechanicky, nikdy som sa nad tým nezamýšľal.
[5] pri vnáraní a dedení vlastností som nemal problém so spočítavaním marginov či paddingov, iba s relatívne zadávanou veľkosťou písma, máš niekde príklad?
[6] Nie je problém vynulovať si vlastnosti pre tie prvky pre ktoré to vyslovene potrebujem:
body, #footer a, caption.nejaka_trieda{margin: 0;padding: 0;}
Snahou je efektívne definovanie hodnôt raz pre prvok, nie viacnásobné (ako v prípade s *)
Ake viacnasobne? Raz zadefinujes, ostatne sa zdedi.
sakra zle som sa asi vyjadril.
Napr. nedopatrenim vnoris dalsi div do serie vnorenych divov. pricom tomu divu si nic nedefinoval a jup, mas tam blabla. blabla blablabla…
ak chcete spekulovat a diskutovat o detaili, MassacreBoard. thnx
Sorry rony, len jednu vetičku:
[9] Raz vynuluješ, raz nastavíš, to je dokopy 2x
jasne. len zabehnime do masakru. naozaj je to detail mimo trosku a straca sa mi dolezitost ci vyznam tanca okolo * ked ja iba uvadzam link a nie evanjelizaciu mojich vyplachov mysle.