CSS: n (Cascading Style Sheets) käyttäminen voi olla vaikeaa aloittelijoille. CSS: n avulla voit jäsentää, päivittää ja ylläpitää sovelluksesi ulkoasua. Mutta kieli vaatii taitoja käsitellä HTML-sivuja halutun asettelun saamiseksi.
Tässä on joitain virheitä, joita tulee välttää CSS: n kanssa työskennellessä. Ne säästävät aikaasi ja helpottavat kehitysprosessiasi.
1. Pxxin käyttäminen fonttikoot
Yksikkö "px" edustaa pikseleitä. Voit käyttää sitä ilmaisemaan web-sivulla eri pituuksia elementin leveydestä ja korkeudesta sen kirjasinkokoon.
px kuitenkin lukitsee suunnittelusi kiinteään kokoon kaikille näytöille. Kuvan kokoinen kuva voi kattaa yhden näytön koko leveyden ja vain pienen osan toisesta. Jos haluat suhteellisemman elementin, käytä suhteellisia mittauksia kuten rem tai prosentit (%).
Paras käytettävä suhteellinen mitta on rem. Tämä yksikkö viittaa juurielementin fonttikokoon, jonka lukija voi usein asettaa selaimen asetuksissa. Voit nähdä px: n ja rem: n vaikutuksen elementtiin seuraavassa esimerkissä:
html>
<HTML>
<pää>pää>
<kehon>
<h1>Tämä on otsikko 1h1>
<h2>Tämä on otsikko 2h2>
<s>Tämä on kappale.s>
<s>Tämä on toinen kappale.s>
kehon>
html>Voit muotoilla tämän asiakirjan kirjasinkoot käyttämällä px-yksiköitä seuraavan CSS: n avulla:
h1 {
Fonttikoko: 50px;
}h2 {
Fonttikoko: 30px;
}
s {
Fonttikoko: 15px;
}
Tuloksena oleva sivu näyttää hyväksyttävältä, kun katsot sitä suurelta näytöltä:
Mutta se ei näytä edustavalta pienemmällä näytöllä, kuten puhelimessa:
Levitä seuraavaksi rem samaan sisältöön. Määritä perusfontin koko html-elementille ja muuta muiden elementtien kokoa rems: n avulla alla olevan kuvan mukaisesti:
html {
Fonttikoko: 16px;
}h1 {
Fonttikoko: 3rem;
}h2 {
Fonttikoko: 2rem;
}
s {
Fonttikoko: 1rem;
}
Huomaa ero suuren ja pienen näytön välillä. Remillä sisältö skaalautuu paremmin näytön koosta riippumatta. Elementit eivät koskaan ylitä asetettua näytön kokoa. Siksi on parempi käyttää suhteellisia pituuksia pikseleiden sijaan.
Työpöydän näytöllä:
Pienellä näytöllä teksti rem-yksiköissä on edelleen luettavissa:
2. Kokoa kaikki tyylisi yhteen tiedostoon
Yhden CSS-tiedoston käyttäminen suuressa projektissa voi aiheuttaa sotkua. Sinulla on tiedosto, jossa on pitkiä koodirivejä, jotka ovat hämmentäviä päivitettäessä. Kokeile käyttää eri tiedostoja CSS-tyylisivuille eri komponenteille.
Sinulla voi esimerkiksi olla erilaisia tiedostoja navigointia, ylä- ja alatunnistetta varten. Ja toinen vartalon osille. CSS-tiedostojen erottaminen auttaa jäsentämään sovelluksesi ja edistämään koodin käytettävyyttä.
3. Sisäisen CSS: n käyttö väärin
Vanilja-CSS: ssä voit kirjoittaa tyylejä HTML-sivuille aivan kuten aiemmin CSS-kehykset, kuten Bootstrap ja TailwindCSS. Sisäisen CSS: n avulla voit käyttää ainutlaatuista tyyliä HTML-elementtiin. Se käyttää HTML-elementin style-attribuuttia.
Seuraava koodi on esimerkki upotetusta CSS: stä.
<h2tyyli="väri: vihreä;">Tämä on vihreä otsikkoh2>
<styyli="väri punainen;">Tämä on punainen kappale.s>
Teksti näyttää tältä:
Kuitenkin HTML, jossa on vain sisäinen CSS, voi olla sotkuinen. Koska CSS: lle ei ole muuta sijaintia, kaikki CSS on samassa tiedostossa kuin HTML. Se näyttää tungosta. Tällaisen tiedoston muokkaaminen on vaikeaa, varsinkin jos se ei ole sinun koodisi.
Myös upotettua CSS: ää käytettäessä jokaiselle elementille on kirjoitettava koodi. Tämä lisää toistoa ja vähentää koodin uudelleenkäyttöä. Käytä aina ulkoisten tyylisivujen ja sisäisen CSS: n yhdistelmää verkkosivujesi tyylin luomiseen.
4. Ylikäyttö !tärkeää
CSS: ssä !tärkeä sääntö lisää ominaisuuden/arvon merkitystä. Se ohittaa muut kyseisen elementin kyseisen ominaisuuden tyylisäännöt.
Sinulla pitäisi olla vain muutama !tärkeä säännöt koodissasi. Käytä sitä vain tarvittaessa. Ei ole mitään järkeä kirjoittaa koodia ja sitten ohittaa sitä. Koodisi näyttää sotkuiselta ja aiheuttaa ongelmia, kun se suoritetaan joissakin laitteissa.
html>
<html>
<pää>pää>
<kehon>
<s> Olen oranssi s>
<sluokkaa="luokkani"> Olen vihreä s>
<sid="minun henkilötietoni"> Olen sininen. s>
kehon>
html>CSS:
#minun henkilötietoni {
taustaväri: sininen;
}.luokkani {
taustaväri: vihreä;
}
s {
taustaväri: oranssi !tärkeä;
}
Tulos on tällainen:
5. Ei noudata nimeämiskäytäntöjä
CSS: ssä on nimeämiskäytännöt, jotka ohjaavat kehittäjiä vakiokoodin kirjoittamiseen. Tämä on välttämätöntä, jos päädyt CSS-tiedoston virheenkorjaus tulevana päivänä.
Yksi näistä standardeista sisältää väliviivojen käyttämisen ryhmiteltyjen sanojen erottamiseen. Toinen on valitsimen nimeäminen sen mukaan, mitä se tekee. Joten kenenkään sitä katsovan ei tarvitse arvata. Se helpottaa myös koodin lukemista, ylläpitoa ja jakamista. Esimerkiksi:
Tämän sijaan:
.image1 { marginaali vasen: 3%; }Kirjoita näin:
.poika-kuva { marginaali vasen: 3%; }Kun katsot tyylitaulukkoa, tiedät tarkalleen, mille kuvalle koodi on tarkoitettu. Googlen HTML/CSS-tyyliopas luetellaan monia muita käytäntöjä, jotka jokaisen kehittäjän tulisi tietää.
Kommenttien kirjoittaminen on ohjelmoinnin aliarvostetuin taito. Monet ihmiset unohtavat kirjoittaa kommentteja selittääkseen koodinsa. Mutta se säästää aikaa. Kommentit ovat välttämättömiä koodin lukemisen ja ylläpitämisen kannalta.
Koska CSS on rakenteeltaan löyhä ja kuka tahansa voi kehittää omia käytäntöjään, kommentit ovat tärkeitä. Hyvin jäsenneltyjen kommenttien käyttäminen tyylisivusi selittämiseen on hyvä käytäntö. Voit kirjoittaa kommentteja, joissa selitetään koodin osia ja niiden toimintaa.
/* videoelementit tarvitsevat tilaa hengittää */
.video {
marginaali yläosa: 2em;
}
/* sankariosion muotoilu */
.tervehdys {
marginaali yläosa: 1em;
}
7. Epäonnistuminen etukäteen suunnittelussa
Monet ihmiset tekevät niin, mutta on vakava virhe aloittaa koodaaminen ilman suunnitelmaa. CSS määrittää, miltä käyttöliittymäsi rakenne näyttää. Suunnittelu kertoo paljon ohjelmointitaidoistasi.
Sivustosi suunnittelu selventää näkemystäsi ja resursseja, joita tarvitaan päästäksesi perille. Pidä mielessäsi kuva projektistasi. Suunnittele se sitten paperille tai käytä suunnittelutyökalupakki, kuten Canva visualisoidaksesi mitä haluat.
Kun sinulla on täydellinen kuva projektista, kokoa kaikki resurssit ja aloita koodaus. Se säästää aikaa ja irtisanomisia.
Miksi sinun pitäisi harkita näitä suosituksia
Jos kehität sovelluksia verkossa, käytät CSS: ää. Hyvin toimiminen CSS: n kanssa vaatii harjoittelua ja standardien noudattamista. Käytännöt eivät ainoastaan tee koodistasi luettavaa, vaan myös ylläpidettävää.
Standardoidun koodin kirjoittaminen säästää aikaa ja vaivaa. Aika, jonka olisit käyttänyt käyttöliittymän muotoiluun, voit käyttää monimutkaisempiin ominaisuuksiin. Se myös varmistaa, että voit käyttää koodia uudelleen ja jakaa sen muiden kanssa. Kirjoita parempi koodi noudattamalla asetettuja käytäntöjä ja tule paremmaksi kehittäjäksi.
