Ordinamento e organizzazione dei CSS tramite CSSComb

Rispetto ad altri linguaggi web, il CSS è relativamente semplice e facile da scrivere . Ma allo stesso tempo, è anche difficile da organizzare, in particolare quando si tratta di codici composti da migliaia di righe.

Sarebbe bello se riuscissimo a organizzare i CSS e rendere più semplice per gli altri sviluppatori leggere e mantenere i codici, il che è utile se lavori in un team.

In questo post, vi mostreremo come ordinare e organizzare i CSS usando uno strumento chiamato CSSComb . Ma prima, diamo un'occhiata a un breve esempio sull'ordinamento delle proprietà CSS.

Tecnicamente, il CSS non ha restrizioni quando si tratta di ordinare le proprietà. Il seguente esempio ...

 .class {background-color: # f3f3f3; larghezza: 100 px; altezza: 100 px; font-color: # 000; } 

... produrrà lo stesso risultato del seguente:

 .class {width: 100px; font-color: # 000; background-color: # f3f3f3; altezza: 100 px; } 

Ma come abbiamo già detto, l'organizzazione aiuterà i tuoi compagni di squadra a mantenere facilmente i tuoi codici. L'ordinamento dei codici CSS, tuttavia, richiede molte operazioni di taglio e incolla e pensieri su come ordinarlo. Ed è qui che CSSComb torna utile.

Come usare CSSComb

CSSComb è un'utilità di ordinamento per CSS creata da Slava Oliyanchuk . CSSComb supporta i CSS2 in CSS4 ed è disponibile in molti editor di codice popolari come TextMate, Coda, Notepad ++ e Sublime Text, come plugin o estensione.

Se stai usando Sublime Text, CSSComb può essere installato facilmente tramite il Controllo pacchetto. Una volta installato, puoi ordinare le proprietà CSS in diversi modi:

• Premi la combinazione di tasti predefinita: Maiusc + Ctrl + C.
• Fare clic con il tasto destro e selezionare: Ordina tramite l' opzione CSSComb .
• Apri Tavolozza comandi - Comando + Maiusc + P e seleziona Ordina tramite CSSComb .

In questo esempio, abbiamo la seguente regola di stile.

 .class {padding-top: 1px; border-left: 1px solid #fff; -moz-box-shadow: 0 0 1px 0 # 000; -webkit-box-shadow: 0 0 1px 0 # 000; box-shadow: 0 0 1px 0 # 000; border-right: 1px solid #fff; altezza: 23 px; imbottitura-fondo: 10px; background-color: #fff; } 

La regola di stile sopra funziona e non c'è niente di sbagliato in questo, tranne che è un po 'disorganizzato. Ora, dopo aver eseguito CSSComb, le proprietà vengono ordinate nel seguente ordine.

 .site-header> .container {padding-top: 1px; imbottitura-fondo: 10px; altezza: 23 px; border-right: 1px solid #fff; border-left: 1px solid #fff; background-color: #fff; -webkit-box-shadow: 0 0 1px 0 # 000; -moz-box-shadow: 0 0 1px 0 # 000; box-shadow: 0 0 1px 0 # 000; } 

Sopra è la regola di ordinazione predefinita in CSSComb, ma se non si desidera ordinarla in questo modo, è possibile personalizzare l'ordine, andando al menu Preferenze> Impostazioni pacchetto> CSSComb e impostando una nuova regola ordine in Ordine di ordinamento - Utente .

Nota : se stai usando un editor di codice che non ha l'estensione o il plugin, CSSComb è anche disponibile come webtool.

40 strumenti e app per potenziare il tuo account Instagram

Ci siamo divertiti con l'ultimo post su 80 Twitter Tools per fare quasi tutto, quindi abbiamo pensato di rivisitare il formato con Instagram. L'elenco ha messo a disposizione una varietà di strumenti che possono aggiungere più divertimento agli utenti avanzati e agli appassionati di Instagram, dalla pianificazione regolare dei post alla stampa delle foto di Instagram in libri e altri mezzi sorprendenti.I

(Consigli tecnici e di design)

Guida per i consumatori per proteggere le transazioni online

La transazione non è più limitata al mondo reale oggi. Testimoniando la ricognizione di Internet in tutti i paesi moderni, la maggior parte delle aziende, in particolare i grandi marchi, hanno impostato i propri siti di e-commerce con diverse opzioni di pagamento offerte per acquisti e transazioni online sicuri.

(Consigli tecnici e di design)