Hei, rakkaat lukijat blogisivusto. Tämä on pieni muistiinpano "muistoksi" -sarjasta. Syntyi ajatus poistaa ylimääräiset rivit tyylitiedostosta. Blogin seitsemän vuoden aikana monet asiat ovat muuttuneet, mutta STYLE.CSS-tiedoston rivit ovat säilyneet (varmuuden vuoksi tai unohdin vain poistaa ne). Nyt minusta tuntui, että se alkoi painaa liikaa, ja siksi syntyi idea puhdistaa se.

Tämän tekeminen manuaalisesti on melko vaikeaa, eikä se ole välttämätöntä. On olemassa tapoja tämä prosessi automatisoida. Jotkut niistä eivät toimineet minulle, joistakin piti maksaa ja pidin sitä tarpeettomana. Lopulta käytin puoliautomaattista menetelmää, josta kirjoitan seuraavissa kappaleissa. Tulevaisuudessa sanon, että onnistuimme pienentämään CSS-tiedoston kokoa lähes puoleen, mikä jopa yllätti minut hieman.

Vaihtoehdot verkkosivustolle tarpeettoman CSS-tyylien löytämiseen

Tyylitiedoston (sen sisällön - poistin vanhan ja lisäsin uuden, minkä jälkeen tallensin muutokset Filezillan kautta) korvaaminen uudella (vaurioituneella) ei aiheuttanut näkyviä muutoksia sivustolle (ei ainakaan vielä , ei paljastettu). Kaiken kaikkiaan olen erittäin tyytyväinen ja suosittelen kokeilemaan. Nopea, yksinkertainen ja kätevä (ja myös ilmainen).

Onnea sinulle! Nähdään pian blogisivuston sivuilla

Voit katsoa lisää videoita siirtymällä osoitteeseen

");">

Saatat olla kiinnostunut

Kuinka maksimoida verkkosivuston latausnopeus ja optimoida palvelimen kuormitus
CSS - mikä se on, kuten taulukot peräkkäiset tyylit muodosta yhteys HTML-koodiin tyylin ja linkin avulla
Optimointi ja CSS-pakkaus Sivun nopeudessa - kuinka poistaa käytöstä ulkoisia tiedostoja tyylit ja yhdistä ne yhdeksi latauksen nopeuttamiseksi Kuinka asettaa kierto taustaväri taulukkorivejä, luetteloita ja muita HTML-elementtejä verkkosivuilla käyttämällä n:nnen lapsen pseudoluokkaa
Mihin CSS on tarkoitettu, miten CSS-tyylisivut yhdistetään HTML-dokumentti ja tämän kielen perussyntaksi
Luettelon tyyli (tyyppi, kuva, sijainti) - CSS-säännöt määrittääksesi ulkonäkö listat sisään HTML-koodi
Kuinka saada nopea verkkosivusto - kuvien ja komentosarjojen optimointi (pakkaus) sekä Http-pyyntöjen määrän vähentäminen

Puhtaan ja organisoidun CSS:n edut ovat ilmeisiä. Verkkosivusto, jossa on moitteeton CSS, latautuu nopeammin ja näkyy paremmin hakutuloksissa. Verkkokehittäjille puhdas koodi CSS toimii selkeänä todisteena ammattimaisuudesta tuleville asiakkaille.

CSS-merkintäjätteen puhdistaminen lukemattomien suunnitteluiteraatioiden ja muutosten avulla voi kuitenkin olla vaivalloinen ja aikaa vievä prosessi, joka tehdään käsin. Onneksi on joitain ihania ja hyödyllisiä työkaluja, joka auttaa sinua automatisoimaan jotkin CSS:n tärkeimmistä näkökohdista. Tällä sivulla on linkkejä CSS-puhdistustyökaluihin, jotka olen itse tarkistanut CSS-merkintä kaikissa alla olevissa työkaluissa, suosittelen sinua tekemään samoin.

CSS Cleanup Tools

ProCSSor parantaaksesi CSS:ääsi

ProCSSor on yksinkertainen, mutkaton työkalu CSS:n parantamiseen välittömästi. OS X:n, iOS:n tai minkä tahansa selaimen kautta saatavilla oleva työkalu ottaa CSS-tiedoston, liitetyn katkelman tai URL-osoitteen ja korjaa ja näyttää CSS:n tulevan koodin välittömästi.

