Sivuston ulkoasua tai tyyliä sanelee CSS (Cascading Style Sheets). Tämä on tiedosto, jonka lisäät verkkosivustosi hakemistoon, joka sisältää erilaiset CSS-säännöt, jotka luovat sivusi visuaalisen suunnittelun ja ulkoasun.
Vaikka sivustot voivat käyttää ja usein käyttää useita tyylisivuja, ei ole tarpeen tehdä niin. Voit sijoittaa kaikki CSS-säännöt yhdeksi tiedostoksi, ja siihen on todella hyötyä, mukaan lukien nopeampi latausaika ja sivujen suorituskyky , koska niiden ei tarvitse hakea useita tiedostoja. Vaikka hyvin suuret yritykset-sivustot saattavat tarvita eri tyyppisiä arkkeja toisinaan, monet pienet ja keskisuuret sivustot voivat tehdä hienosti vain yhdellä tiedostolla. Tätä käytän suurimmalle osalle web-suunnittelutyöni - yhtä CSS-tiedostoa, jossa on kaikki säännöt, jotka minun sivuani tarvitsevat. Joten kysymys tulee nyt - mitä sinun pitäisi nimetä tämä CSS-tiedosto?
Yleissopimusten perusteet
Kun luot ulkoisen tyylisivun verkkosivuille, sinun tulee nimetä tiedosto seuraavanlaisten HTML-tiedostojen nimeämiskäytäntöjen mukaisesti:
Älä käytä erikoismerkkejä
Käytä vain CSS-tiedostonimiä kirjaimia a, numeroita 0-9, alaviivaa (_) ja yhdysmerkkejä (-). Vaikka tiedostojärjestelmäsi voi antaa sinun luoda tiedostoja, joissa on muita merkkejä, palvelimesi käyttöjärjestelmässä saattaa olla erikoismerkkejä. Sinä olet turvallisempi käyttämällä vain tässä mainittuja merkkejä. Loppujen lopuksi, vaikka palvelimesi sallii erikoismerkkejä, se ei välttämättä ole, jos päätät siirtää palveluntarjoajia tulevaisuudessa.
Älä käytä mitään tilaa
Samoin kuin erikoismerkkien kanssa, tilat voivat aiheuttaa ongelmia Web-palvelimellasi. On hyvä välttää niitä tiedostojen nimissä. Annan jopa sen, että nimetä tiedostoja, kuten PDF-tiedostoja, käyttävät näitä samoja yleissopimuksia, jos tarvitsen lisätä niitä verkkosivustoon. Jos tunnet, että tarvitset tilaa, jotta tiedoston nimi olisi helpompi lukea, valitse sen sijaan paria tai alaviivoja. Esimerkkejä, sen sijaan, että käytät "tämä on file.pdf" käytän "this-is-the-file.pdf".
Tiedoston nimi tulisi aloittaa kirjaimella
Vaikka tämä ei ole ehdoton edellytys, joissakin järjestelmissä on ongelmia tiedostonimien kanssa, jotka eivät käynnisty kirjaimella. Jos esimerkiksi päätät aloittaa tiedoston numeromerkillä, tämä voi aiheuttaa ongelmia.
Käytä kaikkia pienikoteloita
Vaikka tätä ei vaadita tiedostonimelle, se on hyvä idea, koska jotkut verkkopalvelimet ovat erottavaasi ja jos unohdat ja viitat tiedoston toiseen tapaukseen, se ei lataudu. Omassa työssäni käytetään pieniä kirjaimia jokaiselle tiedostonimelle. Olen itse asiassa todennut, että tämä on jotain, mitä monet uudet web-suunnittelijat kamppailevat muistamaan. Niiden oletustoiminto, kun nimeä tiedosto on pääoman hyödyntäminen nimen ensimmäinen merkki. Vältä tätä ja päästä tavaksi vain pieniä kirjaimia.
Pidä tiedoston nimi mahdollisimman lyhyessä
Vaikka useimpien käyttöjärjestelmien tiedostokoko on rajallinen, se on paljon pidempi kuin CSS-tiedoston nimi. Hyvä peukalosääntö on enintään 20 merkkiä tiedoston nimeen ilman laajennusta. Realistisesti, mitä kauemmin pidetään, on vaikeaa työskennellä ja linkittää joka tapauksessa!
Tärkein osa CSS-tiedostonimistänne
CSS-tiedoston tärkein osa ei ole itse tiedostonimi vaan laajennus. Laajennuksia ei tarvita Macintosh- ja Linux-järjestelmissä, mutta kannattaa sisällyttää yksi joka tapauksessa CSS-tiedostoa kirjoitettaessa. Näin aina tiedät, että se on tyyliarkki eikä sinun tarvitse avata tiedoston selvittääkseen, mitä se on tulevaisuudessa.
Se ei luultavasti ole suuri yllätys, mutta CSS-tiedostosi laajennuksen pitäisi olla:
CssCSS-tiedostojen nimeämissopimukset
Jos sinulla on vain yksi CSS-tiedosto sivustossa, voit nimetä sen haluamallasi tavalla. Mieluummin:
styles.css tai default.cssKoska useimmat sivustot, joihin työskentelen, sisältävät yhden CSS-tiedoston, nämä nimet toimivat hyvin minulle.
Jos verkkosivustosi käyttää useita CSS-tiedostoja, nimeä tyyliarkit toiminnon jälkeen, joten on selvää, mikä kunkin tiedoston tarkoitus on. Koska verkkosivulla voi olla useita tyylisivuja, se auttaa jakamaan tyylejäsi eri arkkeihin riippuen kyseisen arkin toiminnasta ja siinä olevista tyyleistä. Esimerkiksi:
- Layout vs. Design layout.css design.css
- Sivunosat main.css nav.css
- Koko sivusto, jonka alisivut ovat mainstyles.css subpage.css
Jos sivustosi käyttää jonkinlaista kehystä, voit todennäköisesti huomata, että se käyttää useita CSS-tiedostoja, joista jokainen on omistettu eri sivuille tai sivuston osa-alueille (typografia, väri, layout jne.).
Alkuperäinen artikkeli Jennifer Krynin. Julkaisija Jeremy Girard 9.5.17