7 errori CSS da evitare come principiante
Padroneggiare i CSS può richiedere molta pratica e impegno. Datti le migliori possibilità di successo evitando questi errori comuni.
Lavorare con i fogli di stile a cascata (CSS) può essere difficile per i principianti. Utilizzando i CSS, puoi strutturare, aggiornare e mantenere l'aspetto della tua applicazione. Ma il linguaggio richiede competenze per manipolare le pagine HTML per ottenere il layout desiderato.
Ecco alcuni errori da evitare quando si lavora con i CSS. Ti faranno risparmiare tempo e faciliteranno il tuo processo di sviluppo.
1. Utilizzo di px per le dimensioni dei caratteri
L'unità "px" rappresenta i pixel. Puoi usarlo per esprimere varie lunghezze su una pagina web, dalla larghezza e altezza di un elemento alla dimensione del carattere.
Tuttavia, px blocca il tuo disegno su una dimensione fissa per tutti gli schermi. Un'immagine in px può occupare l'intera larghezza di uno schermo e solo una piccola parte di un altro. Se desideri un elemento più proporzionale, utilizza misurazioni relative come rem o percentuali (%).
La migliore misura relativa da utilizzare è rem. Questa unità si riferisce alla dimensione del carattere dell'elemento root che un lettore può spesso impostare nelle impostazioni del browser. Puoi vedere l'impatto di px e rem su un elemento nel seguente esempio:
<!DOCTYPE html>
<HTML>
<head></head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>Puoi definire lo stile delle dimensioni dei caratteri in questo documento utilizzando le unità px con il seguente CSS:
h1 {
font-size: 50px;
}
h2 {
font-size: 30px;
}
p {
font-size: 15px;
}La pagina risultante sembra accettabile quando la visualizzi su un grande schermo:
Ma non sembra presentabile su uno schermo più piccolo, come su un telefono:
Successivamente, applica rem sullo stesso contenuto. Specifica una dimensione del carattere di base sull'elemento html e dimensiona gli altri elementi utilizzando rems, come illustrato di seguito:
html {
font-size: 16px;
}
h1 {
font-size: 3rem;
}
h2 {
font-size: 2rem;
}
p {
font-size: 1rem;
}Notare la differenza tra schermi grandi e piccoli. Con rem, il contenuto si ridimensiona meglio indipendentemente dalle dimensioni dello schermo. Gli elementi non supereranno mai la dimensione dello schermo impostata. Ecco perché è meglio utilizzare lunghezze relative anziché pixel.
Sullo schermo del desktop:
Su uno schermo piccolo, il testo in unità rem è ancora leggibile:
2. Mettere tutti i tuoi stili in un unico file
L'utilizzo di un file CSS per un grande progetto può creare confusione. Avrai un file con lunghe righe di codice che creerà confusione durante l'aggiornamento. Prova a utilizzare file diversi per fogli di stile CSS per componenti diversi.
Ad esempio, puoi avere file diversi per navigazione, intestazione e piè di pagina. E un altro per le sezioni sul corpo. Separare i file CSS aiuta a strutturare la tua app e incoraggiare l'usabilità del codice.
3. Utilizzo inappropriato dei CSS in linea
Nei CSS vanilla puoi scrivere stili sulle pagine HTML proprio come nei framework CSS come Bootstrap e TailwindCSS. Il CSS in linea ti consente di applicare uno stile unico a un elemento HTML. Utilizza l'attributo style dell'elemento HTML.
Il codice seguente è un esempio di CSS in linea.
<h2 style="color:green;">This is a Green Heading</h2>
<p style="color:red;">This is a red paragraph.</p>Il testo apparirà così:
Tuttavia, solo l'HTML con CSS incorporato può creare confusione. Poiché non esiste altra posizione per i CSS, tutti i CSS esistono nello stesso file dell'HTML. Sembrerà affollato. Modificare un file del genere è difficile, soprattutto se non è il tuo codice.
Inoltre, con i CSS in linea, devi scrivere il codice per ogni elemento. Ciò aumenta la ripetizione e riduce il riutilizzo del codice. Utilizza sempre una combinazione di fogli di stile esterni e CSS in linea per definire lo stile delle tue pagine web.
4. Uso eccessivo! Importante
Nei CSS, la regola !important aggiunge più importanza a una proprietà/valore. Sostituisce le altre regole di stile per quella proprietà su quell'elemento.
Dovresti avere solo poche regole!importanti nel tuo codice. Usalo solo quando necessario. Non ha senso scrivere codice e poi sovrascriverlo. Il tuo codice apparirà disordinato e causerà problemi se eseguito su alcuni dispositivi.
<!DOCTYPE html>
<html>
<head></head>
<body>
<p> I am orange </p>
<p class="my-class"> I am green </p>
<p id="my-id"> I am blue. </p>
</body>
</html>CSS:
#my-id {
background-color: blue;
}
.my-class {
background-color: green;
}
p {
background-color: orange !important;
}
Il risultato è così:
5. Non seguire le convenzioni di denominazione
I CSS hanno convenzioni di denominazione che guidano gli sviluppatori su come scrivere codice standard. Questo è essenziale se finisci per eseguire il debug del file CSS in una data futura.
Uno di questi standard include l'uso dei trattini per separare le parole raggruppate. Un altro è nominare un selettore in base a ciò che fa. Quindi chiunque lo guardi non dovrà indovinare. Inoltre semplifica la lettura, la manutenzione e la condivisione del codice. Per esempio:
Invece di questo:
.image1 { margin-left: 3%; }Scrivilo così:
.boy-image { margin-left: 3%; }Quando guardi il foglio di stile, saprai esattamente a quale immagine è destinato il codice. La guida allo stile HTML/CSS di Google elenca molte altre convenzioni che ogni sviluppatore dovrebbe conoscere.
6. Lasciare il codice senza commenti
Scrivere commenti è l'abilità più sottovalutata nella programmazione. Molte persone dimenticano di scrivere commenti per spiegare il loro codice. Ma fa risparmiare tempo. I commenti sono essenziali per leggere e mantenere il codice.
Poiché i CSS sono strutturati in modo approssimativo e chiunque può sviluppare le proprie convenzioni, i commenti sono vitali. Usare commenti ben strutturati per spiegare il tuo foglio di stile è una buona pratica. Puoi scrivere commenti che spiegano le sezioni del codice e cosa fanno.
/* video elements need space to breathe */
.video {
margin-top: 2em;
}
/* styling the hero section */
.salutation {
margin-top: 1em;
}7. Mancata progettazione in anticipo
Molte persone lo fanno, ma è un grave errore iniziare a programmare senza un piano. I CSS determinano l'aspetto della struttura del tuo front-end. Il design dice molto sulle tue capacità di programmazione.
Un design per il tuo sito chiarisce la tua visione e le risorse necessarie per arrivarci. Avere un'immagine mentale del tuo progetto. Quindi progettalo su carta o utilizza un kit di strumenti di progettazione come Canva per visualizzare ciò che desideri.
Quando hai un quadro completo del progetto, assembla tutte le tue risorse e inizia a scrivere codice. Ti farà risparmiare tempo e ridondanza.
Perché dovresti prendere in considerazione questi consigli
Se stai sviluppando applicazioni sul Web, utilizzerai i CSS. Lavorare bene con i CSS richiede pratica e seguire le convenzioni standard. Le convenzioni non solo rendono il tuo codice leggibile ma anche gestibile.
Scrivere codice standardizzato ti farà risparmiare tempo e fatica. Il tempo che avresti dedicato alla formattazione del front-end puoi dedicarlo a funzionalità più complesse. Ti garantisce inoltre di poter riutilizzare il codice e condividerlo con altri. Scrivi un codice migliore seguendo le convenzioni impostate e diventa uno sviluppatore migliore.