10 migliori strumenti per la formattazione e l’ottimizzazione dei file CSS

La formattazione e l’ottimizzazione dei file CSS non sono più un mal di testa per gli sviluppatori Web con l’aiuto di questi strumenti scelti manualmente!


Fin dalla sua istituzione, i fogli di stile a cascata (CSS) sono stati ampiamente utilizzati per delineare le immagini delle pagine Web. Includono la definizione di colori, layout, animazioni e caratteri. Essendo indipendente dall’HTML, CSS consente di adattare facilmente una presentazione di una pagina Web a diversi tipi di dispositivi con dimensioni dello schermo diverse senza dover modificare un po ‘il contenuto della pagina.

Il CSS è chiamato foglio di stile a cascata a causa del modo in cui i valori delle proprietà vengono applicati alla gerarchia del contenuto. Gli elementi figlio possono ereditare o sovrascrivere i valori delle proprietà dai loro elementi padre. Queste funzionalità sono fornite attraverso un modello basato su un ambito gerarchico di effetti. Il problema con questo modello è che, se non utilizzato correttamente, può compromettere seriamente le prestazioni di un sito Web.

E a nessuno piace un sito Web lento. Ecco perché sono nati per l’ottimizzazione CSS, insieme a una nuova generazione di strumenti esplicitamente progettati per rendere i file CSS il più accurati e veloci possibile.

L’ottimizzazione CSS può essere fatta in molti modi: le dimensioni dei file CSS possono essere ridotte, possono essere pulite, possono essere testate o validate per correttezza, possono essere riordinate, possono essere formattate per comprenderne il codice e, in generale, meglio, possono essere ottimizzato per consentire una migliore esperienza utente. Abbiamo fatto una selezione dei migliori strumenti per ognuna di queste attività.

# Strumenti di sintonia CSS

CSS Minify

CSS Minify è uno strumento semplice per eseguire la minimizzazione CSS: il processo di acquisizione del CSS abbellito, leggibile e ben formato e la rimozione di tutti i suoi spazi, rientri, nuove righe e commenti. Il CSS minimizzato risultante può essere utilizzato correttamente senza quegli elementi. Inoltre, la minimizzazione rende il CSS più difficile da leggere, scoraggiando i ladri di codice di rubare i tuoi fogli di stile laboriosi.

Quando minimizzi il tuo codice, è consigliabile conservarne una versione abbellita (non minimizzata), perché dovrai essere in grado di leggerlo in futuro, nel caso in cui sia necessario modificarlo.

Soprabito

Soprabito non è uno strumento per ottimizzare il tuo CSS. Invece, è una libreria CSS open source progettata pensando alla velocità. È un discendente del linguaggio di progettazione Adobe sviluppato per Brackets, Edge Reflow.

Topcoat include PSD e molti altri manufatti di design, insieme a una raccolta di icone SVG semplici e pulite e guide di stile. Offre anche strumenti di benchmarking e la fantastica famiglia di caratteri Adobe Source Sans Pro.

Codice bellezza

Codice bellezza si basa su CSS Tidy, il famoso parser e ottimizzatore CSS open source. Ti consente di incollare il codice CSS per l’elaborazione su un’area di testo o ottenerlo da un URL. Dopo aver fatto il suo lavoro, mostra il codice ottimizzato, insieme a un elenco delle modifiche apportate. È possibile copiare il codice modificato negli Appunti o salvarlo in un file per un uso successivo.

Lo strumento offre un elenco significativo e completo di opzioni che ti consentono di adattare i risultati per soddisfare le tue preferenze. Ad esempio, offre cinque opzioni per la compressione, che vanno dalla compressione bassa alla compressione più alta. Altre opzioni consentono di specificare l’ordinamento, altre forme di compressione, la rimozione di elementi non necessari, tra gli altri.

CSS Nano

Un altro strumento per minimizzare CSS è CSS Nano. Questo si basa su uno strumento creato per trasformare gli stili con JavaScript, chiamato PostCSS. Grazie all’architettura plug-in di questo strumento, i creatori di CSS Nano sono stati in grado di costruirlo da piccoli moduli con funzioni limitate.

Per impostazione predefinita, CSS Nano prenderà in elaborazione il file CSS che gli fornisci e farà solo ottimizzazioni sicure su di esso. Ma lo strumento offre anche opzioni per spingere la compressione al limite. Il funzionamento del CSS sarà sempre lo stesso, ma i suoi spazi bianchi non necessari verranno rimossi. Inoltre, i suoi identificatori verranno compressi e le sue definizioni non necessarie verranno completamente eliminate.

# Strumenti di pulizia CSS

Markup sporco

Markup sporco fa esattamente l’opposto dei minificatori: prende tutto il codice che lo alimenta e lo pulisce, rendendolo facile da leggere, purché sia ​​un codice CSS valido. Il codice risultante è perfettamente abbellito.