CSS Lint

Työkalu CSS-tarkistukset muutosten selityksellä

CSS Lint tarjoaa suosituksia, toisin kuin muut CSS-puhdistustyökalut. Useimmat eivät edes puhu CSS-muutoksista, mutta CSS Lint antaa lyhyen selityksen jokaiselle suositeltavalle muutokselle. Siinä on useita ominaisuuksia, jotka keskittyvät virheisiin, yhteensopivuuteen, suorituskykyyn, päällekkäisyyden poistamiseen ja käytettävyyteen, jotka voidaan ottaa käyttöön tai poistaa käytöstä.

Likainen merkintä

Dirty Markup -työkalu yhdistää useita eri tekniikoita

Dirty Markupilla on ainutlaatuinen lähestymistapa koodin optimointiin; se toimii, kun kenttä on täytetty koodilla ja yhdistää useita eri tekniikoita HTML Tidy, JavaScript, Ace Editor ja tekee kattava siivous koodi. Se toimii aivan kuten CSS, aivan kuten JavaScript tai tavallinen HTML.

CleanCSS

CleanCSS-työkalu suorittaa CSS-optimoinnin

CleanCSS toimii URL-osoitteen tai lisätyn koodinpalan kanssa ja tarjoaa erilaisia ​​CSS-optimointisuorituksia. Voit valita viidestä erilaisia ​​asetuksia pakkaukset, jotka tarjoavat kompromisseja luettavuuden ja tiedostokoon välillä.

Code Beautifier

Code Beautifier yksinkertainen css puhdistustyökalu

Code Beautifier yksinkertainen CSS-siivoustyökalu ilman tarpeettomia ominaisuuksia. Se käsittelee koodia URL-osoitteen tai koodin lisäyksen mukaan ja puhdistaa ne perusteellisesti useiden käytännön vaihtoehtojen perusteella. Jos tarvitset nopean CSS-siivouksen eksymättä koodinpuhdistusvaihtoehtojen mereen, tämä voi olla sinun täydellinen css puhdistustyökalu.

Spritemapper

Spritemapper luo spritejä, yhdistää useita kuvia CSS-tyylisivuksi

Mikään muu työkalu ei maininnut optimoituja kuvia, mikä on yhtä hyödyllistä kuin itse koodin optimointi. Spritemapper luo spritejä, yhdistää useita kuvia CSS-tyylisivuksi oikealla sijoittelulla. Tuloksena on nopeampi sivusto, pienempi määrä HTTP-pyynnöt, ja virtaviivaisempi CSS-tyyli.

Pintamaali

Pintamaali ei ole perinteinen soitin CSS-siivous

Topcoat ei ole perinteinen CSS-puhdistustyökalu; se on pohjimmiltaan CSS-kehityspaketti, puhdas CSS-kuraattorilähestymistapa. Jos sinulla on hyvin kirjoitettu CSS, sinun ei todennäköisesti koskaan tarvitse puhdistaa CSS-koodia.

CSSTidy-työkalu toimii Windowsissa, Macissa tai Linux-alustoille.

CSSTidy on samanlainen kuin monet CSS-siivoustyökalut, mutta tämä tarjoaa joitain ainutlaatuisia ominaisuuksia. CSSTidy voidaan kutsua käyttämällä komentorivi tai PHP, ja se toimii Windows-, Mac- tai Linux-alustoilla. CSSTidy-puhdistustyökalu sopii täydellisesti olemassa olevaan työnkulkuusi ja säästää CSS puhdas offline-tilassa. W3C Valdiator CSS-koodin vahvistustyökalu

W3C Valdiator ei tarjoa koodin puhdistus-, pakkaus- tai optimointityökaluja, mutta se kannattaa ehdottomasti harkita tapauksissa, joissa CSS-koodi on todella rikki. Yllä olevilla työkaluilla on omat työkalunsa, tämän on valmistanut W3C Consortium, joka luo standardeja.

