Puhtaampien koodien luominen tarkoittaa kehyksen ylittämistä ja ajattelua siitä, mitä se todella edustaa.

CSS-kehykset tarjoavat työnkulun ratkaisun, nimittäin verkkoihin perustuvien web-asettelujen nopean käyttöönoton. Yksi suosituimmista puitteista on 960 Grid System ( 960.gs ), jonka nimi on sen oletusleveyden mukaan. Käytännössä 960.gs voi olla erinomainen työkalu mille tahansa web-suunnittelijaa varten. Mutta se myös tarkastelee muutamia vanhoja ongelmia.

Ennen kuin CSS näki laajalle levinnyttä käyttöä, taulukot antoivat kaikki layoutin web-suunnittelija. Monimutkaisemmilla malleilla oli taulukoissa sisäkkäisiä pöytiä, mutta niitä käytettiin ylimäärin, mikä loi HTML: n sekamelskauksen. CSS-pohjaiset ulkoasut houkuttelivat suunnittelijoita lupaamalla vähemmän HTML: ää; he myös valittivat semantiikka-harrastajille. Yksinkertaisesti sanottuna CSS kannusti HTML: n käyttöä, joka kuvasi sisällön sisällön, ei sen, minkä pitäisi näyttää.

Kun suunnittelijat oppivat käyttämään CSS: ää, div-elementit korvattavat taulukoita. Mutta divs voivat olla - ja usein ovat - nested, samoin kuin taulukoita.

Luokka-itis ja Div-itis

Selkeä, vähärasvainen koodi tarjoaa monia etuja. Se on helppo korjata, ladata nopeasti ja aiheuttaa vähemmän ongelmia eri selaimissa. Merkitykselliset tunnisteet auttavat näytön lukijoita, hakukoneita ja mobiililaitteita tulkitsemaan merkityksiä ulkoasun lisäksi.

Muu kuin semantiikka, se on suuri etu

Ovatko CSS-kehykset, kuten 960.gs, luoneet taustalla olevan taustalla olevan ongelman? Jos niiden tavoite on tehokas HTML, voivatko suunnittelijat ja kehittäjät käyttää 960.gs ilman leviämistä "class-itis" (eli luokkien liiallista käyttöä) ja "div-itis" (eli niin monta divia, että taulukot alkavat taas näyttää hyvältä)? Kyllä he voivat.

Ymmärtääksemme, miten, meidän on tarkasteltava itse kehystä.

Rundown on 960.gs

960.gs tarjoaa joukon sarakkeita, jotka on kirjoitettu CSS: ään, jotka helpottavat verkkosivujen esittelyä. Lataa tiedostot, lisää ne sivustoosi ja se on valmis menemään. Mitään erityisiä laajennuksia tai uutta tekniikkaa ei tarvita, ja voit käyttää sitä muiden CSS-tiedostojen yhteydessä.

Sarakkeet sisältyvät lohkoihin (luonnollisesti) "kontteihin". Oletusarvot ovat container_12 ja container_16 , jotka jakautuvat vastaavasti 12 ja 16 sarakkeeseen. Mukautetut koot ovat käytettävissä.

Yllä oleva kaavio esittää kaksi oletussäiliötä, joissa on 12 ja 16 saraketta. Harmaa ei näy lopullisella verkkosivustollasi, tietenkin. Sarakkeet näyttävät vain, missä lohkoja, joita kutsutaan riveiksi, voidaan järjestää.

Verkko on sisällön lohko, joka voi ylittää useamman kuin yhden sarakkeen kontissa. Ristikot kelluvat vasemmalle, koska niitä pidetään kiinni .container_x , joten ne sopivat erinomaisesti moduulirakenteille. Jokaisen lohkon leveys määräytyy sen perusteella, mihin ruutuun sitä käytetään: grid_1 on yksi sarake leveä, grid_5 on viisi saraketta leveä jne.

Edellä, .container_12 jolla on kolme verkkoa. Jokaisella ruudukolla puolestaan ​​olisi eri elementtejä sivun sisällöstä.

Edellä, .container_16 omistaa kaksi lohkoa 12 ja 4 saraketta vastaavasti. Kuten .container_12 , tämä 16-sarakkeen laajuinen ulkoasu on 960 pikseliä leveä, mutta sen sarakkeet ovat kapeammat.

Verkkojen koon muuttaminen, jossa sisällön elementit sopivat, on yksinkertainen: muuta grid_x jokaisessa div.

Virallinen 960.gs-verkkosivusto esittelee verkkosivustoja, jotka on rakennettu kehykseen, ja se tarjoaa myös sivumalleja, linkkejä räätälöityyn ristikkogeneraattoriin ja itse kehykseen. Yksityiskohtaiset ohjeet sisältyvät myös, koska oppimiseen on enemmän. Ristikkomarginaalit ja kyky siirtyä ristikkorakenteiden välisiin kouruihin tekevät järjestelmästä entistä joustavamman.

Näistä eduista huolimatta upottaminen

