Lähdekoodi sivulle CSS

== Hyvät puolet ==


'''Sisällön erottaminen esitysmuodosta'''

CSS mahdollistaa sisällön julkaisemisen useissa muodoissa nimellisparametreihin perustuen. Nimellisparametrit ovat selkeitä käyttäjään ja käyttöympäristöön sidottuja muuttujia kuten käyttäjäkohtaiset mieltymykset, eri selainten tiedot, katselulaitteen tyyppi (pöytätietokone vai mobiililaite) ja käyttäjän maantieteellinen sijainti.

'''Sivuston yhdenmukaisuus'''

CSS:n käyttö on tehokkainta periytymisen ja peräkkäisyyden (cascading) ollessa kunnossa, jolloin voidaan koko sivuston ulkoasuun vaikuttaa yhdellä globaalilla tyylisivulla. Tämä mahdollistaa siis yksittäisten elementtien säätämisen tai muuttamisen muokkaamalla tyylisivulla olevia sääntöjä. Ennen CSS:n kehitystä, tällainen ylläpito oli haastavaa ja aikaa vievää.

'''Kaistanleveys'''

Tyylisivu, olipa se sisäinen tai ulkoinen, määrittää elementin tyylin kerran HTML:n määrittämälle alueelle luokan, tyypin tai suhteen mukaan. Tällä saavutetaan suurempi tehokkuus, sillä tyylitietoa ei tarvitse määrittää jokaiselle elementin instanssille. Yleensä ulkoinen tyylisivu tallennetaan selaimen välimuistiin, jolloin samaa tyylisivua voidaan hyödyntää useilla sivuilla ilman uudelleen latausta. Tämä menettelytapa vähentää verkkoyhteydelle aiheutuvaa kuormaa.

'''Sivuston ulkoasun uusinta'''

Vaihtamalla yksi rivi, voidaan koko sivuston ulkoasu muuttaa kerralla aivan toisenlaiseksi, pitäen sisällön samana. Tämä parantaa sivuston saavutettavuutta sekä pystytään sovittamaan sivuston ulkoasua eri kokoisille ja tyyppisille laitteille. Mikäli laite ei kykene tunnistamaan elementtien tyylejä niin sisältö silti näytetään käyttäjälle.

'''Saavutettavuus'''

Ilman CSS:ää, kehittäjät joutuvat yleensä rakentamaan sivuston erilaisten tekniikoiden avulla, jotka hankaloittavat sivuston käyttöä näkövammaisille. Esimerkki tällaisesta tekniikasta on HTML-taulukko.

'''Tehokas ja kompakti koodi'''

CSS mahdollistaa ulkoasun tyylien määrittämisen lyhyellä ja tiiviillä koodilla. Sen avulla on mahdollista hyödyntää valmiita tyyliluokkia ja id-attribuutteja, mikä vähentää tarvetta toistaa samaa koodia useaan otteeseen. CSS:llä pystyy myös käyttämään lyhyitä syntaksimuotoja, kuten värejä tai yksiköitä, mikä pienentää tiedostokokoa ja parantaa sivuston latausnopeutta ja toimivuutta.

'''Animointi ja interaktiivisuus'''

CSS tarjoaa monia ominaisuuksia, jotka mahdollistavat animaatioiden ja interaktiivisten elementtien luomisen ilman JavaScriptin käyttöä. Voit luoda siirtymiä, muodonmuutoksia, animoituja liikkeitä ja hover-efektejä ja transformaatioita jotka parantavat käyttäjäkokemusta ja tekevät sivustosta elävämmän ja dynaamisemman. CSS-transformaatiot esimerkiksi antavat sinulle mahdollisuuden muuttaa elementtien kokoa, sijaintia, kiertämistä ja vääristymiä. Voit skaalata, kääntää, kallistaa tai vääristää elementtejä, mikä avaa monia luovia mahdollisuuksia animaatioihin. Transformaatiot voidaan yhdistää siirtymiin ja avainkehyksiin luodaksesi monimutkaisempia ja dynaamisempia animaatioita.

'''Helppo päivitettävyys'''

CSS:n erillisenä tiedostona pitäminen mahdollistaa sen helpon päivittämisen. Voit muuttaa tyylisivua tarpeen mukaan ilman, että sinun tarvitsee muokata itse sivuston sisältöä. Tämä säästää aikaa ja vaivaa päivitysten tekemisessä ja mahdollistaa nopean ulkoasun muokkaamisen esimerkiksi uuden designin suunnittelun tai brändin mukaisesti.

'''Laajennettavuus'''

CSS tarjoaa mahdollisuuden luoda omia tyylisääntöjä ja laajentaa tyylien toiminnallisuutta. Voit hyödyntää CSS:n jatkeita, kuten Sassia tai Lessiä, jotka tuovat mukanaan muuttujia, funktioita ja sisäkkäisyyksiä. Tämä helpottaa tyylien hallintaa ja kehitystyötä, sillä voit käyttää uudelleen käyttökelpoisia tyylisääntöjä ja tehdä tyylistäsi modulaarisempaa.

'''Lokalisaatio'''

CSS mahdollistaa sivustojen mukauttamisen eri kulttuurien ja kielten tarpeisiin. Sillä pystyy hallitsemaan tekstisuuntaa, asettelua ja ulkoasua eri kielten ja kirjoitusjärjestelmien vaatimusten mukaan<ref>{{Verkkoviite|osoite=https:// linkedin /advice/0/how-do-you-use-front-end-tools-support-multiple|nimeke=How do you use front-end tools to support multiple languages and cultures?|julkaisu= linkedin |viitattu=2023-09-05|ietf-kielikoodi=en}}</ref>. Tämä parantaa käyttäjäkokemusta ja laajentaa sivustojen käyttäjäkuntaa maailmanlaajuisesti.

'''Laaja yhteisö'''

CSS:ää käytetään [https://w3techs /technologies/details/ce-css lähes jokaisessa nettisivussa], jonka takia sillä on laaja ja aktiivinen yhteisö. Tämän ansiosta CSS:stä löytyy valtavasti tietoja ja resursseja, joita kehittäjät pystyvät hyödyntämään.