7 errori CSS da evitare come principiante
Lavorare con Cascading Style Sheets (CSS) può essere difficile per i principianti. Usando i CSS, puoi strutturare, aggiornare e mantenere l’aspetto della tua applicazione. Ma il linguaggio richiede abilità 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 design a 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 misure relative come rem o percentuali (%).
La migliore misura relativa da usare è rem. Questa unità si riferisce alla dimensione del carattere dell’elemento radice che un lettore può spesso impostare nelle impostazioni del proprio 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 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 gli schermi grandi e piccoli. Con rem, il contenuto si ridimensiona meglio indipendentemente dalle dimensioni dello schermo. Gli elementi non supereranno mai le dimensioni dello schermo impostate. Ecco perché è meglio usare lunghezze relative piuttosto che pixel.
Su uno schermo del desktop:
Su un piccolo schermo, 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 creeranno confusione durante l’aggiornamento. Prova a utilizzare file diversi per i fogli di stile CSS per componenti diversi.
Ad esempio, puoi avere file diversi per la navigazione, l’intestazione e il piè di pagina. E un altro per sezioni sul corpo. Separare i tuoi file CSS aiuta a strutturare la tua app e incoraggia l’usabilità del codice.
3. Utilizzo inappropriato di CSS in linea
In vanilla CSS puoi scrivere stili sulle pagine HTML proprio come su framework CSS come Bootstrap e TailwindCSS. Inline CSS 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 inline.
<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, l’HTML con solo CSS in linea può essere disordinato. Poiché non esiste un’altra posizione per i CSS, tutti i CSS esistono nello stesso file dell’HTML. Sembrerà affollato. La modifica di un file di questo tipo è 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. Usa sempre una combinazione di fogli di stile esterni e CSS in linea per modellare le 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 averne solo pochi ! regole importanti nel codice. Usalo solo quando necessario. Non ha senso scrivere codice e poi sovrascriverlo. Il tuo codice sembrerà 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 sui nomi
CSS ha 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 di 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%; }
Scrivi così:
.boy-image { margin-left: 3%; }
Quando guardi il foglio di stile, saprai esattamente a quale immagine è destinato il codice. La guida di stile HTML/CSS di Google elenca molte altre convenzioni che ogni sviluppatore dovrebbe conoscere.
6. Lasciare il codice non commentato
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 la lettura e la manutenzione del 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 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. Non progettare 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 la dice lunga 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 progetto. Quindi progettalo su carta o utilizza un toolkit di progettazione come Canva per visualizzare ciò che desideri.
Quando hai un quadro completo del progetto, assembla tutte le tue risorse e inizia a programmare. Ti farà risparmiare tempo e ridondanza.
Perché dovresti prendere in considerazione queste raccomandazioni
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 speso per formattare il front-end lo puoi dedicare a funzionalità più complesse. Garantisce inoltre la possibilità di riutilizzare il codice e condividerlo con altri. Scrivi codice migliore seguendo le convenzioni stabilite e diventa uno sviluppatore migliore.
Lascia un commento