Miksi yksinkertainen pilkku yksinkertaistaa koodausta
CSS tai Cascading Style Sheets ovat web-suunnittelualan hyväksytty tapa lisätä visuaalisia tyylejä sivustoon. CSS: llä voit hallita sivun asetteluja, värejä, typografioita , taustakuvia ja paljon muuta. Pohjimmiltaan, jos se on visuaalinen tyyli, niin CSS on tapa tuoda nämä tyylit sivustoosi.
Kun lisäät CSS-tyylit dokumenttiin, saatat huomata, että asiakirja alkaa enää pidentyä. Jopa pieni sivusto, jossa on vain muutamia sivuja, voi päätyä kohtuulliseen CSS-tiedostoon - ja erittäin suuri sivusto, jossa on paljon ja paljon ainutlaatuisen sisällön sivuja, voi olla erittäin suuria CSS-tiedostoja. Tämä yhdistää herkät sivustot, joissa on paljon tyyliarkkeihin sisältyviä mediakyselyitä, joilla muutetaan ulkoasujen ulkoasua ja sivun eri näyttöjä.
Kyllä, CSS-tiedostot voivat olla pitkiä. Tämä ei ole suuri ongelma sivuston suorituskyvyn ja latausnopeuden suhteen, koska jopa pitkä CSS-tiedosto todennäköisesti on melko pieni (koska se on oikeastaan vain tekstitiedosto). Joka tapauksessa jokainen pikku lasketaan sivunopeuden mukaan, joten jos voit tehdä tyyliarkkisi kevyesti, se on hyvä idea. Tällöin "pilkku" voi tulla hyvin käteväksi tyylisivuissasi!
Commas ja CSS
Olet ehkä miettinyt, mikä rooli pilkulla on CSS- valitsimen syntaksissa. Kuten lauseissa, pilkku tuo selkeyden - ei koodia - erottimiin. CSS-valitsimen pilku erottaa useat valitsimet samojen tyylien sisällä.
Katsotaan esimerkiksi joitain CSS: ää alla.
th {väri: punainen; }
td {väri: punainen; }
p.red {väri: punainen; }
div # firstred {väri: punainen; }
Tämän syntaksin avulla sanot, että haluat, että tunnisteet, td- tagit, otsikkotunnisteet, joissa on luokka punainen, ja div-tunniste, jonka ID-tunnus on ensin, on tyylin värin punaisena.
Tämä on täysin hyväksyttävää CSS: tä, mutta on kaksi merkittävää haittapuolta kirjoittaa se tällä tavalla:
- Jatkossa, jos päätät muuttaa näiden ominaisuuksien fontin värin siniseksi, sinun on tehtävä muutos neljä kertaa tyyliarkistasi.
- Se lisää paljon ylimääräisiä hahmoja tyyliarkille, jota et tarvitse. Nämä neljä tyyliä eivät ehkä näytä ylikuormitukselta, mutta jos jatkat tämän koko tyyliarkin läpi, rivit tulevat yhteen, ja levy on paljon, paljon suurempi kuin sen täytyy olla.
Jotta voimme välttää nämä haitat ja virtaviivaisemme CSS-tiedostoja, yritämme käyttää pilkkuja.
Komentojen käyttäminen erillisiin valitsimiin
Sen sijaan, että kirjoittaisit 4 erillistä CSS-valitsinta ja 4 sääntöä, voit yhdistää kaikki nämä tyylit yhteen sääntöominaisuuteen erottamalla yksittäiset valitsimet pilkulla. Tässä on se, miten se tapahtuisi:
th, td, p.red, div # firstred {väri: punainen; }
Pilkkuhahmo toimii periaatteessa sana "ja" valitsimen sisällä. Joten tämä pätee t h- tageihin JA td- tunnisteisiin ja -käyrätunnisteisiin, joissa on luokka punainen JA ja div-tunniste, jonka tunnus on ensin. Tämä on juuri se, mitä meillä oli aiemmin, mutta sen sijaan, että tarvitsisimme 4 CSS-sääntöä, meillä on yksi sääntö, jossa on useita valitsimia. Tämä on mitä pilkku valitsimessa tekee, joten meillä on useita valitsimia yhdessä säännössä.
Tämä lähestymistapa ei ainoastaan tekevän heikompia, puhtaampia CSS-tiedostoja, vaan tekee myös tulevista päivityksistä paljon helpompaa. Nyt, jos haluat vaihtaa väriä punaisesta siniseen, sinun on tehtävä muutos vain yhdessä paikassa alkuperäisten 4 tyyppisten sääntöjen sijaan. Ajattele näitä säästöjä koko CSS-tiedostossa ja näet, miten tämä säästää aikaa ja tilaa pitkässä rungossa!
Syntaksivaihtelu
Jotkut ihmiset haluavat tehdä CSS: n luettavammaksi erottamalla kukin valitsin omalla rivillään sen sijaan, että kirjoittaisit sen kaikki yhdellä rivillä kuten yllä. Näin se tapahtuisi:
th,
td,
p.red,
div # firstred
{
väri punainen;
}
Huomaa, että sijoitat pilkun jokaisen valitsimen jälkeen ja käytä sitten "enter", kun haluat katkaista seuraavan valitsimen omalle rivilleen. Et lisää pilkkua lopullisen valitsimen jälkeen.
Valitsimien välisten pilkkujen avulla luodaan entistä kompakti tyyliarkki, joka on helpompi päivittää tulevaisuudessa ja joka on helpompi lukea tänään.
Alkuperäinen artikkeli Jennifer Krynin. Julkaisija Jeremy Girard 5/8/17