Kuinka optimoida CSS-toimitus – 7 yksinkertaista vaihetta

css-optimointi vektorikuvaMenevät ovat päivät, jolloin suunnittelun asiantuntijat ja alan johtavat bloggaajat suosittelivat verkkosivustojen rakentamista enintään 30 kilotavua…


Tuolloin tämän “korkin” odotettiin käsittelevän HTML: ää, JavaScriptiä, kuvia, CSS: tä ja Flashia. Olkaamme rehellisiä, 30 kt: n kokonaan ylittäminen ei vie paljon.

Kun JavaScript ja CSS saivat suosiota, tuli yleiseksi, että pelkästään CSS ylitti 30 kt: n enimmäismäärän. Tämä pätee erityisesti suurempiin verkkosivustoihin.

Sinun ei pitäisi kuitenkaan olla liian keskittynyt kilotavujen määrään rakentaessasi ja suunnitellessasi verkkosivustosi sivuja. On tärkeää pitää sivusi optimoitu ja tiukka kirjoittaessasi CSS: ää.

Optimointi ei tarkoita pelkästään tiedostojen koon minimointia. Kyse on siitä, että sivuillasi ei ole sotkua ja paisumista, jolloin ne ovat mahdollisimman järjestettyjä ja tehokkaita. Kun opit lisää CSS: n optimoinnin parhaista käytännöistä, huomaat, että luot automaattisesti pienempiä tiedostokokoja.

Tässä on 5 yksinkertaista asiaa, jotka voit tehdä CSS: n optimoimiseksi nyt.

Kuinka optimoida CSS-toimitus kokonaan

1. Käytä pikakirjaa

Lyhyesti kirjoittamisesta on tullut erittäin yleinen käytäntö. Tämä on ylivoimaisesti yksinkertaisin tapa vähentää koodiasi ja kuinka kauan koodin syöminen vie sinut. Jos et vielä tee tätä, ei ole nykyisen kaltaista aikaa.

css-fontti omaisuus

On olemassa monia elementtejä, joihin voit käyttää pikakirjoituksia, mutta yleisimpiä ovat:

  • Marginaali
  • täyte
  • kirjasinlaji
  • ääriviivat
  • reunus
  • Tausta
  • List-style

pikakirja-asetuksetVoit yhdistää arvoja myös lyhenteellä. Määrittämällä eri arvot selain käyttää olennaisesti määriteltyä tapaa tulkita sääntöjä.

Kaikkien lyhennysten avulla tee kokonaiskoodistasi paljon ytimekkäämpi. Tallennat sekä merkkejä että rivejä.

Jos käytät lyhenteitä kaikilla mahdollisilla alueilla, tämä voi pienentää dramaattisesti tiedoston kokoa.

2. Päästä eroon hakkereista

eli css-sääntöPalvellaksesi IE-erityisiä CSS-sääntöjä, ehdollisten CSS-hakkeroiden käyttäminen tarjoaa sinulle edun, kun tarjoat pienemmän ja puhtaamman CSS-oletustiedoston..

Se auttaa selaimissa, jotka ovat standardien mukaisempia. Lisäsivun painon lataavat kuitenkin vain selaimet, jotka sitä vaativat.

Jos sinun on käytettävä hakkerointia, on ehdottomasti välttämätöntä, että käyttämäsi koodi on erityinen Internet Explorer -versiossa, johon olet keskittynyt.

On olemassa useita ennalta kirjoitettuja koodeja, jotka toimivat hakkereina, jos et halua kirjoittaa omia. Ota vain aikaa tarkastellaksesi ennalta kirjoitettua koodia ja varmista, että se on oikein tai muuten tämä voi johtaa vielä enemmän ongelmiin.

Nyt, jos voit saada CSS: n avulla haluamiasi tuloksia, tee tämä ilman mitään hakkerointia. Tämä riippuu tietysti kaikkien muiden asioiden tasa-arvosta. Kokokoodisi on paljon kevyempi ja yksinkertaisempi, kun käytät vähemmän hakkereita sivustossasi.

3. Ole fiksu käyttäessäsi tyhjää tilaa

CSS-koodillesi, välilyönti on välttämätöntä luettavuuden vuoksi.

Välilyönti sisältää elementtejä, kuten välilehtiä, välilyöntejä ja ylimääräisiä rivinvaihtoja. Jokainen välilyönti, jonka pystyt poistamaan, on samanlainen kuin merkin eliminointi.

