4 strumenti per controllare e ottimizzare i CSS

Una volta che il tuo sito web inizia a crescere, così sarà il tuo codice. Man mano che il tuo codice si espande, i CSS potrebbero improvvisamente diventare difficili da mantenere e potresti finire per sovrascrivere una regola CSS con un'altra. Questo complica le cose e probabilmente finirai con un sacco di bug.

Se ti sta succedendo, è tempo che tu lo faccia controlla il CSS del tuo sito. Il controllo del CSS ti consentirà di identificare parti del tuo CSS che non sono ottimizzate. Puoi anche ridurre la dimensione del foglio di stile eliminando le righe di codice che rallentano le prestazioni del tuo sito.

Qui ci sono 5 buoni strumenti per aiutarti a controllare e ottimizzare i CSS.

Type-o-matic

Type-o-matic è un plugin Firebug per analizzare i font che vengono utilizzati in un sito web. Questo plug-in fornisce un rapporto visivo in una tabella, con le proprietà dei caratteri come la famiglia di caratteri, la dimensione, il peso, il colore e anche il numero di volte in cui il carattere viene utilizzato nella pagina Web. Attraverso la tabella dei rapporti, puoi facilmente ottimizzare l'uso dei caratteri, rimuovere ciò che non è necessario o combinare stili troppo simili.

CSS Lint

CSS Lint è un linting strumento che analizza la sintassi CSS in base a parametri specifici relativi a prestazioni, accessibilità e compatibilità del CSS. Sareste sorpresi dai risultati, aspettatevi molti avvertimenti nel vostro CSS. Tuttavia, questi errori aiuteranno a correggere la sintassi CSS e a renderla più efficiente. Inoltre, sarai anche uno scrittore CSS migliore.

CSS ColorGuard

CSS ColorGuard è uno strumento relativamente nuovo. È costruito come un modulo Node e funziona su tutte le piattaforme: Windows, OS X e Linux. CSS ColorGuard è uno strumento da riga di comando che ti avviserà se stai usando colori simili nel tuo foglio di stile; per esempio. # f3f3f3 è abbastanza vicino a # f4f4f4, quindi potresti prendere in considerazione di unire i due. CSS ColorGuard è configurabile, è possibile impostare la soglia di similarità e impostare i colori che lo strumento deve ignorare.

CSS Dig

CSS Dig è uno script Python e funziona localmente sul tuo computer. CSS Dig eseguirà un esame approfondito nel tuo CSS. Legge e combina proprietà ad es. tutte le dichiarazioni di colore di sfondo passeranno sotto la sezione di sfondo. In questo modo puoi prendere facilmente decisioni in base al rapporto quando tenti di standardizzare la sintassi CSS, ad es. puoi trovare il colore tra gli stili con la seguente dichiarazione di colore.

 colore: #ccc; colore: #cccccc; colore: #CCC; colore: #CCCCCC; 

Queste dichiarazioni di colore fanno la stessa cosa. Si potrebbe anche andare con il #ccc o con la capitale #ccc come standard. CSS Dig può esporre questa ridondanza anche ad altre proprietà CSS e sarai in grado di rendere il tuo codice più coerente.