T&R splet blog o spletnih storitvah. Razgaljamo tehnologijo!

reference spletnih strani
« MySQL iskanje LIKE vs FULL-TEXT
IE8 opravil test HTML in CSSa »
27th February

Kako ohraniti pregledno strukturo CSS dokumenta

Velikokrat CSS dokument postane relativno obesežen skupek kode, ki posledično postane nepregledna. Zato priporočam osnovni CSS, ki vsebuje splošne informacije (velikost naslovov, osnovna družina črk, body informacije itd). Nato naredimo več CSS dokumentov, ki so urejeni po sklopih (head, content, footer, navig, fonti,..). Posledično so dokumenti manj obsežni in zato koda preglednejša.

Ta preglednost pride prav kasneje, ko je potrebno posamezne elemente med seboj fino usklajevati zaradi različne interpretacije CSS kode s strani Firefox in IEjev.

Osnovni dokument naj bi izgledal približno takole:

PLAIN TEXT
CSS:
  1. /* CSS base document</code>
  3. version:       1.0
  4. author:        Toni &amp; Rok Meglic
  5. email:         toni.meglic@gmail.com
  6. rok.meglic@gmail.com
  8. ##############################################*/
  9.  
  10. @import url("admin.css");
  11. @import url("header.css");
  12. @import url("content.css");
  13. @import url("footer.css");
  14. @import url("popup.css");
  15.  
  16. /*############################################*/
  17.  
  18. body                    {
  19. margin: 0px;
  20. padding: 0px;
  21. background: #323232 url(/static/images/bg.jpg) repeat-x top;
  22. font-family: Geneva, Arial, Helvetica, sans-serif;
  23. font-size: 12px;
  24. text-align: left    }
  25. a                              {    text-decoration: underline}
  26. a:hover, a:active        {    text-decoration: none}
  27.  
  28. /*#######################   TITLES    #######################*/
  29. h1, h2, h3, h4, h5, h6    { color: #000 }
  30.  
  31. h1                        { font-size: 18px }
  32. h2                        { font-size: 16px }
  33. h3                        { font-size: 14px }
  34. h4                        { font-size: 12px }
  35. h5                        { font-size: 10px }
  36. h6                        { font-size: 8px }

Deli s skupnostjo:

  • Print
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks

Podobni članki:

  1. Kako pripraviti IE6 do prepoznavanja HTML5
  2. Več nivojski CSS selektorji
  3. CSS triki – selektorji za Internet Explorer
  4. Prilagajanje internetne strani glede na širino ekrana
  5. CSS triki za Google CHROME brskalnik
  6. Napredno programiranje v CSS s pomočjo LESS
  7. Barvni prehodi s CSS
  8. CSS 3 delovne skupine – zadnji sklepi
  9. Zaokroževanje robov s CSS ukazov
  10. Kdaj uporabiti class in kdaj id oznako za CSS selektorje

Antony || Wednesday, February 27th, 2008 ob 10:14 am || Splet, Splet (XHTML, CSS) || RSS 2.0 | Dodaj komentar || Trackback


4x komentirano na “Kako ohraniti pregledno strukturo CSS dokumenta”

  1. s-lime je napisal:
    February 28th, 2008 ob 5:34 pm

    "Zato priporočam osnovni CSS"

    jaz pa ne.... To pomeni samo še dodatnih 5 HTTP requestov, kar podaljša nalagalni čas za 1s (to je dost)... Lahko jih ločiš z nekaj praznih vrsticah, pa dosežeš isto.

  2. Jan Hančič je napisal:
    February 29th, 2008 ob 9:55 am

    Pa če že delaš tako, potem daj importe za splošne defenicije. Lahko da jih boš želel na kaki strani povoziti...

  3. Mitja je napisal:
    February 29th, 2008 ob 11:07 am

    Se strinjam z s-lime. Izguba dragocenega časa!

  4. Antony je napisal:
    February 29th, 2008 ob 2:23 pm

    Hvala za pripombe. O nalaganem času, priznam, niti nisem razmišljal. Začel sem z celotno kodo v enem CSS dokumentu, vendar sem se pri nekje 1000 vrsticah res navelilčal skrolat oziroma sem dobil občutek, da je nepregledno. Me pa vseeno zanima koliko časa predstavlja 5 requestov, zato bom naredil test. če je res sekunda bo ptorebno najti drugačno rešitev.

Dodaj komentar