Vai al contenuto principale

10 CSS trucchi per migliorare il flusso di lavoro

Divi: il tema WordPress più semplice da usare

Divi: il miglior tema WordPress di tutti i tempi!

più Download di 901.000, Divi è il tema WordPress più popolare al mondo. È completo, facile da usare e viene fornito con oltre i modelli gratuiti 62. [Consigliato]

Scrivere CSS non è facile, perché se non stai attento, puoi scrivere codice disordinato, essere lento e impiegare moltissimo tempo per il debug del codice durante la scrittura del codice.

Andiamo subito al dunque: in questo tutorial ho raccolto alcuni suggerimenti che puoi utilizzare per migliorare le tue prestazioni nella scrittura di codice CSS. Puoi implementarli in qualsiasi momento sui tuoi vecchi o nuovi progetti.

Esploreremo in particolare:

1. La collezione di proprietà

Se si scopre di aver scritto più volte le stesse proprietà, verificare di non poterle troncare rimuovendo classi e ID non necessari. Quindi aggiungi tutte le proprietà comuni in una singola parentesi graffa.

Se puoi collegare le tue sezioni, sarai in grado di creare un file che è più efficiente nel funzionamento e sarà molto più veloce.

2. Utilizzare la password per le costanti

La sfortunata limitazione del CSS è che non puoi definire le costanti, come in PHP. Le costanti sono termini che è possibile definire una volta utilizzati dal resto dello script indipendentemente dall'ambito del codice e dalle inclusioni.

Puoi interrompere la creazione di più stili più volte, per optare per un tipo che definisci come blocco di progettazione. Poiché CSS non è stato creato per programmare il tuo sito, ti consentirà solo di agire come un designer di interni per così dire, non ha la capacità di supportare le costanti.

Tuttavia, questo è qualcosa che sarebbe davvero utile, soprattutto nel caso in cui raggruppare le tue proprietà non farà tutto il lavoro per te.

Quello che puoi fare è creare un ID che includa tutti gli stili di cui hai bisogno. Quando hai davvero bisogno di usarlo, aggiungi semplicemente i selettori necessari per la dichiarazione. Il che ti farà scrivere il tuo codice CSS molto più velocemente.

3. Commento tua costante

Ovviamente, CSS non supporta le costanti, ma ciò non significa che non puoi ancora scrivere un riferimento per ciò che altrimenti sarebbe costanti. Perché non elencare gli stili comuni in un commento su più righe?

Spetterà a te determinare come scrivere questi commenti, ma puoi creare una sorta di tabella di materiale simile a questa:

/ * CSS 'Costanti' * * Background: * #ccc9c9 grigio scuro, il testo: * #3a3838 sfondo felice #e7e7e7 mano * * /

Questo è particolarmente utile per me, poiché non è sempre facile per me sapere rapidamente quali sono i dettagli funzionali di un blocco di codice (Costante). Avere un callback nelle vicinanze aiuta ad accelerare il processo di codifica, dal momento che sai esattamente dove guardare e non dovrai cercare attraverso una montagna di CSS per trovare il punto in cui hai fatto riferimento a un certo stile.

Crea facilmente il tuo sito Web con Elementor

Elementor ti consente di creare facilmente qualsiasi design di sito Web con un aspetto professionale. Smetti di pagare caro per quello che puoi fare da solo. [Free]

4. Selettori raggruppati

Perché fermarsi qui? Già che ci sei, perché non raggruppare molti selettori che possono essere messi insieme? Questo ti risparmierà la fatica di digitare più volte lo stesso stile:

h1, h2, h3, h4 p {padding: 1 em; font-family: "Times New Roman" tempi, serif; } Ul .navigation, .navigation li {padding-top: 0,5 em; }

Sebbene questo potrebbe non funzionare in tutti i casi e l'esempio sopra non si applicherà certamente alle tue esigenze specifiche, può servire come promemoria per la prossima volta che codifichi e hai bisogno di risparmiare tempo. e nello spazio.

5. Utilizzare un preprocessore

Un preprocessore CSS è un'estensione del normale linguaggio CSS che ti aiuta a codificare più velocemente aggiungendo molte altre funzionalità che normalmente non saresti in grado di aggiungere così facilmente.

I preprocessori CSS più comuni in WordPress sono SASS e LESS e puoi imparare ad usare entrambi.

I preprocessori CSS rendono il lavoro molto più semplice ed è abbastanza normale vedere quanto gli sviluppatori si affezionano a loro una volta che ne hanno preso la mano.

6. Pseudo-classi

Come spiega lo specialista CSS Eric Meyer,  l'elenco degli stili di collegamenti in un certo ordine è importante. Altrimenti, potresti ritrovarti con collegamenti in stile che non funzionano come speravi.

