WEB

Come scrivere CSS – parte 1

In questo post vogliamo condividere con ... leggi a seguire ->

css-realizzazione-siti-web-treviso

In questo post vogliamo condividere con voi alcune utili convenzioni e best practice raccomandate dalla comunità CSS. Alcuni suggerimenti sono per i principianti, altri per più esperti.

Attenzione al margine di collasso
A differenza della maggior parte delle altre proprietà, i margini verticali collassano quando si incontrano. Ciò significa che quando il margine inferiore di un elemento tocca il margine superiore di un altro, solo il più grande dei due rimane. Alcune strutture di Boostrap 4 sono state ridisegnate in base a questo comportamento.

Utilizzare Flexbox per i layout
Il modello di flexbox esiste per una ragione. Floats e blocchi inline funzionano, ma sono principalmente strumenti per lo styling di documenti, non di siti Web. Flexbox  è stato specificamente progettato per semplificare la creazione di qualsiasi layout . L’insieme di proprietà fornite con il modello flexbox offre agli sviluppatori una grande flessibilità . Il supporto dei browser al giorno d’oggi è quasi perfetto. Se però abbiamo la necessità di mantenere la compatibilità con i vecchi browsers ( es. IE9 ) meglio optare per floats e blocchi inline.

Fai un reset CSS
Sebbene la situazione sia notevolmente migliorata nel corso degli anni, ci sono ancora molte varianti nel modo in cui si comportano i diversi browsers. Il modo migliore per risolvere questo problema consiste nell’applicare un reset CSS che imposta valori predefiniti per tutti gli elementi; consentendo di iniziare a lavorare su un foglio di stile pulito. Ci sono librerie come normalize.css che lo fanno molto bene. Se non vuoi usare una libreria, puoi fare un semplice CSS  reset in questo modo:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
 }

Border-box per tutti
La maggior parte dei principianti non conosce la proprietà di dimensionamento del box.

content-box (default) – Quando impostiamo una larghezza / altezza su un elemento, questa è solo la dimensione per il suo contenuto. Per esempio se un <div> ha una larghezza di 100 e un padding di 10, il nostro elemento occuperà 120 pixel (100 + 2 * 10).

border-box – Il padding e il bordo sono inclusi in larghezza / altezza. Il nostro <div> con la proprietà border-box; avrà una larghezza di 100 pixel, indipendentemente dall’aggiunta di padding o bordi.
Impostare border-box su tutti gli elementi rende molto più semplice operare con i css.

Kenji Agency : realizzazione  siti web a Treviso

Share this Post:

Articoli correlati