Jokainen verkkosivusto koostuu rakenteellisista, toiminnallisista ja tyylillisistä elementeistä. CSS-tyylilehdet sanella verkkosivuston ulkonäkö ("ulkoasu"). Nämä tyylit pidetään erillään HTML-rakenteesta päivityksen ja verkkostandardien noudattamisen helpottamiseksi.
Tyylitaulukoiden ongelma
Monien verkkosivustojen koon ja monimutkaisuuden ansiosta tyylitaulukoista voi tulla melko pitkiä ja hankalia. Tämän ongelman monimutkaisuus on kasvanut nyt mediakyselyt varten reagoivia verkkosivustotyylejä ovat olennainen osa suunnittelua, jotta verkkosivusto näyttää sellaiselta kuin sen pitäisi olla laitteesta riippumatta. Pelkästään nämä mediakyselyt voivat lisätä huomattavan määrän uusia tyylejä CSS-asiakirjaan, mikä tekee siitä vielä vaikeamman työskennellä. Tämän monimutkaisuuden hallitsemisessa CSS-kommenteista voi tulla korvaamaton apu verkkosivustojen suunnittelijoille ja kehittäjille.
Kommentit Lisää rakenne ja selkeys
Kommenttien lisääminen verkkosivuston CSS-tiedostoihin järjestää kyseisen koodin osiot asiakirjaa tarkastavalle lukijalle. Se varmistaa myös johdonmukaisuuden, kun yksi verkkoammattilainen jatkaa toistensa lähtöä tai kun joukko ihmisiä työskentelee sivustolla.
Hyvin muotoillut kommentit välittävät tyylitaulukon tärkeät näkökohdat ryhmän jäsenille, jotka eivät ehkä tunne koodia. Nämä kommentit ovat hyödyllisiä myös ihmisille, jotka ovat työskennelleet sivustolla aiemmin, mutta eivät ole viime aikoina; verkkosuunnittelijat työskentelevät yleensä monilla sivustoilla, ja suunnittelustrategioiden muistaminen toisesta on vaikeaa.
Vain ammattilaisten silmille
CSS-kommentteja ei näytetä, kun sivu renderöidään sisään verkkoselaimet. Nämä kommentit ovat vain informatiivisia, aivan kuten HTML-kommentit ovat (vaikka syntakse on erilainen). Nämä CSS-kommentit eivät vaikuta millään tavalla sivuston visuaaliseen esitykseen.
CSS-kommenttien lisääminen
CSS-kommentin lisääminen on melko helppoa. Kirjaa kommenttisi oikeilla alkamis- ja loppukomentotageilla:
Aloita kommenttisi lisäämällä /* ja sulje se */.
Näiden kahden tagin välissä on kommentin sisältö, joka näkyy vain koodissa eikä selain hahmottele sitä.
CSS-kommentti voi viedä minkä tahansa määrän rivejä. Tässä on kaksi esimerkkiä:
/ * esimerkki punaisesta reunasta * /
div # border_red {
reunus: ohut kiinteä punainen;
}
/***************************
****************************
Kooditekstin tyyli
****************************
***************************/
Lohkojen jakaminen
Monet suunnittelijat järjestävät tyylitaulukot pieniksi, helposti sulaviksi paloiksi, jotka on helppo skannata lukemisen aikana. Tyypillisesti kommentteja edeltää ja seuraa joukko väliviivoja, jotka luovat sivulle suuria, ilmeisiä taukoja, jotka on helppo nähdä. Tässä on esimerkki:
/ * Otsikkotyylit * /
Nämä kommentit osoittavat uuden koodauksen alkamisen.
Kommentointikoodi
Koska kommenttimerkit käskevät selainta ohittamaan kaiken niiden välillä, voit poistaa ne käytöstä väliaikaisesti CSS-koodin joidenkin osien avulla. Tämä temppu voi olla kätevä virheenkorjauksessa tai verkkosivun muotoilun säätämisessä. Itse asiassa suunnittelijat käyttävät niitä usein "kommentoimaan" tai "sammuttamaan" koodialueita nähdäkseen, mitä tapahtuu, jos kyseinen osa ei ole osa sivua.
Lisää avaava kommenttimerkki ennen koodia, jonka haluat kommentoida (poista käytöstä). aseta sulkutunniste kohtaan, jossa haluat poistetun osan loppuvan. Mikään näiden tunnisteiden välillä ei vaikuta sivuston visuaaliseen esitykseen, mikä auttaa sinua CSS-virheenkorjauksessa, jotta näet, missä ongelma tapahtuu. Sitten voit mennä sisään ja korjata juuri sen häiriön ja poistaa sitten kommentit koodista.
CSS-kommentointivihjeitä
Monet koodaajat sisältävät kommenttilohkoja minkä tahansa uuden kooditiedoston yläosassa. Jäljitä tätä strategiaa lisäämällä kommenttiryhmä nimesi, merkitykselliset päivämäärät ja niihin liittyvät tiedot auttamaan ihmiset ymmärtävät projektin kontekstin eikä vain päätöksiä siitä, mitä tapahtuu suhteessa tiettyyn koodiin lohko.