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.

Môže sa Vám ešte páčiť...

12 komentárov

  1. Tibor píše:

    Čí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…

  2. dusoft píše:

    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.

  3. rony píše:

    [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.

  4. Tibor píše:

    [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?

  5. rony píše:

    [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.

  6. Jozef Benko píše:

    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.

  7. Jaro píše:

    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.

  8. Tibor píše:

    [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 *)

  9. dusoft píše:

    Ake viacnasobne? Raz zadefinujes, ostatne sa zdedi.

  10. rony píše:

    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

  11. Tibor píše:

    Sorry rony, len jednu vetičku:
    [9] Raz vynuluješ, raz nastavíš, to je dokopy 2x

  12. rony píše:

    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.