10 millors eines per formatar i optimitzar fitxers CSS

El format i l’optimització d’arxius CSS ja no són un mal de cap per als desenvolupadors web amb l’ajut d’aquestes eines escollides a mà!


Des dels seus inicis, els fulls d’estil en cascada (CSS) han estat àmpliament utilitzats per perfilar les visuals de les pàgines web. Inclouen la definició de colors, dissenys, animació i tipus de lletra. Al ser independent de l’HTML, CSS us permet adaptar fàcilment una presentació de pàgines web a diferents tipus de dispositius amb diferents mides de pantalla sense haver de canviar una mica del contingut de la pàgina..

El CSS s’anomena full d’estil en cascada a causa de la manera d’aplicar els valors de propietat a la jerarquia de contingut. Els elements secundaris poden heretar o substituir els valors de la propietat dels elements progenitors. Aquestes capacitats es proporcionen mitjançant un model basat en un àmbit d’efecte jeràrquic. El problema d’aquest model és que, si no s’utilitza correctament, pot afectar greument el rendiment d’un lloc web.

I a ningú li agrada un lloc web lent. És per això que van sorgir l’optimització CSS, juntament amb una nova varietat d’eines dissenyades explícitament perquè els fitxers CSS siguin el més nets i ràpids possibles.

L’optimització CSS ​​es pot fer de moltes maneres: els fitxers CSS es poden reduir de mida, es poden netejar, es poden provar o validar la correcció, es poden ordenar, es poden formatar per entendre el seu codi i, en general, és millor. adaptat per permetre una millor experiència de l’usuari. Vam fer una selecció de les millors eines per a cadascuna d’aquestes tasques.

# Eines d’afinació CSS

CSS Minify

CSS Minify és una eina senzilla per minimitzar el CSS: el procés per agafar el CSS embellit, llegible i ben format i suprimir tota la seva separació, sagnat, novetats i comentaris. El CSS minificat resultant es pot utilitzar correctament sense aquests elements. A més, minvar fa més fàcil de llegir el CSS, descoratjar els lladres de codis de robar els vostres fulls d’estil treballats.

Quan reduïu el codi, és recomanable conservar-ne una versió embellida (no minificada), ja que caldrà que pugueu llegir-lo en el futur, en cas que hagueu de fer canvis..

La capa superior

La capa superior no és una eina per optimitzar el vostre CSS. En canvi, és una biblioteca CSS de codi obert dissenyada amb rapidesa. És un descendent del llenguatge de disseny d’Adobe desenvolupat per a Brackets, Edge Reflow.

Topcoat inclou PSD i molts altres artefactes de disseny, juntament amb una col·lecció d’icones SVG senzilles i netes i guies d’estil. També ofereix eines de referència i la fantàstica família de fonts Adobe Source Sans Pro.

Embellidor de codi

Embellidor de codi es basa en CSS Tidy, el popular analitzador i optimitzador CSS de codi obert. Us permet enganxar el codi CSS per processar-lo en una àrea de text o obtenir-lo des d’un URL. Després de fer la seva tasca, mostra el codi optimitzat, juntament amb una llista dels canvis realitzats. Podeu copiar el codi modificat al porta-retalls o guardar-lo en un fitxer per utilitzar-lo posteriorment.

L’eina ofereix una llista important i completa d’opcions que us permet ajustar els seus resultats per satisfer les vostres preferències. Per exemple, proporciona cinc opcions de compressió, que van des de compressió baixa a compressió més alta. Altres opcions us permeten especificar l’ordenació, altres formes de compressió, l’eliminació d’elements innecessaris, entre d’altres.

CSS Nano

Una altra eina de minifundir CSS és CSS Nano. Aquest es basa en una eina creada per transformar estils amb JavaScript, anomenada PostCSS. Gràcies a l’arquitectura de complements d’aquesta eina, els creadors de CSS Nano van poder construir-la a partir de petits mòduls amb funcions restringides.

De manera predeterminada, CSS Nano prendrà el fitxer CSS que li proporcioneu per processar-lo i només farà les optimitzacions segures. Però l’eina també ofereix opcions per empènyer la compressió fins al límit. El funcionament del CSS encara serà el mateix, però es suprimirà el seu espai innecessari. També, els seus identificadors es comprimaran, i les definicions innecessàries seran completament netejades.

# Eines de neteja CSS

Marcatge brut

Marcatge brut fa exactament el contrari de les minifiers: agafa qualsevol codi que l’alimenteu i el neteja, fent-lo fàcil de llegir, sempre que sigui un codi CSS vàlid. El codi resultant està perfectament embellit.

