Codice di scrittura è facile, la cosa difficile è scrivere un codice di qualità pulito e ordinato. Per raggiungere questo obiettivo, è necessaria la metodologia, che è acquisita con esperienza. Di solito questo processo comporta la pratica e un lungo periodo, che ne deriva molte volte travolgendo. Fortunatamente, ci sono una serie di buone pratiche che possono essere orientate (specialmente quando stiamo iniziando) e che mi ha aiutato molto a iniziare.
In questo articolo, vedremo 12 buone pratiche di HTML e CSS molto facile da applicare e miglioreranno la qualità del nostro codice.
collegamento migliore di @import
Per includere fogli di stile al nostro HTML, è meglio usare i tag di collegamento che fornisce la lingua stessa. Si noti che quante più importi foglie prenderanno la pagina da caricare.
Usa le classi anziché IDS
id Non contribuire Vantaggio oltre che non possono (o non dovrebbero) essere ripetuti. Quando si applicano gli stili ai nostri elementi, è meglio assegnare lezioni. Ciò non significa che gli ID non dovrebbero essere utilizzati, infatti sono abbastanza utili per JavaScript in quanto consentono l’accesso agli elementi DOM che consumano poche risorse.
In sintesi, prenota gli ID per il tuo JavaScript e il resto NOME IT CON CLASSI In questo modo non dovrai ricordare se assegni un ID o una classe, e perderai meno tempo.
nomi di classe
Ci sono molte forme e raccomandazioni per nominare le classi . Personalmente uso la nomenclatura BEM, perché è molto auto-descrittivo ed è abbastanza standardizzata.
Si raccomanda inoltre che le classi di stato (che sono quelle che assegniamo con JavaScript per manipolare gli stili in una determinata situazione ) Avere un nome simile, ad esempio: is-hide, is-show, , ecc.
Evita di dichiarare gli stili online
Quando creiamo il codice HTML dobbiamo pensare che solo la struttura della pagina deve essere definita, non gli stili.
<span style="color: blue">Texto</span>Questo codice HTML ha dichiarato uno stile online, che non crea non solo confusione a qualsiasi altra persona che legge il codice, ma anche sovrascrive a qualsiasi stile assegnato da CSS . La cosa raccomandabile è assegnare una classe e applicare stili nel CSS.
Tuttavia, ci sono occasioni in cui è utile dichiarare gli stili online: quando li definiamo tramite JavaScript (per creare effetti parallasse (per creare effetti parallasse ) o quando stiamo scrivendo un oggetto su un CMS e vogliamo che un elemento abbia uno stile molto specifico.
Reimpostare sempre gli stili
I browser predefiniti aggiungono margini e alcuni stili di base Etichette di HTML. Il problema è che non tutti i browser applicano gli stessi stili, che a volte possono scoprire i nostri progetti. La soluzione viene ripristinata gli stili e per questo il più noto è normalizzabile o reset. Che scegliere? La differenza tra questi due è che il primo è responsabile dell’applicazione degli stili di base in modo che siano uguali per tutti i browser mentre il secondo elimina i margini di tutti gli elementi. Personalmente preferisco di solito il secondo ma con una piccola aggiunta:
*, body * { box-sizing: border-box } box-sizing È una proprietà che altera il comportamento predefinito del browser quando vengono definite le dimensioni di un elemento. Un rapido esempio: se assegniamo un contenitore A width DA 200px e quindi aggiungeremo un bordo di 2px, quel contenitore occuperà . Strano, giusto? Cosa fa box-sizing: border-box è solo che da molto bordo che ti aggiungiamo continua a misurare 200px.
Commenta il commento CSS
Le lingue di programmazione sono progettate per comprenderle una macchina, non l’essere umano. Dobbiamo pensare al nostro futuro sé o ad un’altra persona che può leggere il nostro codice, per questo motivo è sempre bello lasciare commenti.
/* Esto es un comentario simple */È anche una buona idea inserire le sezioni con commenti sotto forma di un blocco:
/*------------------------------------*\ HEADER STYLES\*------------------------------------*/il 0 Non ha un’unità
Ogni volta che un valore è zero, la cosa giusta non deve indicare alcuna unità. Non è corretto utilizzare 0px o 0em.
Evitare l’uso! IMPORTANTE
AVENTARE Un buon controllo della cascata è essenziale per creare un codice pulito e ordinato. Cosa facciamo con !important è quello di modificare il funzionamento naturale della cascata, un esempio:
p { color: red !important;}. . .p { color: blue;} In questo codice i paragrafi dovrebbero avere il colore blu, ma avendo dichiarato un !important raccoglierebbe rosso.È illogico e rende il codice che rende il codice, quindi dobbiamo limitare il suo utilizzo come ultima opzione.
Selettori di gruppo
Se abbiamo il seguente codice:
h1 { font-size: 2.5em; font-weight: 800;}h2 { font-size: 2em; font-weight: 800;}Possiamo sintetizzarlo in modo che sia meno ridondante:
h1,h2 { font-weight: 800;}h1 { font-size: 2.5em;}h2 { font-size: 2em;}In questo modo se un futuro vogliamo cambiare lo spessore della fonte, dovremo solo modificare un valore.
Seguire una guida in stile CSS
CSS è un linguaggio non credente e che può convertire in un problema quando si lavora come una squadra o seguire una buona struttura. Ecco perché è meglio seguire una guida di stili che unifica e rendono tutti i membri scrivono il codice uguale. Uno dei più noti e con la migliore reputazione è la guida allo stile che ha elaborato Airbnb. Naturalmente c’è di più, e puoi sempre crearlo se lo consideri tempestivo. L’obiettivo finale è che tutto il codice dell’applicazione è uniforme.
Utilizzare preprocessori come sass
oggi è essenziale per usare un preprocessore quando si lavora con foglie di stili. Uno dei più popolari, e che personalmente l’uso è Sass.
I preprocessori ci permettono di avere molti fogli di stili che vengono poi compilati in uno, quindi non influisce sulle prestazioni. Questo evita di dover affrontare un mostruoso foglio di stili di migliaia di linee e risparmia un sacco di tempo. Ecco perché è importante seguire una buona struttura e anche una buona guida in stile sass. Questa è la struttura che di solito uso nei miei progetti, estratta dal collegamento precedente:
Estructura del proyecto└── scss ├── abstracts ├── _mixins.scss └── _var.scss // Declaración de variables de SASS o CSS ├── base ├── _base.scss // Estilos básicos que sobreescriben estilos de etiquetas HTML (sin clases) ├── _general.scss // Estilos básicos aplicados a clases de CSS └── _typography.scss // Estilos básicos de tipografía (familia, tamaños, grosor, etc.) ├── components // Aquí irían los estilos de algún componente en concreto ├── layout // Aquí irían los estilos de alguna sección que se repite en varias páginas ├── pages // Aquí irían los estilos de las diferentes páginas que componen el proyecto ├── themes // Aquí irían los estilos puramente estéticos (como colores) └── style.scss // Fichero principal donde importamos el resto de archivosprova il design in diversi browser
Test essenziale Il design almeno in Firefox, Chrome and Edge e su dispositivi mobili almeno in Chrome. Se non temi per la tua vita e vuoi avere un supporto completo puoi provare Internet Explorer 11, anche se alle porte 2019 non avrebbe avuto nulla per non averti supportato.