Puoi combattere questo e risparmiare tempo non dovendo risolvere questo tipo di problema in futuro seguendo un semplice ordine per le pseudo-classi dei collegamenti. Puoi ricordare questo ordine con il seguente dispositivo:

a: link {istruzione} a: visited {istruzione} a: hover {istruzione} a: active {istruzione}

lo stile dei link non visitati viene impostato prima, poi visitati, al passaggio del mouse e link attivi. A dire il vero l'ordine non ha molta importanza, l'obiettivo è riuscire a farvi ricordare questa combinazione nel modo più semplice possibile. Questo ordine è chiamato pseudo-classi “LoVe / HAte”, a causa delle lettere usate nelle pseudo-classi.

Sfortunatamente, questo non include la pseudo-classe "focus", sebbene possa essere considerata la pseudo-classe "attiva". C'è anche un fraseggio mnemonico che include questa pseudo-classe che è "LoVe Hade Fade Via ":

Stai cercando i migliori temi e plugin per WordPress?

Scarica i migliori plugin e temi WordPress su Envato e crea facilmente il tuo sito web. Già più di 49.720.000 download. [ESCLUSIVO]

a: link {istruzione} a: visited {istruzione} a: hover {istruzione} un: focus {istruzione} a: active {istruzione}

7. Usa stenografia CSS

Se vuoi codificare in modo rapido ed efficiente, ma senza una curva di apprendimento più ripida con l'aiuto di un preprocessore, puoi codificare stenografia CSS. Le regole sono molto più facili da imparare, il che ti renderà più facile usarle.

Con la scorciatoia CSS, puoi condensare più righe in una, senza perdere funzionalità. Ad esempio, sotto vedrai 3 linee che si applicano al bordo di un elemento:

#mainContent {border-width: 1px; border-style: solido; border-color: black; }

Questa linea potrebbe essere molto più semplice:

#mainContent {border: solid 1px nero; }

8. Utilizzare le scorciatoie per le immagini

Le scorciatoie CSS potrebbero non essere sempre la soluzione migliore per te, ma puoi adottare questa regola quando lavori con i colori.

Invece di utilizzare un codice esadecimale a 6 cifre, puoi utilizzare solo 3 cifre.

#ffffff = #fff #1144bb #14b #ffcc44 = = #fc4

In altre parole, se vedi che un codice colore ha coppie (il primo e il secondo valore, il terzo e il quarto e gli ultimi due valori) dove ogni coppia ha lo stesso carattere. puoi omettere uno qualsiasi di questi caratteri per ogni coppia.

Ci vorrà del tempo per abituarsi, ma ne varrà la pena. Se le altre forme di scorciatoie non sono comuni, non devi preoccuparti qui, perché le scorciatoie colorate sono quasi familiari a tutti.

9. I collegamenti non hanno bisogno di citazione e spazio

Quando aggiungi un URI al foglio di stile, il formato regolare e corretto include spazi singoli e doppi e virgolette, come in questo esempio:

stile di vita {
background-image: URL ("Http://www.example.com/deepgray-pattern.png");
}

Dopo "url (", ci sono uno spazio, virgolette e uno spazio di chiusura che sono in realtà facoltativi.

Per risparmiare un po 'più di tempo e spazio, questa stessa riga può essere scritta in questo modo:

stile di vita {
background-image: URL (Http://www.example.com/deepgray-pattern.png);
}

Noterai che lo spazio e le virgolette non sono realmente necessarie.

10. Analizza il tuo CSS

È importante analizzare il tuo foglio di stile dopo aver finito per assicurarti che sia il più pulito e leggero possibile. Questo può essere doloroso, ma soprattutto può richiedere molto tempo per raggiungerlo.

Crea facilmente il tuo negozio online

Scarica gratuitamente WooCommerce, i migliori plug-in di e-commerce per vendere i tuoi prodotti fisici e digitali su WordPress. [Consigliato]

Fortunatamente, ci sono strumenti gratuiti come Analisi CSS, CSS Dig et CSS Lint. Tutto quello che devi fare è inserire il tuo codice, selezionare alcune opzioni e fare clic su un pulsante per ottenere immediatamente un rapporto per il tuo codice CSS.

CSS Lint è ancora più duro e può danneggiare la tua sensibilità in nome del progresso aiutandoti a migliorare le tue capacità di programmazione.

Ad ogni modo, queste sono tutte le opzioni facili disponibili per aiutarti a semplificare l'analisi del tuo foglio di stile per assicurarti che sia il più sacro possibile.

Questo è tutto per questi suggerimenti che puoi utilizzare sui tuoi vari progetti CSS. Non esitate ad offrirci i vostri suggerimenti.

Questo articolo contiene i commenti 0

Lascia un commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito utilizza Akismet per ridurre indesiderati. Ulteriori informazioni su come vengono utilizzati i dati dei commenti.

Torna in alto
13 azioni
quota12
Tweet
Enregistrer1