Il compito principale della formattazione è rendere il testo leggibile e comprensibile nella sua struttura. Esistono persino intere guide di codifica che coprono sciocchezze come il numero di spazi o la rientranza delle parentesi graffe. In effetti, tutto è molto più semplice: è sufficiente che il codice sia visivamente leggibile e gli spazi o le schede sono la ventiseiesima questione.
Tuttavia, voglio sottolineare questo, se hai intenzione di pubblicare codice per altre persone, dovrai aderire a uno "standard di base".
Blocca i rientri
Ogni blocco nidificato deve avere più spaziatura interna sinistra rispetto al genitore.
Cioè, stiamo costruendo una gerarchia visiva di tag che è facile da navigare. Confronta con "stile piatto":
I moderni editor di testo, come Notepad ++, li indentano automaticamente con Invio "y, che elimina completamente il problema con il loro posizionamento manuale. Di solito, i programmatori creano prima un tag di apertura e chiusura e solo dopo lo suddividono in righe con Invio "ohm. Ciò garantisce che il tag di apertura abbia sempre un tag di chiusura.
Blocchi di "chiusura".
Nel codice, potrebbe esserci una situazione in cui i blocchi si susseguono sempre immediatamente. In questo caso, non puoi dividerli tra loro e non fare un rientro aggiuntivo.
In questo esempio, div.layout-center-wrap contiene sempre un figlio immediato di div.layout-wrap senza interruzioni. Tali blocchi possono essere visualizzati visivamente come uno. Ecco un altro esempio in cui i blocchi possono essere posizionati sullo stesso livello.
La cosa principale qui è non esagerare: non dovresti posizionare più di 2-3 blocchi su una linea / livello. Se il testo o il codice sono inseriti tra i blocchi, allora dovrebbero essere sicuramente posizionati su righe diverse.
Questa formattazione non funziona. Sarà corretto così:
Spazio o tabulazione
Non importa. Usa ciò che ti piace di più. Per quanto ne so, quasi tutti i programmatori usano le schede, semplicemente per il fatto che è solo una pressione del tasto Tab.
Se lo fai con gli spazi, per ogni rientro devi premere 4 spazi. Un problema comune è che per errore puoi premere non 4, ma 3, 5 o qualcos'altro, e allo stesso tempo devi contare le sequenze di tasti o controllare visivamente il risultato.
A questo proposito, il tabulatore è molto più "affidabile". Da un punto di vista tecnico non c'è differenza tra tab e spazi (il codice html sarà comunque compresso).
L'uso di più spazi è un'imitazione di una tabulazione. Quindi questa domanda risiede nel piano dell'usabilità. Ma se decidi di usare gli spazi, allora ci devono essere 4 caratteri per ogni rientro, altrimenti il testo perde leggibilità. Ci sono manuali in cui si consiglia di inserire 2 spazi, ma per me tale codice è visivamente "sciatto".
Maiuscolo e minuscolo
Quando si tratta di HTML, tutti i tag devono essere in minuscolo. Tecnicamente, ancora una volta, non importa, ma le lettere maiuscole sono difficili da leggere. Pertanto, tutti i tag e i relativi attributi sono scritti rigorosamente in minuscolo.
Se parliamo di linguaggi di programmazione, di norma fanno distinzione tra maiuscole e minuscole, quindi le maiuscole vengono utilizzate solo dove necessario.
Virgolette singole e doppie
Le virgolette doppie sono quasi sempre utilizzate. Quando il codice JS viene iniettato in una pagina HTML, può verificarsi una situazione in cui sono richiesti due tipi di virgolette:
In questo esempio, l'attributo html è racchiuso tra virgolette doppie e le virgolette singole sono già utilizzate all'interno del codice js. È impossibile utilizzare un solo tipo.
Pertanto, la regola per le virgolette in HTML e CSS è semplice: le virgolette principali sono doppie, e se non ce ne sono a sufficienza, le usiamo singole.
Tag di chiusura opzionali
È semplice: sempre impostato. Questo vale per i tag P, LI e altri.
Barra alla fine dei singoli tag
Non abbiamo mai impostato. Questo è un residuo del vecchio standard XHTML. Così sbagliato:
Così vero:
Ordine degli attributi nei tag
La classe è sempre elencata per prima. In realtà, durante l'analisi del layout, il tag e le sue classi vengono sempre esaminati e solo dopo il resto degli attributi.
Quegli attributi che possono essere singoli (come richiesto) sono meglio specificati per ultimi:
Le classi/attributi vuoti devono essere rimossi.
Formattazione del codice CSS
La classe viene posizionata su una riga separata e apre un blocco di proprietà ((). Uno spazio viene inserito dopo i due punti della proprietà. Ogni proprietà viene posizionata su una riga e termina sempre con un punto e virgola (;).
T-label (colore: bianco; sfondo: blu; dimensione del carattere: .75rem; riempimento: 1px 10px; raggio del bordo: 3px; )
Se vengono specificate più classi contemporaneamente, vengono posizionate su righe separate:
Articolo, a lato, piè di pagina, intestazione, nav, sezione ( display: block; )
Se la classe è breve e consiste in una proprietà, può essere posizionata su una riga:
W100-max (larghezza massima: 100%; ) .w-hide ( display: nessuno; ) .w-auto (larghezza: auto; )
A zero, le unità di misura non vengono scritte (dove non importa), invece di 0px, dovresti semplicemente specificare 0 .
Per i numeri frazionari con zero, è meglio specificare .8em invece di 0.8em . Tuttavia, questa condizione non è obbligatoria e puoi usare qualsiasi opzione, l'importante è che ci sia uniformità almeno a livello di un file css.
Se la proprietà supporta l'abbreviazione, può essere utilizzata, ad esempio, al posto di margin: 0 20px 0 20px; puoi specificare margine: 0 20px;
Se è possibile ridurre il valore del colore, è possibile farlo, ad esempio, anziché #FFAA88, specificare #FA8 . Il punto importante qui è che spesso un tale colore non viene digitato manualmente, ma copiato dai programmi delle pipette. Di solito usano un record completo di 6 cifre. Inoltre, alcuni programmi restituiscono lettere minuscole, mentre altri restituiscono lettere maiuscole: #FFAA88 o #ffaa88 . Pertanto, qualsiasi opzione è adatta per impostare il colore. Ogni volta che si cambia manualmente il caso delle lettere è stupidità.
I nomi alfabetici dei colori dovrebbero essere usati con cautela e al meglio solo durante la fase di prototipazione. Nel codice risultante, è meglio sostituirli con valori esadecimali, ad esempio, invece di color: red; devi specificare il colore: #F00; . Questo approccio ti consentirà di cambiare il colore direttamente in un editor di codice come Notepad++ (reagisce al simbolo #).
L'ordine delle proprietà CSS può essere qualsiasi. Può essere nell'ordine di addizione, può essere raggruppato per scopo funzionale. Tecnicamente, l'ordine può essere qualsiasi, quindi non ci sono regole qui.
Dovrebbe essere chiaro che la formattazione del codice CSS è pura convenzione. In realtà tale codice verrà compresso e minimizzato dal compilatore Sass. Se è necessario formattarlo per la visualizzazione, nessuno sano di mente lo farà manualmente: ci sono dozzine di servizi online per una bella formattazione del codice con qualsiasi impostazione. Pertanto, la formattazione CSS è richiesta solo in fase di sviluppo.
L'allineamento del testo determina l'aspetto e l'orientamento dei bordi del paragrafo e può essere a sinistra, a destra, al centro o giustificato. In tavola. 1 mostra le opzioni di allineamento del blocco di testo.
| Allineamento a sinistra | Allineamento corretto | Allineamento al centro | Giustificare |
|---|---|---|---|
| Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. | Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. |
L'opzione più comune è allineata a sinistra, in cui il testo sinistro viene spostato sul bordo mentre il testo destro rimane frastagliato. L'allineamento a destra e al centro viene utilizzato principalmente nelle intestazioni e nei sottotitoli. Va tenuto presente che quando si utilizza la giustificazione nel testo, possono apparire ampi intervalli tra le parole, il che non è molto bello.
Il tag paragrafo viene solitamente utilizzato per impostare l'allineamento del testo.
Con l'attributo align, che specifica il metodo di allineamento. È anche consentito allineare un blocco di testo utilizzando il tag
| codice HTML | Descrizione |
|---|---|
| Aggiunge un nuovo paragrafo di testo, giustificato a sinistra per impostazione predefinita. I piccoli rientri verticali vengono aggiunti automaticamente prima e dopo il paragrafo. | |
Testo |
Allineamento al centro. |
Testo |
Allineamento a sinistra. |
Testo |
|
Testo |
Allineamento della larghezza. |
| Disabilita il ritorno a capo automatico della riga, anche se il testo è più largo della finestra del browser. | |
| Testo |
Consente al browser di interrompere la riga nella posizione specificata, anche se viene utilizzato il tag |
Testo
|
Allineamento al centro. |
Testo
|
Allineamento a sinistra. |
Testo
|
Allineamento corretto. |
Testo
|
Allineamento della larghezza. |
L'allineamento a sinistra degli elementi è impostato per impostazione predefinita, quindi non è necessario specificarlo nuovamente. Quindi align="left" può essere omesso.
Differenza tra paragrafo (tag
) e tag
L'attributo align è abbastanza versatile e può essere applicato non solo al corpo del testo, ma anche a titoli come
. L'esempio 1 mostra come impostare l'allineamento in questo caso.
Esempio 1: allineamento del testo
Come catturare un leone?
metodo di numerazione
Dividiamo il deserto in una serie di sezioni elementari, le cui dimensioni coincidono con le dimensioni complessive del leone, ma sono inferiori alle dimensioni della gabbia. Successivamente, con una semplice enumerazione, determiniamo l'area in cui si trova il leone, che porta automaticamente alla sua cattura.
metodo dicotomico
Dividiamo il deserto in due metà. In una parte c'è un leone, nell'altra non c'è. Prendiamo la metà in cui si trova il leone e la dividiamo nuovamente a metà. Quindi ripetiamo fino a quando il leone non viene catturato.
Il risultato dell'esempio è mostrato in Fig. uno.
Riso. 1. Allinea il testo a destra e a sinistra
In questo esempio, l'intestazione è allineata al centro della finestra del browser, il paragrafo selezionato è allineato a destra e il corpo del testo è allineato a sinistra.
Ami i tuoi CSS tanto quanto me? Se è così, allora, ovviamente, sforzati di assicurarti che non solo si comporti e si senta bene, ma abbia anche un bell'aspetto.
Spero che gli strumenti descritti di seguito aiuteranno il tuo codice ad avvicinarsi all'ideale.
1. Stile ordinato
Probabilmente il servizio più semplice presentato nella recensione.Lo strumento non ha molte funzionalità:
- Ordina le proprietà in ordine alfabetico
- Ordina i selettori in ordine alfabetico (se "Organizzazione sicura" è selezionato - questa opzione non è disponibile)
- Possibilità di scegliere lo stile di formattazione: multilinea o linea singola
- Può estrarre i file CSS inclusi con l'importazione nel file principale ed elaborarli spietatamente
- Puoi inviare il codice per l'elaborazione utilizzando: un campo di testo, caricando un file o specificando un collegamento al CSS
- Il risultato può essere preso sotto forma di codice CSS o caricare un file
2. Formatta CSS
Nonostante il suo aspetto formidabile, lo strumento si adatta perfettamente alle sue funzioni, di cui ha molte.
Puoi personalizzare molto:
- spaziatura / tabulazioni / newline,
- ordinamento delle proprietà e dei nomi dei selettori,
- convertire i nomi di proprietà e selettore in minuscolo, ecc.
3. Pulisci CSS
Uno strumento abbastanza potente che ci offre molte opportunità:
- Puoi copiare e incollare il CSS nel campo "CSS-Code" o come collegamento al file di stile
- Puoi ottenere il risultato come testo o in un file.
- Ci sono 4 tipi di formattazione del codice sorgente tra cui l'utente può scegliere: il codice può essere ottimizzato per la dimensione più piccola o, al contrario, per una migliore leggibilità. È possibile impostare un modello di formattazione nel campo “Modello personalizzato”
- In grado di combinare le regole, portare il record della proprietà in una forma breve
- Se necessario, rimuovi i commenti e le definizioni non valide
- Come i servizi sopra descritti, ordinerà volentieri tutto ciò che il tuo cuore desidera in ordine alfabetico e lo convertirà in lettere minuscole/maiuscole
UPD> Nei commenti hanno suggerito un link al gemello di questo servizio: CodeBeautifier . Il set di funzionalità è quasi identico a CleanCSS (il servizio funziona anche su CSSTidy).
4. ProCSSor
A mio parere sofisticato, il più conveniente di tutti presentato in questa recensione.
Il servizio incontra l'utente con un'interfaccia piacevole e tooltip molto visivi che consentono di capire rapidamente le impostazioni.
Come ogni estetista che si rispetti, ProCSsor accetterà il codice da noi nel campo di input, sotto forma di file o link. Invierà il risultato al browser e visualizzerà un collegamento per scaricare il file.
Lo strumento ha impostazioni sufficienti per soddisfare quasi tutti gli utenti, elencarli non ha molto senso: è meglio provarlo subito.
Una bella caratteristica del servizio è la possibilità di salvare le impostazioni in modo che la prossima volta puoi saltare il passaggio delle impostazioni e passare direttamente al processo di abbellimento.
Un'altra attrazione - ProCSsor fornisce un'API, la documentazione è reperibile qui:
Finora, abbiamo allineato solo gli elementi a sinistra. Più precisamente, non l'abbiamo fatto affatto e il browser stesso allinea gli elementi a sinistra per impostazione predefinita. Certo, sarebbe troppo noioso allineare tutto a sinistra. Pertanto, ci sono diversi modi per allinearsi al centro ea destra.
L'allineamento degli elementi è qualcosa che devi solo sapere quando . La prima cosa da fare è digitare la pagina più semplice.
C'era una volta un tag
Puoi anche aggiungere un'immagine centrata, passiamo anche alla riga successiva usando il tag
:
Intestazione di livello 1 centrata
Era un'etichetta
Per risolvere questo problema, gli sviluppatori hanno escogitato un modo universale per allineare gli elementi. HTML. Il metodo consiste nell'utilizzare i cosiddetti contenitori, che vengono creati utilizzando il tag Ora scriviamo lo stesso codice HTML, ma con l'uso dei contenitori, inoltre, allineiamoci non al centro, ma a destra. Come puoi vedere, tutto funziona. Ti consiglio di cambiare anche il valore dell'attributo " allineare" per esaminare altri tipi di allineamento del contenuto del contenitore. Un altro modo per allineare gli elementi HTML- queste sono tabelle, ma questo argomento merita una discussione a parte, quindi ne parleremo in uno dei seguenti articoli. Per ora, la tua pagina dovrebbe apparire così: Cordiali saluti, Mikhail Rusakov. PS Se vuoi saperne di più su HTML, quindi dai un'occhiata al mio corso gratuito con un esempio di creazione di un sito web su HTML:
Intestazione di livello 1 centrata
Intestazione di livello 1, allineata a destra
