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:
- 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.
- 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’.
- 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à.
- 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. }
- 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!
