CSS Shorthand vs. Longhand - When to Use Which

Stenografia e Longhand: uno è conciso e l'altro preciso. Uno è venuto fuori per mancanza per brevità, mentre l'altro è fermo per preservare la chiarezza. In ogni caso, hanno i loro scopi, pro e contro, per così dire.

Questo post farà luce su entrambe le notazioni abbreviazioni CSS e notazioni a mano lunga, mentre si conclude che è meglio usare per quale situazione.

Che cos'è la proprietà di stenografia?

Proprietà stenografica è una proprietà che prende i valori per altri set di proprietà CSS. Ad esempio, possiamo assegnare un valore per larghezza del bordo, stile del bordo e colore del bordo usando il confine proprietà da solo.

Fondamentalmente,

 bordo: 1px blu fisso; 

equivale a:

 border-width: 1px; border-style: solido; border-color: blu;

Con questo, non dobbiamo dichiarare separatamente i singoli valori di proprietà (che è ridondante, che richiede tempo e spazio). Inoltre, ripristina le proprietà di sinistra nella dichiarazione, qualcosa che può essere sfruttato.

Come funziona?

Come accennato in precedenza, scriviamo una serie di altri valori di proprietà in stenografia, l'ordine non importa se tutti i valori di proprietà nella stenografia sono di un tipo diverso come in confine. Per proprietà con tipi di valori simili come margine, l'ordine conta. In caso di dubbio, ricorda in senso orario!

Ora, cosa succede se perdiamo una proprietà o due nella dichiarazione? Nell'esempio sopra, diciamo che abbiamo ignorato stile del bordo.

 bordo: 1px blu; 

Non saremo più in grado di vedere i confini, non perché la proprietà stenografica non ha funzionato, ma perché il stile del bordo che abbiamo lasciato fuori, ha ottenuto il valore predefinito nessuna. Ecco come è stata resa la proprietà stenografica.

 bordo: 1px nessuno blu; 

Ora lasciamo cadere 1px per larghezza del bordo e tieni gli altri due:

 bordo: blu solido;

Saremo in grado di vedere i bordi, solo con una larghezza più spessa e questo perché il larghezza del bordo la proprietà ha il valore predefinito medio.

 bordo: blu medio solido; 

Questo lo conclude per noi quando un valore della proprietà viene omesso in una dichiarazione stenografica, quella proprietà assume il suo valore predefinito (anche se deve sovrascrivere qualsiasi valore precedentemente assegnato per lo stesso).

Se c'è border-width: 1px; per un elemento da qualche parte prima bordo: blu solido; per lo stesso, la larghezza del bordo sarà medio (il valore predefinito), no 1px.

Un'altra cosa che vale la pena menzionare è quella non possiamo usare valori come ereditare, iniziale o unset, che sono disponibili per tutte le proprietà CSS, in notazione abbreviata. Se li usiamo, il browser non sarà in grado di sapere esattamente quale proprietà tale valore dovrebbe rappresentare nella stenografia - l'intera dichiarazione verrà abbandonata.

Il tutti proprietà

C'è una proprietà abbreviata CSS che può imposta il valore per tutte le proprietà CSS. Valori CSS-wide ereditare, iniziale e unset sono applicabili a tutte le proprietà e quindi questi sono gli unici valori accettati dal tutti proprietà.

 div tutto: iniziale

Questo renderà il div elemento ditch TUTTI i valori delle proprietà CSS che aveva e reimpostare il valore predefinito in ognuno di essi.

⚠ Avviso

Non abusiamo del tutti proprietà. La necessità potrebbe sorgere solo in circostanze molto rare, quando non siamo in grado di toccare alcun codice CSS precedente di un elemento che desideriamo applicare questa proprietà a.

Nota: Proprietà CSS colore prende il valore esadecimale con la notazione abbreviata se i due numeri di valore esadecimale in ogni canale di colore sono gli stessi. Per esempio, sfondo: # 445599; è uguale a sfondo: # 459;.

Qual è la proprietà di longhand?

Il proprietà individuali che possono essere inclusi in una proprietà stenografica sono chiamati proprietà longhand. Alcuni esempi sono; immagine di sfondo, margin-left, Animazione di durata, eccetera.

Perché dovremmo usarlo?

Anche se le alternative di stenografia sono a portata di mano, hanno uno svantaggio. Ricorda all'inizio che abbiamo visto come la stenografia ha la precedenza su tutte le proprietà escluse con i loro valori predefiniti? Questo può essere un problema se il reset non è desiderato.

Prendi il font proprietà abbreviata per esempio. Usiamolo nel h4 elemento (che ha uno stile browser predefinito font-weight: bold)

 font: 20px "corriere nuovo"; 

Nel codice stenografico sopra, nessun valore è lì per il font-weight proprietà, quindi il font-weight: bold(stile predefinito del browser) verrà sostituito dal valore predefinito font-weight: normal causando il h4 elemento per perdere il suo stile audace, che potrebbe non essere stato progettato.

Quindi, per l'esempio sopra, due semplici proprietà a mano lunga, dimensione del font e famiglia di font sono perfetti.

Inoltre, usando la stenografia per assegnare solo uno o due valori di proprietà non è molto utile. Perché dare al browser un lavoro in più per interpretare ogni singola proprietà (comprese quelle lasciate fuori) nella stenografia, quando è necessario solo uno per funzionare?

A parte la produzione, durante la fase di sviluppo, alcuni sviluppatori (in particolare i principianti) possono trovare che usare la notazione a mano lunga è molto più facile da utilizzare rispetto alla stenografia per migliore leggibilità e chiarezza.

Conclusione

Oggigiorno con la possibilità di codificare velocemente (con l'aiuto di strumenti come Emmet) e minification, non è necessaria un'alta affidabilità sulla stenografia, ma allo stesso tempo è molto logico digitare margin: 0;. Il contesto in cui preferiamo le nostre notazioni CSS varierà e tutto ciò che dobbiamo fare è capire quale notazione funzionerà meglio per noi e quando.