Olet juuri liittynyt olemassa olevaan projektiin korvataksesi lähtevän kehittäjän. Tai ehkä he vain ottivat vanhan projektinsa käyttöön muutaman vuoden kuluttua. Tunnet kauhua ja inhoa, kun katsot koodia. Voit tehdä vain yhden asian: siivota koko sotkun. Oletko törmännyt vastaavaan aiemmin? Melkein varmasti, ennemmin tai myöhemmin jokainen kokee tämän.

Tiedät, että CSS-koodin puhdistaminen on suuri tehtävä. Siinä on paljon tehtävää rajoitettu aika- varsinkin kun asiakkaat/pomot/kollegat kehottavat itsepintaisesti olemaan koskematta siihen, mikä toimii. Et edes tiedä mistä aloittaa.

Nukkaaminen on meille kaikki kaikessa

Tässä osiossa oletan, että käytät Sassia. Ei vain siksi, että tämä on järkevä oletus nykyisissä olosuhteissa, vaan myös siksi väärinkäyttö Sass on usein koodikannan saastumisen syy. Vaikka tämä artikkeli on hyödyllinen niille, jotka eivät käytä esiprosessoreita, sinun tulee lukea se loppuun.

Ensimmäinen asia, jonka olen tottunut tekemään, kun minun on ymmärrettävä koodipohja, on nukkaaminen. Linting on prosessi, jossa ohjelma suoritetaan mahdollisten virheiden ja huonojen käytäntöjen etsimiseksi. Uskon, että tekemällä koodin puhtaaksi otamme ensimmäisen askeleen kohti hyvä koodi. Sanan linting etymologia löytyy tästä StackOverflow-ketjusta.

Sassilla on rubiinilla kirjoitettu linteri nimeltä SCSS-lint. Voit määrittää sen itse tai ladata Sass-Guidelinesin suositteleman kokoonpanon aloittaaksesi heti. Myös Node.js:ssä on sass-lint, ne eivät ole 100 % yhteensopivia ja voivat toimia eri tavalla.

Kokeile suorittaa SCSS-Lint Sass-tiedostohakemistossasi tarkistaaksesi virheet. Todennäköisyys on erittäin suuri, että sinulle osuu suuri määrä virheitä. Yleensä tämän jälkeen haluat lopettaa koodinpuhdistuksen kokeilemisen. Ole kärsivällinen. Tässä vaiheessa voit yrittää tehdä asetuksista vähemmän rajoittavia sääntöjä, jotka eivät ole sinulle kovin tärkeitä (kuten värimuoto) tai tarttua härkää sarvista ja käyttää nukkaamisen täyttä voimaa.

Löytyneiden virheiden korjaaminen

On aika korjata se, mikä pitää korjata. Tämä voidaan tehdä kahdella tavalla. Ensimmäinen on tarkistaa kaikki tiedostot yksitellen ja korjata kaikki virheet ja puutteet, kuten epäonnistunut muuttujien nimeäminen, valitsimien liiallinen sisäkkäisyys ja huonosti muotoiltu koodi. Toinen (mieluuteni) on käyttää hakua ja korvaamista. En tiedä sinusta, mutta rakastan sitä säännöllisiä lausekkeita ja käytän niitä aina mielelläni työssäni.

Oletetaan, että haluat lisätä puuttuvan nollan kaikkiin liukulukuihin (eli 0:sta 1:een), tämäntyyppiset virheet havaitaan käyttämällä LeadingZero-sääntöä SCSS-lintissä. Käytä tätä varten säännöllistä lauseketta \s+\.(\d+) hakuun (kaikki numerot, jotka seuraavat välilyöntiä pisteellä) ja korvaamaan \0.$1 (välilyönti, nolla, piste ja löydetty numero). Ja jos olet huolissasi BorderZero-linterisäännöstä, voit korvata kaikki border: none säännöt reunuksella: 0 editorissasi käyttämällä hakua/korvaa. Se ei voisi olla helpompaa!

Loin äskettäin GitHubissa scss-lint-regex-arkiston kerätäkseni kaikki säännölliset lausekkeet linkkiä varten yhteen paikkaan. Tutustu ehdottomasti siihen, jos sinulla on ongelmia nukkaamisen kanssa suuressa projektissa. Ja ole varovainen haun/korvaamisen kanssa, joskus se johtaa odottamattomiin sivuvaikutuksia. Suorita jokaisen muutoksen jälkeen git diff tunnistaaksesi, mikä on muuttunut. Tämä varmistaa, että et lisää virheitä koodiisi.