Els creadors de Dirty Markup asseguren que gairebé mil milions de línies de codi (considerant no només CSS, sinó HTML i JavaScript) s’han embellit utilitzant la seva eina.

Seleccionadors de pols

Seleccionadors de pols es va crear per analitzar un lloc web i trobar selectors CSS no utilitzats per tal d’eliminar-los i reduir la mida del vostre codi. Funciona com a complement per Firefox i Opera.

Els selectors de Dust-Me poden treballar en una pàgina individual o rastrejar un mapa del lloc sencer, mostrant-vos els detalls de tots els fulls d’estils i selectors trobats, organitzant-los en usats i no utilitzats. La versió de Firefox és capaç d’escanejar pàgines automàticament mentre navegueu. Només heu de tenir en compte que, en fer-ho, els esdeveniments de mutació poden desencadenar exploracions addicionals si canvia la pàgina.

CSS Lint

CSS Lint ofereix una interfície minimalista: només una caixa de text gran en la qual enganxeu el vostre codi CSS perquè l’hagi “trencat”. No indica el que farà el procés de lliscament al vostre codi, però un missatge d’avís a la part superior de la pàgina us indica que els resultats perjudicaran els vostres sentiments, i també us ajudaran a codificar millor.

CSS Lint valida la sintaxi del codi mitjançant un conjunt de regles predefinides. Fent això, detecta possibles errors i ineficiències. Amb una mica de personalització, CSS Lint us ofereix la possibilitat de seleccionar el conjunt de regles que voleu aplicar.

# Eines de prova / validació CSS

Test d’estrès CSS

Test d’estrès CSS funciona com a favorit (un tros petit de codi JavaScript) que aplica proves d’estrès al CSS de qualsevol pàgina web determinada. L’eina indexa tots els elements del codi CSS i les seves classes. A continuació, comença la prova d’estrès eliminant les classes una per una i cronometrant el temps que triga a desplaçar-se per la pàgina.

Si el temps que la pàgina triga a desplaçar-se es redueix considerablement quan elimineu un selector, aquest selector representa una àrea problemàtica que s’hauria de eliminar o corregir. Aquesta eina funciona especialment amb un fantàstic codi CSS3 que permet racons arrodonits, opacitat, ombres de text i ombres de caixa. Tots aquests efectes es poden fer en CSS3 sense necessitat d’aplicar imatges, scripts especials ni afegir elements addicionals.

Però CSS3 pot causar problemes: una sola propietat pot donar lloc a redibuixaments visibles i problemes de desplaçament de pàgines. Aquí és on la prova d’estrès CSS pot resultar útil.

Servei de validació CSS

Servei de validació CSS valida els fulls d’estils en cascada i HTML (X) amb fulls d’estils. L’eina comprova si hi ha propietats definides a totes les versions de CSS. Per validar una pàgina o un fitxer CSS, només cal que introduïu el seu URI (identificador de recurs uniforme) i configureu algunes opcions bàsiques, com ara el perfil (tipus de CSS a comprovar), el dispositiu de destinació, els avisos a mostrar i què fer amb les extensions del venedor. problemes relacionats (mostrar errors o avisos).

Un cop tot definit, feu clic al botó Comprova i espereu els resultats. L’informe final us mostrarà una llista completa d’errors i avisos, on trobareu propietats no vàlides, errors de sintaxi, extensions de proveïdors desconeguts, entre molts altres problemes que heu de corregir al vostre CSS per ajustar-lo. L’informe també us mostrarà tot el codi CSS vàlid de la vostra pàgina.

BackstopJS 3

BackstopJS 3 automatitza les proves de regressió visual d’interfícies d’usuari web sensibles. Fa la seva tasca comparant una sèrie de captures de pantalla de DOM. Ofereix una llista emocionant de funcions: hi ha informes al navegador, també configuració de disseny per a la impressió i la pantalla i algunes altres funcions específiques, com ara el filtratge de visualitzacions i l’inspector de referència / prova / visual visual..

Utilitzant scripts de Puppeteer i ChromyJS, BackstopJS 3 pot simular les interaccions dels usuaris i és capaç de realitzar proves amb Chrome Headless. Per tal d’eliminar els problemes de representació multiplataforma, també ha integrat la representació de docker. L’eina pot funcionar globalment o localment com a paquet autònom i té un bon rendiment amb CI i control de font. BackstopJS 3 és molt fàcil d’utilitzar: amb només tres ordres, podríeu recórrer força.

Conclusió

Espero que les eines CSS anteriors us ajudin a optimitzar els fitxers CSS de l’aplicació web per obtenir un millor rendiment. Si esteu interessats en aprendre CSS avançats, consulteu-ho curs brillant.

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