poista tyhjät rivitPienemmän tiedoston vuoksi ei kuitenkaan suositella tyhjäksi tyhjää tilaa. Sinun on edelleen ylläpidettävä optimaalista luettavuutta verkkosivuillasi.

Välilyönti on tärkeä muotoilun kannalta, joten haluat löytää tasapainon. Jos kirjoitat isoina lohkoina tekstiä, välilyönnin poistamiseksi, Internetin lukijoiden lyhyt huomiokyky saa heidät napsauttamaan.

Yksi tapa tarjota sekä pienempi tiedostokoko että luettavuus on kopioida välilehdet ja laittaa vain yksi rivi kappaleiden väliin. Tämä tarjoaa riittävän välilyönnin luettavuuden kannalta, mutta poistaa myös osan siitä välilyönnistä, jota ei tarvita.

Nyt CSS-tiedostosi tuotantoversiosta voit poistaa välilyönnin. Se on edelleen läsnä työtiedostossasi.

Tämä on toinen tapa tehdä kompromisseja niin, että sinulla on sekä pienemmät tiedostot että luettavat muotoilut.

4. Kaatumien palautus ja kehykset

Kun käytät CSS-kehystä, on välttämätöntä tarkistaa asiakirjat.

Yhtä tärkeää on tarkastella kaikkia CSS-tiedostosi riviä. Joskus huomaat, että puitteissa on joitain sääntöjä, joita et halua nykyiseen projektiisi. Ne voidaan poistaa.

poistettu käyttämättömät css-säännöt

Saatat huomata, että voit saavuttaa esitystavat yksityiskohtaisemmin ja tiiviimmin …

Tätä ei ehkä käytetä tyypillisesti, mutta jos se toimii, se mahdollistaa puhtaammat puitteet. Kun tiedät niistä, tämä auttaa sinua myös välttämään sääntöjoukkojen tahatonta päällekkäisyyttä.

Samat tiedot koskevat myös nollauksia. Kun käytät nollauksia, ne auttavat neutraloimaan selaimen oletustyylin. Nyt, jos tunnet luomasi verkkosivuston, ei ole harvinaista löytää tiettyjä ilmoituksia, joiden tiedät, että et tarvitse.

Esimerkiksi yleisessä blogissa et todennäköisesti käytä niitä. Vain eroon kaikesta, mitä et tarvitse rakennettavalle sivustolle. Sinä pystyt varmista paremmin optimoitu työ, kun käytät sääntöjä nollauksesta tai kehyksestä.

Oletuksena olevassa tilassa niitä ei kuitenkaan pitäisi hyväksyä. Jotta CSS-tiedostosi olisivat luettavissa ja laihoja, katso jokaista ilmoitusta erikseen ja leikkaa tarpeettomat.

5. Tulevaisuuden todistava CSS

Css-syntaksi

Toinen hyödyllinen CSS-optimointivaihtoehto: erota suurin osa säännöistä asettelukohtaisista ilmoituksista.

Määritä asettelu omaan tiedostoonsa, jos se on mahdollista. Jos ei, ainakin oman osion antaminen voi olla hyödyllistä.

Viime kädessä paikannus ja kelluvat – jotka ovat nykyisiä CSS: ää käyttäviä menetelmiä – ei tarkoitettu käytettäväksi asetustyökaluina.

Jotkut menevät niin pitkälle, että sanovat, että nämä ovat todella samanlaisia ​​kuin ulkoasuhakat. Tällä hetkellä ei ole toteutettavissa olevaa vaihtoehtoa, ja toivon, että sovittujen asettelustandardien tapahtuessa he alkavat saada tukea selaimilta..

Kun tämä tuki tapahtuu, ei pitäisi olla kovin vaikeaa vaihtaa laatikkomallin ominaisuuksia, jotka on hakkeroitu asetteluihin tarkoitettujen kanssa..

Juuri nyt Paras valinta on käsitellä asetteluasi oikeilla ominaisuuksilla. Tämä tiivistää yleensä sivun painoa tehokkaammin kuin käyttämällä tällä hetkellä saatavana olevaa rajoitettua ominaisuusjoukkoa virheiden kompensoimiseksi.

6. Pidä aina päivitetyt työsi koskevat ohjeet

Työskenteletkö verkkosivustolla ryhmänä tai yksin, on välttämätöntä seurata kaikkea mitä olet tehnyt.

