CONTATTACI

Blog

5 pratiche CSS da evitare come web developer

Per uno sviluppatore web alle prime armi, commettere errori è all’ordine del giorno. Avere un’approfondita conoscenza delle tecnologie che si utilizzano è importante per ottenere risultati importanti e inserirsi gradualmente nel mondo del lavoro. Il linguaggio CSS è parte integrante di queste tecnologie, in quanto fondamentale per uno sviluppatore web.

CSS: cos’è?

Il linguaggio CSS, acronimo di Cascading Style Sheets, viene utilizzato per stilizzare gli elementi scritti in un linguaggio di markup come il linguaggio HTML . Separa il contenuto dalla rappresentazione visiva del sito. I file CSS non sono strettamente necessari, ma avere un sito solo in linguaggio HTML è sinonimo di pagine web totalmente prive di dinamicità e stile.

Imparare a programmare in linguaggio CSS vuol dire stare attenti a quello che si scrive, come lo si scrive e soprattutto evitare di commettere errori che un developer alle prime armi è propenso a commettere. All’inizio può sembrare complicato imparare il linguaggio CSS, ma basta avere un po’ di buona volontà ed esercitarsi.

Innanzitutto, per migliorare e approfondire la conoscenza di CSS è bene definire quelle che sono le 5 pratiche da evitare come web developer:

  1. Settare i margini o il padding di un elemento e poi resettarli:

Spesso può sembrare corretto impostare i margini o il padding css per tutti gli elementi e poi resettarli per il primo o l’ultimo blocco della pagina. In realtà non è una pratica corretta, oltre ad essere dispendiosa, perché vengono usate due regole anziché una sola. È molto più semplice impostare i margini e il padding per tutti gli elementi richiesti contemporaneamente. Anziché scrivere codice in questo modo: 

1. .item {
3.   margin-right: 1.6rem;
4. }
5.  
6. .item:last-child {
7.   margin-right: 0;
8.}

Può essere scritto in questo modo in maniera più concisa:

1. .item:not(:last-child) {
2.   margin-right: 1.6rem;
4. }

5.  

  1. Dare nomi ai selectors CSS troppo descrittivi:

Un errore che è molto frequente nella programmazione informatica in maniera più generica è quello di assegnare nomi a variabili, metodi o (in questo caso) elementi, che siano troppo discorsivi. Nella programmazione informatica è sempre importante essere riassuntivi e concisi, dando sempre significato a quello che si scrive. Nel caso del linguaggio CSS, se vogliamo dare un nome ad una card, scrivere ‘.brown-with-border-card’ risulterebbe non corretto, quando basterebbe semplicemente utilizzare il nome ‘card’.

  1. Abuso dell’utilizzo della regola !important

La regola !important viene utilizzata per ignorare le regole di specificità. Il suo utilizzo è focalizzato principalmente sull'override di uno stile che non può essere ignorato in nessun altro modo. Il più delle volte viene utilizzato in scenari in cui un selettore più specifico avrebbe svolto il lavoro. Utilizzare troppo questa regola all’interno di un file CSS potrebbe rendere confusionaria la lettura del documento. Si tratta di una regola situazionale che non andrebbe utilizzata per snaturare il flusso delle regole di specificità.

  1. Usare la stessa regola in maniera ripetitiva

Molti programmatori web alle prime armi usano regole ripetitive per ogni elemento definito all’interno del file CSS. Per ottimizzare questa pratica ridondante è possibile utilizzare un attributo di classe. Anziché scrivere in questo modo:

 1. #intro1 {
 2.   color: #3498db;
 3.   font-size: 10px;
 4.   font-weight: bold;
 5. }
 6.  
 7. header {
 8.   color: #3498db;
 9.   font-size: 20px;
10.   background-color: green;
11. }
12.  
13. #banner {
14.   color: #3498db;
15.   font-size: 30px;
16.   background-image: url(images/static.jpg);
17. }

Si può semplicemente risolvere definendo il colore come attributo di classe:

1. .blue {
2.   color: #3498db;
3. }
  1. Non utilizzare le unità relative

Un errore comune che bisogna commettere per imparare a programmare con il linguaggio CSS è la codifica delle unità in pixel invece di usare solo unità relative (in percentuale %, oppure con la notazione em). Le unità relative assicurano il ridimensionamento del layout in base alla schermata dell’utente. È importante utilizzarli su tutti gli elementi che vengono gestiti e modificati in un documento CSS. Assicurare il ridimensionamento del layout all’interno di una pagina web è fondamentale per rendere la struttura della pagina responsiva.
 

Avere premura nell’evitare questi errori utilizzando il linguaggio CSS è il modo migliore per aumentare la propria dimestichezza con lo sviluppo web. Imparare a programmare vuol dire anche commettere determinati errori, ma riconoscerli è il primo passo per diventare un programmatore migliore. La figura del web developer si crea in maniera graduale, partendo dal padroneggiare l’utilizzo di CSS, HTML e JavaScript. Ti stai chiedendo come? Niente di più facile: inizia leggendo la nostra guida html e css online, completamente in italiano e gratuita e, se ti accorgi che è pane per i tuoi denti, valuta un corso di sviluppatore web come l’Hackademy di Aulab. Corri a scoprirlo! 

Articoli correlati

Il linguaggio HTML (Hypertext Markup Language) è uno dei più conosciuti e diffusi: lo si trova infatti praticamente in tutte le pagine web esistenti. È una scelta popolare tra i principianti che si…

Seguici su Facebook

Vuoi entrare nel mondo della programmazione?

Scopri di più sui nostri corsi!

Chiamaci al numero verde

Contattaci su WhatsApp

Contattaci senza impegno per informazioni sul corso

Pagamento rateale

Valore della rata: A PARTIRE DA 115 €/mese.

Esempio di finanziamento 

Importo finanziato: € 2440 in 24 rate da € 115 – TAN fisso 9,55% TAEG 12,57% – importo totale del credito € 2841.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

*In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Pagamento rateale

Valore della rata: A PARTIRE DA 210 €/mese.

Esempio di finanziamento  

Importo finanziato: € 4500 in 24 rate da € 210,03 – TAN fisso 9,68% TAEG 11,97% – importo totale del credito € 5146,55.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

* In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Contattaci senza impegno per informazioni sul corso

Scopriamo insieme se i nostri corsi fanno per te. Compila il form e aspetta la chiamata di uno dei nostri consulenti.