Skip to content

Miksi yksinkertainen pilkku yksinkertaistaa koodausta

20 de maaliskuu de 2021

CSS tai Cascading Style Sheets ovat verkkosuunnittelualan hyväksytty tapa lisätä visuaalisia tyylejä sivustoon. CSS: n avulla voit hallita sivun asettelua, värejä, typografiaa, taustakuvia ja paljon muuta. Pohjimmiltaan, jos se on visuaalinen tyyli, CSS on tapa tuoda nämä tyylit verkkosivustollesi.

Kun lisäät CSS-tyylejä asiakirjaan, saatat huomata, että asiakirja alkaa pidentyä ja pidentyä. Jopa pienellä sivustolla, jolla on vain muutama sivu, voi päätyä huomattava CSS-tiedosto – ja erittäin suurella sivustolla, jossa on paljon ja paljon ainutlaatuisen sisällön sivuja, voi olla erittäin suuria CSS-tiedostoja. Tätä täydentävät reagoivat sivustot, joilla on paljon mediakyselyjä tyylitaulukoissa muuttamaan visuaalisen ulkoasun ja sivun ulkoasua eri näytöille.

Kyllä, CSS-tiedostot voivat pidentyä. Tämä ei ole suuri ongelma sivuston suorituskyvyn ja latausnopeuden suhteen, koska jopa pitkä CSS-tiedosto on todennäköisesti melko pieni (koska se on oikeastaan ​​vain tekstiasiakirja). Silti jokainen pieni sivunopeus laskee, joten jos voit tehdä tyylisivustasi ohuemman, se on hyvä idea. Tässä ”pilkku” voi olla erittäin kätevä tyylisivullasi!

Kommat ja CSS

Olet ehkä miettinyt, mikä rooli pilkulla on CSS-valitsimen syntaksissa. Kuten lauseissa, pilkku tuo selkeyttä – ei koodia – erottimiin. CSS-valitsimen pilkku erottaa useita valitsimia samoissa tyyleissä.

Tarkastellaan esimerkiksi alla olevaa CSS: ää.

th { color: red; }
td { color: red; }
p.red { color: red; }
div#firstred { color: red; }

data-type = ”code”>

Tällä syntaksilla sanot haluavasi th tunnisteet, td Tunnisteet, kappaletagit, joissa on luokka punainen, ja div-tunniste, joissa on tunnus, vahvistivat kaikki tyylin värin punaiseksi.

Tämä on täysin hyväksyttävä CSS, mutta sen kirjoittamiselle tällä tavalla on kaksi merkittävää haittapuolta:

  • Jatkossa, jos päätät muuttaa näiden ominaisuuksien kirjasimen värin siniseksi, sinun on tehtävä tämä muutos neljä kertaa tyylitaulukossasi.
  • Se lisää tyylisivullesi paljon ylimääräisiä merkkejä, joita et tarvitse. Nämä 4 tyyliä eivät välttämättä näytä olevan ylivoimainen, mutta jos jatkat tämän tekemistä koko tyylitaulukossasi, viivat summautuvat ja tuo arkki on paljon, paljon suurempi kuin sen pitäisi olla.

Näiden haittojen välttämiseksi ja CSS-tiedostosi virtaviivaistamiseksi yritämme käyttää pilkkuja.

Komentajien käyttäminen valitsimien erottamiseen

Sen sijaan, että kirjoittaisit 4 erillistä CSS-valitsinta ja 4 sääntöä, voit yhdistää kaikki nämä tyylit yhdeksi sääntöominaisuudeksi erottamalla yksittäiset valitsimet pilkulla. Näin se tehdään:

th, td, p.red, div#firstred { color: red; }

data-type = ”code”>

Pilkku toimii periaatteessa sanana ”tai” valitsimen sisällä. Joten tämä pätee th tunnisteet TAI td tunnisteet TAI kappaletagit luokan punaisella TAI div tagi ID: llä. Juuri näin meillä oli aiemmin, mutta sen sijaan, että tarvitsisimme 4 CSS-sääntöä, meillä on yksi sääntö, jossa on useita valitsimia. Tätä pilkku tekee valitsimessa, se antaa meille mahdollisuuden olla useita valitsimia yhdessä säännössä.

Tämä lähestymistapa ei vain tee ohuempia, puhtaampia CSS-tiedostoja, se myös helpottaa tulevia päivityksiä. Jos haluat nyt vaihtaa värin punaisesta siniseksi, sinun on muutettava vain yhdessä paikassa alkuperäisten 4 tyylisäännön sijaan! Ajattele näitä ajansäästöjä koko CSS-tiedostossa ja näet, kuinka tämä säästää sekä aikaa että tilaa pitkällä aikavälillä!

Syntaksi vaihtelu

Jotkut ihmiset päättävät tehdä CSS: stä helpommin luettavamman erottamalla kukin valitsin omalle rivilleen sen sijaan, että kirjoittaisit kaiken yhdelle riville kuten yllä. Näin se tehdään:

th,
td,
p.red,
div#firstred
{
color: red;
}

data-type = ”code”>

Huomaa, että asetat pilkun jokaisen valitsimen perään ja sitten ”enter” -näppäimellä katkaiset seuraavan valitsimen omalle rivilleen. ÄLÄ lisää pilkua viimeisen valitsimen jälkeen.

Käyttämällä pilkkuja valitsimesi välillä luot pienikokoisemman tyylitaulukon, jota on helpompi päivittää tulevaisuudessa ja jota on helpompi lukea tänään!