Kun etsi/korvaa muokkaus on valmis, et voi paeta manuaalinen editointi, niissä paikoissa, joita on hiottava (virheelliset sisennykset, puute tai ylimäärä tyhjiä rivejä, puuttuvat välilyönnit jne.). Tämä vie paljon aikaa, mutta auttaa sinua paljon seuraavassa vaiheessa, joten on tärkeää tehdä tämä ennen kuin jatkat.

Kääntäjän huomautus

Jotkut näistä asioista voidaan tehdä käyttämällä SassBeautifyn laajennuksia tekstieditorit, esimerkiksi ylevä tai atomi .

Hankkeen rakenteen tarkastelu

Se, mikä minua todella häiritsee paljon, kun liityn olemassa olevaan projektiin, on oikean projektiarkkitehtuurin puute. Ehkä työn alussa oli jonkinlainen projekti, mutta ajan myötä asiat karkaavat käsistä ja alkuperäinen suunnitelma katoaa. Mutta se on silti uskomattoman tärkeää.

Projektimenetelmän valinta ei ole niin tärkeä, tärkeintä on, että sinulla on se, eikä se aiheuta sinulle epämukavuutta. Se voi olla SMACSS, 7-1 tai ITCSS - valinta on sinun. Yritä järjestää koodisi uudelleen valitsemasi menetelmän mukaan. Käytän yleensä Sass Guidelinesissa kehittämäämme 7-1-mallia, joten annan sinulle vinkkejä, jotka auttavat, jos valitset tämän reitin.

Siirrytään sitten abstraktien hakemistoon. Kaikki muuttujat, mixins, funktiot ja paikkamerkit pitäisi mennä tänne. Voit vapaasti järjestää ne haluamallasi tavalla, kunnes ymmärrät kaikki koodikantasi muuttujat ja sekoitukset. Tunnistan myös valinnaisia ​​muuttujia (ja mixinejä) tässä vaiheessa, koska kohtaan usein muuttujia, joita käytetään kerran tai kahdesti.

Kun olet selvittänyt tämän, sinun on päätettävä, kumpi seuraavista kahdesta vaiheesta teet ensin. Voit yrittää varmistaa, että kaikki perushakemiston sisältö on todella perustyylejä eikä komponenttityylejä. Tai tarkista, että asetteluhakemisto sisältää kaiken, mikä liittyy sivun asetteluun, ja että tämä koodi on dokumentoitu oikein.

Lopuksi, viimeistelläksesi asiat, sinun on rakennettava komponenttien hakemisto, mikä on yleensä valtava tehtävä. Suosittelen valmistamaan komponentteja mahdollisimman paljon pienempi koko ja keskittyä niiden toistuvaan käyttöön. Ei ole väliä, jos lisäät niiden määrää - kunhan ne ovat kontekstittomia ja helppolukuisia, ymmärrettäviä ja päivitettäviä.

Esimerkkinä oikeasta ja pienestä komponentista voin antaa seuraavan:

Lainaus ( täyttö: 10px; ) .quote__attribution ( font-size: 80%; ) .quote > :first-child ( margin-top: 0; ) .quote > :last-child ( margin-ala: 0; )

Yritä ajatella moduuleissa. Vähemmän. Helpompi. Itsenäisempi.

Tarpeettoman poistaminen

Uskon, että suurin ero huonon ja hyvä CSS tämä on koodin määrä. CSS on erittäin helppo kasvattaa. Jotkut ihmiset voivat tehdä melkein jokaisen asettelun yrityksen ja erehdyksen avulla. Kyky tehdä mitä tahansa minimaalisella CSS:llä vaatii työtä, ja minimalistisen lähestymistavan ylläpitäminen on todellinen haaste.

Siitä on jo 3 vuotta, mutta tämä twiitti Nicholas Gallagherilta on edelleen suosikki CSS-kysymykseni:

