10 parasta CSS-käytäntöä koodin parantamiseksi
On todella helppoa löytää itsesi miettimään, miten CSS: nne on tullut tällainen sotku.
Joskus se on seurausta hämärästä koodauksesta alusta alkaen, joskus se johtuu useista hakkereista ja muutoksista ajan mittaan.
Riippumatta syystä, sen ei tarvitse olla niin. Kirjoittamalla puhdas, erittäin hallittavissa oleva CSS on yksinkertainen, kun aloitat oikealla jalalla ja ansiosta koodisi on helpompi ylläpitää ja muokata myöhemmin.
Tässä on 11 vinkkejä prosessin nopeuttamiseksi, CSS-kirjoitus, joka on hoikka, nopeampi ja vähemmän todennäköisesti sinulle päänsärky.
1. Pysy järjestäytyneinä
Aivan kuten muuhun, kannattaa pitää itsesi järjestäytyneenä. Sen sijaan, että satunnaisesti pudotetaan id: iin ja luokkiin siinä järjestyksessä, jossa he tulevat mielessä, käytä johdonmukaista rakennetta.
Se auttaa sinua pitämään CSS: n CSS-osaa mielessä ja asettamaan tyyliarkistasi hyödyntämään tyyliperintöä.
Ilmoita yleisimpiä esineitäsi ensin, niin ei-niin-geneerisiä ja niin edelleen. Tämä sallii CSS: n perimän oikein ominaisuuksia ja helpottaa sinua tietyn tyylin ohittamisessa, kun tarvitset. Sinun on nopeampi muokata CSS: täsi myöhemmin, koska se seuraa helppolukuista, loogista rakennetta.
Käytä rakennetta, joka toimii parhaiten, kun pidät tulevia muokkauksia ja muita kehittäjiä mielessäsi.
- Nollaa ja ohittaa
- Linkit ja tyyppi
- Pääasettelu
- Toissijaiset asettelorakenteet
- Lomakeosat
- sekalainen
2. Otsikko, päivämäärä ja allekirjoitus
Kerro muille, kuka kirjoitti CSS: nne, kun se oli kirjoitettu ja kenen ottaisi yhteyttä, jos heillä on kysymyksiä siitä. Tämä on erityisen hyödyllistä mallien tai teemojen suunnittelussa.
Odota hetki ... mikä on kyse bitumin väreistä ? Vuosien varrella olen huomannut, että yksinkertaisten luetteloiden käyttämien tavallisten värien luettelon lisääminen on erittäin hyödyllistä alkuvaiheen kehityksen ja muokkauksen aikana.
Tämä säästää sinun tarvitsematta avata Photoshopia näyttämään väriä mallista tai etsiä sivustosi värejä tyyliopas (jos sillä on yksi). Kun tarvitset kyseiselle siniselle HTML-koodia, siirry ylös ja kopioi se.
3. Pidä mallikirjasto
Kun olet ratkaissut käytössä olevan rakenteen, poista kaikki sellainen, joka ei ole yleinen ja tallenna tiedosto CSS-malliksi myöhempää käyttöä varten.
Voit tallentaa useita versioita useille käyttötarkoituksille: kahden sarakkeen ulkoasu, blogin asettelu, tulostus, mobiili ja niin edelleen. coda (OSX: n editorilla) on mahtava Clip- toiminto, jonka avulla voit tehdä tämän helposti. Monilla muilla toimittajilla on samanlainen piirre, mutta jopa yksinkertainen tekstitiedostojen erä toimii hyvin.
On järjetöntä kirjoittaa uudelleen jokainen tyyliarkkiasi tyhjästä, varsinkin kun käytät kussakin samaa konventionaalisuutta ja menetelmää.
4. Käytä hyödyllisiä nimityssopimuksia
Huomaat yllä, mistä olen julistanut pari sarakkeen id: iä ja kutsuin heille col-alpha ja col-beeta. Miksi emme vain kutsu heitä col-vasemmalle ja col-oikealle? Ajattele tulevia muokkauksia aina.
Ensi vuonna saatat joutua suunnittelemaan sivustosi uudestaan ja siirtämään vasemman sarakkeen oikealle. Sinun ei pitäisi joutua nimeämään HTML-elementti uudelleen ja nimeämään tunnuksesi tyylitiedostasi vain muuttamalla sen asentoa.
Varmista, että pystyt vain sijoittamaan vasemmanpuoleisen sarakkeen oikealle ja pitämään tunnus # col-vasemmalla, mutta kuinka hämmentävää se on? Jos tunnus sanoo vasemmalle, pitäisi odottaa, että se on aina vasemmalla. Tämä ei anna sinulle paljon tilaa siirtää asioita myöhemmin.
Yksi CSS: n tärkeimmistä eduista on kyky erottaa tyylejä sisällöstä. Voit täysin uudistaa sivustosi muokkaamalla CSS: ää koskematta HTML-muotoon. Älä siis sido CSS: täsi käyttämällä rajoittavia nimiä . Käytä monipuolisia nimeämiskäytäntöjä ja pysykää johdonmukaisena.
Jätä asema tai tyylitietoiset sanat tyyliltään ja tunnuksistasi. Luonnollisen lippa-luokka tekee sinulle enemmän työtä tai tekee tyylisivustasi todella epäselvää, kun asiakas pyytää sinua myöhemmin muuttamaan siniset linkit oranssiksi.
Nimeä elementteesi niiden perusteella, mitä he ovat, eivät mitä he näyttävät. Esimerkiksi, .com-sininen on paljon vähemmän monipuolinen kuin .com-beta ja .post-largefont on rajoittavampi kuin .post-otsikko.
5. Ompelemme alaotsakkeiden sijaan
Vanhemmat selaimet haluavat saada epäselvyyttä CSS: n alaviivoilla tai eivät tue niitä lainkaan. Jotta taaksepäin yhteensopivuus paranee, käytä tapoja käyttää tavuviivojen sijasta. Käytä # col-alpha # col_alpha sijaan.
6. Älä toista itsesi
Uudelleen käytä attribuutteja aina, kun mahdollista, ryhmittämällä elementtejä sen sijaan, että kirjoitat tyylejä uudelleen. Jos h1- ja h2-elementit käyttävät samaa kirjasinkokoa, väriä ja marginaaleja, ryhmitä ne pilkulla.
Tämä:
Sinun tulisi myös käyttää pikakuvakkeita aina kun se on mahdollista. Ole aina etsimässä mahdollisuuksia ryhmitellä elementtejä ja käyttää ilmoituksen pikavalintoja.
Voit saavuttaa kaiken tämän:
vain tämä:
On erittäin tärkeää, että ymmärrät järjestyksen, jossa CSS tulkitsee nämä pikanäppäimet: ylhäältä, oikealta, alhaalta ja vasemmalta. Suuri myötäpäivään oleva ympyrä, joka alkaa keskipäivällä.
Myös jos ylä- ja alaosa tai vasemmalla ja oikealla varustetut ominaisuudet ovat samat, tarvitset vain kaksi:
Tämä asettaa ylimmän ja alimman marginaalin arvoon 1em ja vasemmalla ja oikealla reunalla 0.
7. Optimoi kevyille tyylialustoille
Edellä mainittujen vinkkien avulla voit todella pienentää tyyliarkkien kokoa. Pienemmät kuormat nopeutuvat ja pienemmät on helpompi ylläpitää ja päivittää.
Leikkaa mitä et tarvitse ja konsolidaat mahdollisuuksien mukaan ryhmittämällä. Ole varovainen, kun käytät myös CSS-säikeitä. Olet todennäköisesti periä paljon irtotavarana, jota ei käytetä.
Toinen nopea kärki ohut CSS: n ei tarvitse määrittää mittayksikköä käytettäessä nollaa. Jos marginaali on 0, sinun ei tarvitse sanoa 0px tai 0em. Nolla on nolla riippumatta mittayksiköstä, ja CSS ymmärtää tämän.
8. Kirjoita Base for Gecko, Tweak for Webkit ja IE
Tallenna itsesi vianmääritys päänsärkyä ja kirjoittaa CSS ensin Gecko selaimet (Firefox, Mozilla, Netscape, Flock, Camino). Jos CSS toimii oikein Geckon kanssa, se todennäköisesti on ongelmatonta Webkitissä (Safari, Chrome) ja Internet Explorerissa.
9. Vahvista
Hyödyntää W3C: n ilmainen CSS-validointi . Jos olet juuttunut ja asettelu ei tee sitä, mitä haluat, CSS-validointi auttaa suuresti virheiden osoittamisessa.
10. Pidä siisti talo
Erota selainkohtainen CSS omaan tyyliinsä ja sisällytä mukaan tarvittaessa Javascriptin, palvelimen puolella oleva koodi tai ehdollisia huomautuksia . Käytä tätä menetelmää, jotta vältät likaiset CSS-hakkerit tärkeimmistä tyyliarkeistasi. Tämä pitää base CSS: n puhtaana ja hallittavissa.
Jeff Couturier on kirjoittanut yksinomaan WDD: lle
Seuraatko näitä menetelmiä verkkosivustosi koodauksessa? Mitä muita tekniikoita käytät paremman koodin luomiseen?