ratkaisut

Taipuisien taulukoiden vastaaminen on helppoa. Mutta käyttämällä kolmea tai useampaa sisäkkäisten div-tasojen tasoja ei ratkaise ongelmaa - se vain korvaa yhden tunnistetietueen toisella. Kehykset auttavat mutta eivät aina ratkaise dilemmaa. Pienet ennakoinnit, monet näistä ongelmista voidaan välttää.

Käytä vain sellaisia ​​luokkia, joita tarvitset

Ylimmän CSS-koodin yksinkertaisin ratkaisu on leikata mikä ei ole tarpeen. 960.gs oli suunniteltu lanka-kehitystyökaluksi, joka on tarkoitus korvata, kun verkkosivusto toimii. Se sisältää yli 180 luokkamääritelmää.

Jos suunnittelu on jäsennelty, sanoa, .container_12 eikä koskaan käytä enempää kuin .grid_5 ja .grid_7 , poista sitten muut CSS: stä.

Käytä luokkia = "grid_x" sopiviin elementteihin: otsikot, kuvat, linkit, kappaleet

.container_x and ja .grid_x luokat eivät rajoitu div-elementteihin. class attribute luokan attribuutti voidaan soveltaa mihin tahansa elementtiin paitsi html , head , meta , param , script , title ja style - niin, käytännöllisesti katsoen mitään body . Jos div-tagit sisältävät vain yhden kohteen, ne voivat olla tarpeettomia.

Verkkohakemuksen soveltaminen ei-Divs-verkkoon

Käyttämällä divs	Semanttisen koodin käyttäminen
…	…
… … … …	… … … …
#"> ... ... ...	#" class=grid_3> … … … #" class="grid_3">… … … … #" class="grid_3">… … … … #" class="grid_3">… … … … #" class="grid_3">… … … …

Grant-ruudukkoominaisuudet tietyille elementeille

Koska yksinkertainen CSS, .grid_x on ominaisuuksia, jotka toimisivat minkä tahansa muun luokan nimen tai minkä tahansa elementin kanssa. Kopioimalla ominaisuudet tiettyihin elementteihin ylimääräiset luokat ovat tarpeettomia.

.examples li { (properties of .grid_4) }

…
…
…

Alla olevassa taulukossa listan kohteiden luominen luo jopa sarakkeita ja pieniä muutoksia HTML-muotoon.

CSS muuntaa yllä olevan luettelon moniparsiryhmäksi. Jos tarvitset tavallisen luettelon luettelomerkillä, hylkää vain class="examples" ominaisuus. Onko tämä semanttinen? Varmasti - niin kauan kuin sisältö on hyödyllinen. CSS muuttaa vain, kuinka kukin luettelomerkki esitetään.

Toinen esimerkki:

.photos p { (properties of .grid_10) }.photos img { (properties of .grid_6) }

First caption
Another caption

Tämä laittaa automaattisesti kapselit, jotka on liitetty kuviotunnisteisiin, valokuvien vieressä.

Kun taulukot eivät ole sopivia, taulukon vaikutus on helppo luoda ei-taulukkomuodolla.

.datelist { (properties of .container_12) }.datelist h3 { (properties of .grid_3) }.datelist p { (properties of .grid_7) }.datelist strong { (properties of .grid_1) }

subhead
…
3 p.m.Jan 1, 2010
subhead
…
3 p.m.Jan 1, 2010

Yllä oleva esimerkki on tapahtumien aikataulu, jossa jokaisella taulukossa olevalla "solulla" on eri tunniste, joka heijastaa sen ainutlaatuista sisältöä sen sijaan, että siinä olisi kaikki saaliit tag. (Ihanteellinen? Ehkä ei. HTML ei eroa sisällön ryhmistä.)

hakeminen .grid_x Ominaisuudet muille elementeille edellyttävät jonkinlaista suunnittelua, mutta se johtaa vähäisempään HTML-muotoon eikä häiritse 960.gs itse.

Käytä luokkia vanhempien kohteiden, ei lasten tavaroita

Div-itis ja class-itis eivät rajoitu CSS-kehyksiin.

Kaikki viimeisessä osassa esitetyt esimerkit ovat mielenkiintoisia piirteitä: vain yksi luokkavastaus kussakin. Jos samaa luokan määritystä käytetään useita kertoja peräkkäin HTML: ssä, vaihda vanhempi sijaan lapsista.

tarpeettomia:

.item { (various properties) }

…
…
…
…
…
…

Yllä, kaikilla kuudella elementillä on luokka. Ne ovat tarpeettomia, koska luokat ovat identtisiä. Tässä on parempi tapa:

.group-of-items li { (various properties) }

…
…
…
…
…
…

Korjaus täällä luokka-itis on määrittää yhden luokan pääelementtiin. CSS-valitsimet tekevät työtä soveltaen muotoilua jokaiselle

…
…
…
…
…
…
…
…

.title { (various properties) }.subhead { (various properties) }.publication-date { (various properties) }.body-text { (various properties) }