Esimerkiksi yksin voit unohtaa tekemäsi. Jokainen voi ryhmänä tehdä jotain, ja et ehkä tiedä sitä ennen kuin teet muutoksia, jotka voivat aiheuttaa ongelmia koodin eri osiin.

lisäämällä css-kommenttiKoodien kopiointi on valtava huolenaihe sekä joukkueille että yksittäisille suunnittelijoille, etenkin kun käytetään suosittuja verkkosivustojen rakentajia. Wix, Squarespace ja muut verkkosivustojen rakennusohjelmistot ovat tunnetaan kopioimalla koodi tai puuttuen siitä kokonaan tietokannasta.

Tyyliohjeoppaiden ja merkintäoppaiden käyttö ovat käyttökelpoisia dokumentointivaihtoehtoja. Voit käyttää myös CSS-kommentteja. Tämä on toinen vaihtoehto, ja siitä voi olla hyötyä jakamalla pitkät CSS-tiedostojen osat. Asettamalla nämä tyyli- tai merkintäoppaaseen estetään niitä lisäämästä tiedostokokoa.

Yksi nopeimmista tavoista koodin paisuttamiseen on tehdä sama työ kahdesti. Koodaus on monimutkaista, joten on välttämätöntä säilyttää tarkat asiakirjat kaikesta tekemästäsi.

Jos työskentelet yksin, on ihanteellista tarkistaa tämä dokumentaatio joka kerta, kun istut alas aloittaaksesi työskentelyn. Kun työskentelet osana ryhmää, varmista, että kaikki koodaavat samassa asiakirjassa noudattaa yhteisötyyliä tai merkintäopasta jotta koodausmuutokset ymmärtäisivät helposti kaikki ryhmän jäsenet.

7. Pakkaa tiedostoja (CSS Optimization 101)

css-pakkaus ja optimointi gif

Pakkaus: siinä on vähän enemmän kuin tämä …

Yksi tehokas tapa optimoida CSS on käyttämällä pakkausta. Tämä on tapa varmistaa, että tiedostosi ovat selainystävällisiä, vaikka ne eivät olisikaan luettavissa ihmisille.

Työkopioihin verrattuna nämä ovat murto-osan koosta. On olemassa erilaisia ​​sovelluksia, joita voit hyödyntää helpottaaksesi pakkausprosessia.

Ne suorittavat tehtäviä, kuten etsivät ja korjaavat CSS: n ominaisuudet, jotka korvataan toisillaan, tiivistävät valkoisen tilan ja etsivät mahdollisuuksia käyttää CSS: n lyhennettä.

Näiden sovellusten mukavuuden lisäksi ne voivat myös auttaa sinua oppimaan lisää tehtävistä, jotka voit tehdä käsin, jos haluat. Voit myös käyttää erilaisia ​​tekstieditoria CSS-tiedostojen muotoiluun.

He voivat palvella zip-versioita kaikista CSS-tiedostoistasi. Tämä tehdään tyypillisesti PHP: llä. Jos haluat käyttää työkalujen optimointia ja pakkaamista, muista tarkistaa useita vaihtoehtoja, ennen kuin valitset sinulle sopivan.

Nyt nämä sovellukset ovat yleensä hyviä minimoimaan virheitä, mutta ne eivät ole täydellisiä. Tästä syystä sinun on aina tarkistettava CSS: nsi sovelluksen käytön jälkeen tarkkuuden varmistamiseksi. Optimoitu ja puhdas koodi on kriittinen tiedoston koon, mutta myös luettavuuden ja ylläpidon kannalta.

Sinun vuorosi

Tässä käsitellyt periaatteet ovat vankat näkökohdat CSS: lle, mutta myös JavaScriptille, HTML: lle ja muille ohjelmointikieleille. Verrattuna verkkosivustosi renderointiin, CSS-tiedostot eivät ole yhtä näkyviä loppukäyttäjälle.

Tässä käsitellyt periaatteet auttavat kuitenkin sekä kehityskokemusta että käyttökokemusta.

Useimmat hyvät web-hosting-yritykset auttavat sinua CSS: n optimoinnissa. Nopeammat verkkosivustot tekevät sinusta onnellisen asiakkaan, mutta myös pienemmät tiedostot kuormittavat vähemmän palvelimia.

Olemme testanneet jokaista kanadalaista web-isäntää ja suosittelemme SiteGroundia. Ne eivät vain auta optimoimaan CSS-toimitusta, vaan heidän tekninen tuki on vertaansa vailla.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map