Cascading Style Sheetsista on tullut tavallinen tapa muotoilla ja asentaa verkkosivustoja. Suunnittelijat käyttävät tyylitaulukot kertoa selaimelle, kuinka verkkosivusto tulisi näyttää ulkonäöltään ja joka kattaa muun muassa värit, välit, fontit ja paljon muuta.
CSS-tyylit otetaan käyttöön kahdella tavalla:
- Inline - itse verkkosivun koodauksen sisällä, yksilöllisesti, elementti kerrallaan
- Erillisessä CSS-asiakirjassa, johon verkkosivusto on linkitetty
CSS: n parhaat käytännöt
"Parhaat käytännöt" ovat verkkosivustojen suunnittelun ja rakentamisen menetelmiä, jotka ovat osoittautuneet tehokkaimmiksi ja tuottavat eniten tuottoa mukana olevasta työstä. Seuraa heitä sisään CSS web-suunnittelussa auttaa verkkosivustoja näyttämään ja toimimaan mahdollisimman hyvin. Ne ovat kehittyneet vuosien varrella yhdessä muiden verkkokielien ja -tekniikoiden kanssa, ja erillisestä CSS-tyylitaulukosta on tullut ensisijainen käyttötapa.
CSS: n parhaiden käytäntöjen seuraaminen voi parantaa sivustoasi monin tavoin:
- Erottaa sisällön suunnittelusta: Yksi CSS: n päätavoitteista on poistaa suunnitteluelementit HTML: stä ja sijoittaa ne toiseen paikkaan, jota suunnittelija voi ylläpitää. Tämä käytäntö auttaa myös erottamaan suunnittelijat kehittäjistä, jotta jokainen voi keskittyä osaamisalueisiinsa. Suunnittelijan ei tarvitse olla kehittäjä ylläpitääkseen verkkosivuston ulkoasua.
- Helpottaa huoltoa: Yksi web-suunnittelun unohdetuimmista osista on ylläpito. Toisin kuin painetut materiaalit, verkkosivusto ei ole koskaan "yksi ja valmis". Sisältö, muotoilu ja toiminta voivat ja niiden pitäisi kehittyä ajan myötä. CSS: n pitäminen keskeisessä paikassa sen sijaan, että se olisi ripoteltu verkkosivustolle, tekee asioista paljon helpompaa ylläpitää.
- Pitää sivustosi helposti käytettävissä: CSS-tyylien käyttäminen auttaa hakukoneita ja vammaisia ihmisiä olemaan vuorovaikutuksessa sivustosi kanssa.
- Pitää sivustosi ajan tasalla: Käyttämällä CSS: n parhaita käytäntöjä noudatat standardeja, jotka ovat osoittautuneet vakaina, mutta riittävän joustaviksi vastaamaan muutoksia web-suunnitteluympäristössä.
Upotetut tyylit eivät ole paras käytäntö
Sisäiset tyylit, vaikka niillä on tarkoitus, eivät yleensä ole paras tapa ylläpitää verkkosivustoasi. Ne ovat vastoin kaikkia parhaita käytäntöjä:
- Sisäiset tyylit eivät erota sisältöä suunnittelusta: Sisäiset tyylit ovat täsmälleen samat kuin upotetut fontit ja muut kömpelöt muotoilutunnisteet, joita modernit kehittäjät vastustavat. Tyylit vaikuttavat vain tiettyihin yksittäisiin elementteihin, joihin niitä käytetään; vaikka tämä lähestymistapa saattaa antaa sinulle tarkemman hallinnan, se myös vaikeuttaa suunnittelun ja kehityksen muita näkökohtia - kuten johdonmukaisuutta.
- Sisäiset tyylit aiheuttavat huoltopäänsärkyä: Kun työskentelet tyylitaulukoiden kanssa, voi olla vaikeaa selvittää, missä tyyli asetetaan. Kun olet tekemisissä sekoituksen kanssa upotetut, upotetut ja ulkoiset tyylit, sinulla on useita tarkistettavia paikkoja. Jos työskentelet verkkosuunnittelutiimissä tai joudut suunnittelemaan tai ylläpitämään jonkun muun rakentamaa sivustoa, sinulla on vielä enemmän ongelmia. Kun löydät tyylin ja vaihdat sitä, sinun on tehtävä se jokaisella sivulla jokaisella sivulla, johon se on sijoitettu. Se lisää aikaa ja työbudjettia tähtitieteellisesti.
- Upotetut tyylit eivät ole yhtä helppokäyttöisiä: Vaikka moderni näytönlukija tai muu apulaite voi pystyä käsittelemään sisäisiä määritteitä ja tunnisteet tehokkaasti, jotkut vanhemmat laitteet eivät voi, mikä voi johtaa omituisesti näkyvään verkkoon sivuja. Lisämerkit ja teksti voivat vaikuttaa myös siihen, miten hakukoneen robotti tarkastelee sivua, joten sivusi ei toimi niin hyvin hakukoneoptimoinnissa.
- Upotetut tyylit tekevät sivuistasi isompia: Jos haluat, että kaikki sivustosi kappaleet näkyvät tietyllä tavalla, voit tehdä sen kerran noin kuudella rivillä koodia ulkoisessa tyylitaulukossa. Jos teet sen sisäisillä tyyleillä, sinun on kuitenkin lisättävä ne tyylit sivustosi jokaiseen kappaleeseen. Jos sinulla on viisi CSS-riviä, se on viisi riviä kerrottuna jokaisella sivustosi kappaleella. Kaistanleveys ja latausaika voivat lisääntyä kiireessä.
Vaihtoehto upotetuille tyyleille ovat ulkoiset tyylitaulukot
Käytä sisäisten tyylien käyttämisen sijaan ulkoisia tyylitaulukoita. Ne tarjoavat sinulle kaikki CSS-parhaiden käytäntöjen edut ja ovat helppokäyttöisiä. Tällä tavoin kaikki sivustollasi käytetyt tyylit elävät erillisessä asiakirjassa, joka sitten linkitetään verkkodokumenttiin yhdellä koodirivillä. Ulkoiset tyylitaulukot vaikuttaa mihin tahansa asiakirjaan, johon ne on liitetty. Jos sinulla on 20 sivun verkkosivusto, jossa jokainen sivu käyttää samaa tyylitaulukkoa - mikä on tyypillistä tapaa valmis - voit tehdä muutoksia jokaiselle sivulle yksinkertaisesti muokkaamalla näitä tyylejä kerran yhdessä paikka. Tyylien vaihtaminen yhdessä paikassa on helpompaa kuin koodauksen etsiminen verkkosivustosi jokaisella sivulla. Tämä joustavuus tekee sivuston pitkäaikaisesta hallinnasta paljon helpompaa.