Vanheneminen on CSS:n todellinen rutto. Kun kirjoitamme tyylejä, menemme usein edestakaisin ja kokeilemme uusia sääntöjä - yleensä päädymme muutamaan täysin tarpeettomaan ilmoitukseen. Esimerkiksi ylivuoto: piilotettu , joka ei ole enää välttämätön, tai font-size , joka ei muuta kirjasinkokoa. Jättämällä ne lisäämme teknistä velkaa. Tässä ei ole mitään hyvää.

CSS:ää kirjoittaessani olen tottunut avaamaan kehittäjätyökalut selaimessa ja poistamaan jokaisen CSS-ilmoituksen yksitellen pois päältä ennen lähettämistä. valmis koodi tarkistaa, mihin ne vaikuttavat. Jos ne eivät vaikuta mihinkään, kysyn ensin itseltäni: "Miksi he ovat täällä?" Jos ne osoittautuvat hyödyttömiksi, poistan ne. Tällä yksinkertaisella tekniikalla voin varmistaa, että arkistoon lähetetään vain hyödyllistä koodia eikä roskaa.

CSS-koodikannan puhdistaminen on sama tekniikka. Tunnista komponentti, jonka haluat puhdistaa, avaa kehittäjätyökalut ja yritä löytää hyödyttömiä ilmoituksia. Joskus CSS-koodin poistamiseksi meidän on siirrettävä nämä tyylit puussa, jotta voimme hyödyntää kaskadiominaisuuksia. Tarkastellaan tätä seuraavalla yksinkertaisella esimerkillä:

Vanhempi ( /* ...juttuja täällä... */ ) .lapsi-A ( väri: punainen; ) .lapsi-B ( väri: punainen; )

Ilmeisellä tavalla Optimointi on siirtää väri: punainen -ilmoitus ylävalitsimeen, ja sitten kaskadi hoitaa loput puolestamme. Varmasti, todellisia esimerkkejä ovat yleensä monimutkaisempia, mutta tämä esimerkki osoittaa myös, että sinun ei pidä unohtaa "C":n mahdollisuuksia lyhenteessä CSS.

CSS on älykäs ja sinun pitäisi olla yhtä älykäs

On myös hyvin yleistä, että inherit, origin ja currentcolor merkityksiä ei ymmärretä. Oletetaan, että haluat linkkien olevan samaa väriä kuin pääteksti (ne ovat jo tarpeeksi alleviivattuja). Näin et tee sitä:

A ( väri: musta; /* Ei */ )

Syy tähän ratkaisuun epäonnistuu on ilmeinen: jos muutat rungon väriä, linkin väri ei ole synkronoitu sen kanssa. Jos ajattelet muuttujan käyttöä, se vain tekee asioista tarpeettoman monimutkaista. Ja lopuksi, jos linkki on sijoitettu elementin sisään oma tyyli(esimerkiksi lainauksessa), se ei vastaa väriään.

CSS:ssä on sisäänrakennettu tapa ratkaista tämä ongelma, periytyvä arvo:

A ( väri: inherit; /* Jep! */ )

Samoin, kun omaisuutta palautetaan oletusarvoonsa, on huono idea asettaa arvo kiinteäksi. CSS:ssä tällaisille tapauksille on alkuarvo. Yleensä se ei eroa kiinteiden arvojen asettamisesta, mutta on tapauksia, joissa sillä on todella merkitystä, esimerkiksi määritettäessä tekstin suuntaa text-align-ominaisuus. Kun nollaat tekstin tasauksen, vasemmalla oleva arvo voi korruptoida tekstiä RTL-kielissä (oikealta vasemmalle), tulos on alkuperäinen (mitä parempi on aloitus, mutta tätä arvoa ei tueta IE9:ssä)/.

Viimeinen listalla, mutta ei vähiten tärkeä arvo on currentcolor , monet kehittäjät eivät tiedä siitä. Jos olet yksi heistä, älä huoli, vaan kysy itseltäsi: "Jos et asettanut elementtien reunaväriä, miksi se vastaa automaattisesti elementin fontin väriä?" Kyllä, näin tapahtuu, koska oletusarvoisesti border-color-ominaisuuden arvo on currentcolor (spesifikaatio). Samaa mieltä, kaikki on selvää nimestä.