I creatori di Dirty Markup affermano che quasi un miliardo di righe di codice (considerando non solo CSS ma anche HTML e JavaScript) sono state abbellite usando il loro strumento.

Selettori Dust-Me

Selettori Dust-Me è stato creato per scansionare un sito Web e trovare selettori CSS inutilizzati al fine di rimuoverli e ridurre le dimensioni del codice. Funziona come un componente aggiuntivo per Firefox e Opera.

I selettori Dust-Me possono lavorare su una singola pagina o eseguire la scansione di un’intera mappa del sito, mostrandoti i dettagli di tutti i fogli di stile e i selettori trovati, organizzandoli in usati e inutilizzati. La versione di Firefox è in grado di scansionare automaticamente le pagine mentre navighi. Si dovrebbe solo tenere conto del fatto che, durante questa operazione, gli eventi di mutazione possono attivare ulteriori scansioni se la pagina cambia.

Lint CSS

Lint CSS offre un’interfaccia minimalista: solo una grande casella di testo in cui si incolla il codice CSS per farlo “sfilare”. Non dice cosa farà il processo di lanugine al tuo codice, ma un messaggio di avviso nella parte superiore della pagina ti dice che i risultati danneggeranno i tuoi sentimenti e ti aiuteranno anche a programmare meglio.

CSS Lint convalida la sintassi del codice rispetto a una serie di regole predefinite. In questo modo, rileva potenziali inefficienze ed errori. Con un po ‘di personalizzazione, CSS Lint ti dà la possibilità di selezionare il set di regole che desideri applicare.

# Strumenti di test / convalida CSS

Test di stress CSS

Test di stress CSS funziona come un bookmarklet (un piccolo pezzo di codice JavaScript) che applica prove di stress al CSS di una determinata pagina Web. Lo strumento indicizza tutti gli elementi nel codice CSS e le loro classi. Quindi inizia lo stress test rimuovendo le classi una ad una e calcolando il tempo necessario per scorrere la pagina.

Se il tempo impiegato per lo scorrimento della pagina si riduce notevolmente quando si rimuove un selettore, quel selettore rappresenta un’area problematica che dovrebbe essere rimossa o corretta. Questo strumento funziona in particolare con il codice CSS3 di fantasia che consente angoli arrotondati, opacità, ombre di testo e ombre. Tutti questi effetti possono essere eseguiti in CSS3 senza utilizzare lo slicing delle immagini, script speciali o aggiungere elementi aggiuntivi.

Ma CSS3 potrebbe causare problemi: una singola proprietà potrebbe comportare ridisegni visibili e problemi di scorrimento delle pagine. È qui che lo stress test CSS può tornare utile.

Servizio di convalida CSS

Servizio di convalida CSS convalida i fogli di stile a cascata e (X) HTML con i fogli di stile. Lo strumento controlla le proprietà definite in tutte le versioni di CSS. Per convalidare una pagina o un file CSS, devi solo inserire il suo URI (identificatore di risorsa uniforme) e impostare alcune opzioni di base, come profilo (tipo di CSS da controllare), dispositivo di destinazione, avvisi da mostrare e cosa fare con le estensioni del fornitore problemi correlati (mostra errori o avvisi).

Una volta che sei pronto, premi il pulsante Controlla e attendi i risultati. Il rapporto finale ti mostrerà un elenco completo di errori e avvisi, dove troverai proprietà non valide, errori di sintassi, estensioni del fornitore sconosciute, tra molti altri problemi che dovresti correggere nel tuo CSS per ottimizzarlo. Il rapporto mostrerà anche tutto il codice CSS valido nella tua pagina.

BackstopJS 3

BackstopJS 3 automatizza i test di regressione visiva delle interfacce utente Web reattive. Fa il suo lavoro confrontando una serie di schermate DOM. Offre un interessante elenco di funzionalità: sono disponibili rapporti nel browser, anche impostazioni di layout per la stampa e lo schermo e alcune altre funzioni specifiche, come filtro di visualizzazione e ispettore di riferimento / test / visual diff.

Utilizzando gli script Puppeteer e ChromyJS, BackstopJS 3 può simulare le interazioni dell’utente ed è in grado di eseguire il rendering dei test con Chrome Headless. Al fine di eliminare i problemi di rendering multipiattaforma, ha anche integrato il rendering docker. Lo strumento può essere eseguito globalmente o localmente come pacchetto autonomo e funziona bene con CI e controllo del codice sorgente. BackstopJS 3 è molto facile da usare: con solo tre comandi, potresti fare molta strada.

Conclusione

Spero che i suddetti strumenti CSS ti aiutino a ottimizzare i file CSS della tua applicazione web per migliorare le prestazioni. Se sei interessato ad apprendere CSS avanzato, dai un’occhiata a questo corso geniale.

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