Mielestäni jos haluat käyttää elementin fonttiväriä, sinun tulee käyttää currentcoloria kiinteän arvon tai Sass-muuttujan sijaan.

Elementti ( väri: syvän vaaleanpunainen; reuna: 1px kiinteä; /* Väri on implisiittinen sanalla "currentcolor" */ ) .element svg ( täyttö: currentcolor; /* Täyttöväri on sama kuin tekstissä */ )

Nämä ovat kaikki perusasioita CSS-ominaisuudet. He tekevät CSS:stä sellaisen kuin se on. Ja näitä mahdollisuuksia käytetään yllättävän harvoin. Siksi, jos päätät parantaa komponenttikoodia, sinun ei pitäisi laiminlyödä niitä.

Gitin pitäisi olla kunnossa

CSS-koodikannan refaktorointi on paljon työtä. Sinun on päivitettävä kymmeniä tiedostoja. Ja on todennäköistä, että rikot jotain tässä prosessissa. Olkaamme rehellisiä - kaikki tekevät virheitä ja olisi uskomattoman siistiä, jos onnistuisit suorittamaan tällaisen työn ilman pientä virhettä.

Siksi suosittelen, että työskentelet ahkerasti versionhallintajärjestelmäsi kanssa (on loogista olettaa, että Git toimii tässä roolissa). Tämä tarkoittaa, että kaikki sitoumukset tekevät yhden asian - varmista, että palaat askeleen taaksepäin virheen sisältävästä koodista kärsimättä konflikteista.

Tiedän, että monet ihmiset pitävät Gitiä monimutkaisena ja vaikeasti ymmärrettävänä, ja tavat oppia se helposti eivät kuulu tämän artikkelin piiriin. Luota minuun: Git-historiasi pitäisi olla kuin runo, jos et halua aivosi kiehuvan.

Johtopäätös

Joten muotoilen lyhyesti artikkelin pääkohdat niille, jotka ovat liian laiskoja lukemaan koko tekstiä:

CSS/Sass-projektin puhdistaminen on vaikeaa, koska muutoksen tai poistamisen koko vaikutusta on vaikea arvioida välittömästi. CSS-merkkijonot. Tämä kaikki johtuu pääasiassa CSS:n huonosta testattavuudesta. Siksi sinun on oltava varovainen.

Aloita nukkaamalla, niin koodistasi tulee kauniimpi. Tee tämä, koska se helpottaa elämääsi tulevaisuudessa. Tämä on myös hyvä tapa yleiskatsauksen koodisi tilasta ilman suurta riskiä (syntaktisen lian korjaamisen ei pitäisi aiheuttaa ongelmia).

Rakenna sitten projektisi valitsemasi menetelmän mukaan. Riippumatta siitä, minkä valitset, on tärkeää, että noudatat sitä. Jos projektissasi ei ole liikaa komponentteja, strukturointi on hyvä alku. Etsi käyttöliittymän uudelleenkäytettäviä osia ja siirrä niiden tyylit erillisiin tiedostoihin. Voit vapaasti kirjoittaa dokumentteja tällä tavalla prosessi menee helpompaa ja tunnet meneväsi eteenpäin.

Kun olet puhdistanut projektisi ja lajitellut kaikki komponentit, on aika parantaa CSS:ää. Tarkista ensin, mitä voit poistaa, koska kirjoitamme aina liikaa koodia. Yritä sitten optimoida se niin, että se toistuu vähemmän. Älä liioittele sitä! Sinun tehtäväsi on vähentää monimutkaisuutta, ei lisätä sitä. Älä unohda kommentoida mitään, mikä ei ole ilmeistä ensi silmäyksellä.

Ja lopuksi, sitoumustesi tulee olla säännöllisiä ja loogisia. Yhdistä muutokset pieniksi sitoumuksiksi, joista jokainen tekee yhden yksinkertainen asia- Tämä helpottaa muutosten peruuttamista, jos teet jotain väärin.

Viimeisenä mutta ei vähäisimpänä, älä unohda juhlia, kun kaikki on ohi. Onnea!

4/5

Monet kehittäjät kohtaavat sen tosiasian, että jonkin projektin työskentelyn jälkeen tiedostot CSS ilmaantuu tyylejä, joista on mahdotonta sanoa varmasti, käytetäänkö niitä vai ei. Näin tapahtuu usein, kun työskentelet ryhmässä ja useampi kuin yksi henkilö työskentelee tyylien parissa. Tai esimerkiksi ennen sinua oli useita kehittäjiä, ja päätit muuttaa jotain tai suunnittelija suunnitteli pienen uudelleensuunnittelun. Yleensä vaihtoehtoja on monia, mutta tulos on sama - selaimelle annetaan "kuollut" valitsimet.

Kaikki olisi hyvin, jos niitä on vain yksi tai kaksi, mutta jos tiedostossasi on viisi tai kuusi tuhatta riviä, siitä ei ole epäilystäkään - kaikkia valitsimia ei käytetä, mikä tarkoittaa, että poistamalla tarpeettomat voit keventää tiedostot ja nopeuttaa sivujen lataamista. Tänään katsomme erilaisia ​​ohjelmia, laajennuksia ja palveluita CSS-tiedostojen puhdistamiseen tarpeettomista tyyleistä.

Firefox-laajennukset

Ottaa huomioon tyylit, jotka sisältyvät sivun kautta , @import and. Se voi analysoida sekä yhden sivun että koko sivuston. Lopussa saat luettelon valitsimista, joita ei käytetä sivustolla.

Tämä on FireBug-laajennus, jonka avulla voit löytää käyttämättömiä valitsimia, kuten on erillinen sivu, ja koko sivustolla. Tämän seurauksena saat luettelon kaikista valitsimistasi, joista punaisella merkityt jäävät käyttämättä.

Verkkopalvelut

Online-työkalu tarkistaaksesi mitkä valitsijat tämä tiedosto ei käytetty tietyt sivut sivusto. Huono puoli on, että et voi arvioida koko sivustoa (tai pikemminkin se on mahdollista, mutta se on aikaa vievää ja hankalaa).

Työpöydän editorit

Luettelo koodieditoreista, jotka jotenkin osaavat löytää käyttämättömiä CSS-tyylejä.

TopStyle (voitto)

Tästä löytyy myös valitsimia, joita käytetään sivuilla, mutta joista ei ole kuvausta CSS-tiedostoissa.

IntelliJ IDEA (Win, Mac, Linux)

Monikäyttöinen editori, joka on suunniteltu ensisijaisesti Java-työskentelyyn.

Johtopäätös

Näistä onnistunein työkalu on mielestäni Dust Me. Koko sivuston analysointi kestää alle minuutin, minkä jälkeen sinun tarvitsee vain löytää ja poistaa määritetyt valitsimet.

Muuten, jos joku teistä käyttää editoria tai palvelua, jota ei ole tässä luettelossa, kirjoita kommentteihin, lisään sen. Kiitos kaikille huomiosta ;-)

Luotu sivusto laajenee jatkuvasti, ja jonain päivänä ymmärrät, kuinka vaikeaa sen CSS:n ymmärtäminen on.

Jos olet jo törmännyt samanlainen ongelma, on aika tarkastaa CSS-koodisi ja optimoida se. Olemme valinneet 15 työkalua, joiden avulla voit tehdä juuri sen. Jotkut niistä auttavat pienentämään CSS-tiedoston kokoa, toiset parantavat sivun suorituskykyä.

1. Type-o-Matic

Type-o-matic on Firebug-laajennus, joka voi analysoida verkkosivuilla käytettyjä fontteja. Tämä liitännäinen näyttää raportin taulukon muodossa, jossa on tietoa käytettyjen fonttien ominaisuuksista ( perhe, koko, väri ja paljon muuta).

Vaikka raportti on esitetty v taulukkomuotoinen, voit muokata tätä luetteloa helposti yhdistämällä tai poistamalla tyyliltään samankaltaisia ​​kirjasimia.

2.CSSCSS

Työkalu analysoi CSS-tiedostosi kaksoiskappaleiden varalta. Tämä vähentää CSS-koko ja on paljon mukavampaa työskennellä heidän kanssaan tulevaisuudessa. Työkalu on erittäin helppo asentaa - se toteutetaan Rubyn laajennuspaketina ja käynnistetään komentoriviltä.

3. CSS Lint

Tämä työkalu auttaa sinua tunnistamaan ongelmat CSS-koodissasi. Työkalu tarkistaa tyylien perussyntaksin ja soveltaa myös sääntöjä epäilyttävään koodiin. Kaikki säännöt ovat kytkettävissä, joten voit helposti muuttaa niitä.

4. CSS Colorguard

Usein törmäät asiakkaisiin, jotka haluavat käyttää värejä, joita et edes tiennyt olevan olemassa. CSS Colorguard auttaa sinua luomaan tarvittavat värimaailmat, ja varoittaa, jos käytät kahta identtistä väriä.

5. CSS Dig

CSS Dig on Pythonilla kirjoitettu skripti, joka toimii paikallisesti ja jonka avulla voit analysoida ominaisuuksia ja CSS-arvot lähes millä tahansa sivustolla riippumatta siitä, missä tyylit sijaitsevat erillinen tiedosto tai sivun koodissa. Työkalu auttaa myös muokkaamaan, standardoimaan ja optimoimaan CSS-koodiasi.

6. Dust Me

Dust-Me on Firefoxin ja Operan laajennus, joka poistaa käyttämättömät valitsimet tyylitaulukosta. Työkalu ottaa kaiken sivustosi CSS:n ja näyttää, mitä valitsimia käytetään ja mitkä ovat tarpeettomia.

7. Devilo.us

Devilo.us on edistynyt CSS-koodin pakkaamiseen ja optimointiin tarkoitettu moottori, joka tukee nyt CSS3:a.

8. PurifyCSS

Työkalu auttaa pääsemään eroon käyttämätön CSS-tyylit verkkosivuilla tai verkkosovelluksissa. Se pystyy tunnistamaan jopa dynaamisesti ladatut CSS-valitsimet javascript-koodissa ja pakkaamaan merkittävästi tyylitiedostojen kokoa.

9. Atomic CSS

Atomic CSS auttaa sinua pienentämään CSS-tiedostojasi. Sen avulla voit optimoida sivun latausnopeutta, poistaa riippuvuudet ja tekee myös paljon muuta.

10. Puhdista CSS

CleanCSS on monitoiminen CSS-optimoija. Työkalu ottaa CSS-koodisi ja tekee siitä puhtaamman ja pienemmän. Voit optimoida sisäänkirjoitetun koodin eri kieliä: javascript, json, python, html jne.

11. PubCSS

Työkalun avulla on helppo muotoilla CSS-koodia akateemisten julkaisujen sivuille. Tämä on CSS-tyylien kirjasto asiakirjojen muotoilua varten tulostamista ja Internetissä julkaisemista varten.

12.CSSO

CSSO (CSS Optimizer) on työkalu, joka suorittaa CSS-tiedostojesi rakenteellisen optimoinnin.

13. Helium

Helium on työkalu käyttämättömien CSS-ominaisuuksien tunnistamiseen verkkosivuston kaikilla sivuilla. Se on JavaScript-pohjainen ja toimii suoraan selaimessa. Helium ottaa luettelon sivustoosioiden URL-osoitteista ja jäsentää sitten jokaisen sivun luodakseen luettelon kaikista tyyleistä. Sitten se tunnistaa käyttämättömät CSS-ominaisuudet.

14. Strip-kommentit

CSS-kommenttien poistaminen yksinkertaistaa huomattavasti seuraavia tehtäviä: kommenttien poistaminen CSS-tiedostoista, tiedostokoon pienentäminen. Se on saatavana myös lisäosana gulp/grunt/parsakaalille.

15. CSS kutistuu

Työkalun avulla voit helposti optimoida CSS-tiedostoja säilyttäen samalla merkintöjen johdonmukaisuuden ja muodon. Siinä on useita työkaluja, joiden avulla voit poistaa välilyöntejä ja kommentteja asiakirjasta.

Onko sinulla mielessäsi muita hyödyllisiä CSS-työkaluja? Ole hyvä ja jaa ne kommenteissa!

Artikkelin käännös " 15 CSS-työkalua CSS-koodin tarkastamiseen ja optimointiin” valmisteli ystävällinen projektitiimi