CSS, come sviluppare siti in modo professionale?

introProgettata la struttura delle nostre pagine web, il passo successivo è quello di portare il design dalla bozza grafica al codice. I CSS (fogli di stile a cascata) rendono questo lavoro molto più semplice rispetto all’utilizzo del solo HTML (come avveniva agli albori di Internet). Ci sono però alcuni aspetti che è bene tenere a mente, per scrivere codice pulito e funzionale. Vuoi scoprire quali sono?

1. Evitare l’utilizzo di stili in linea

1_stili_in_linea
Una delle finalità principali dei fogli di stile è quella di separare il contenuto delle pagine web (le informazioni) dal modo in cui viene presentato. Separazione vuol dire poter modificare l’uno senza modificare l’altro e viceversa.
Gli stili in linea permettono di specificare lo stile direttamente all’interno dei tag HTML, ad esempio:

<p style="color:red; width:200px;">Questo è un paragrafo di prova</p>
<p>Questo è il secondo paragrafo di prova</p>

Come è ovvio, questo lega ogni proprietà al singolo tag. Nell’esempio precedente il secondo paragrafo verrà reso con gli stili di default del browser.

Se volessi rendere il primo paragrafo in blu, dovrei aprire il file html e modificarlo. Inoltre, se questo paragrafo fosse presente su più pagine, dovrei modificare ogni singolo file html.
Questi inconvenienti vengono risolti utilizzando un foglio di stile esterno, che viene caricato dalla pagina html con una dichiarazione del tipo:

<link rel="stylesheet" type="text/css" href="base.css" >

2. Utilizzare un solo foglio di stile esterno

2_stili_multipli

Una volta accertata la bontà di utilizzare un foglio di stile esterno, potresti essere tentato di utilizzarne più di uno, magari uno per le regole riguardanti il layout, uno per i colori, uno per la tipografia e così via (come tra l’altro consigliato da molti guru dei CSS). Il mio consiglio è: non farlo.

Anche se può sembrare una buona idea, nella realtà si rivela un incubo. La mente umana, infatti, permette in media di concentrarsi su cinque entità differenti. Coordinare gli stessi elementi su più fogli di stile diversi, passare da un documento all’altro, ricordarsi in quale documento è presente una determinata regola: questi sono solo alcuni degli inconvenienti che si possono riscontrare lavorando su fogli di stile multipli.

Ad esempio, potrei modificare la dimensione del testo, nel foglio di stile dedicato alla tipografia, per poi scoprire di dover modificare anche le dimensioni di un div, e allora aprire il foglio di stile dedicato al layout, effettuare la modifica e sperare di non dover modificare altro.

Questo discorso si può estendere anche all’utilizzo di fogli di stile specifici per Internet Explorer: spesso non è necessario, per il corretto utilizzo del sito, avere la riproduzione perfetta al pixel su tutti i browser. Perché allora introdurre un ulteriore livello di complessità? Però su questo argomento c’è in atto una vera e propria guerra di religione, quindi mi limito a specificare che questo è il mio pensiero, da adattare poi alla situazione contingente.

Ovviamente tutte queste considerazioni si riferiscono a siti relativamente “piccoli”: i siti di grosse aziende o i vari portali, necessitano di più fogli di stile per gestire le differenze fra le varie sezioni del sito.

3. Sviluppare contemporaneamente per tutti i browser

3_sviluppare_per_i_browsercomic
Questo è un punto molto importante: durante lo sviluppo di un sito web testa i tuoi progressi nel maggior numero di browser possibile. Infatti un errore molto diffuso, è quello di sviluppare per un solo browser, curando tutti i minimi dettagli, per poi scoprire che il layout è irriconoscibile negli altri, e dover cercare tra molte righe di codice le regole da modificare.

Il mio consiglio è quello di testare nei vari browser man mano che si completa una sezione, cercando di non scrivere molto codice tra un test e l’altro. In questo modo è molto più facile individuare l’eventuale regola da modificare in caso di errori.

Naturalmente il testing non deve essere effettuato su tutti i browser esistenti. Una ricerca preventiva sul segmento a cui si riferisce il sito può aiutarti nella scelta. Ad esempio, se stai sviluppando un sito che parla di tecnologia e internet, puoi aspettarti che tutti i visitatori abbiano un browser molto recente. Mentre se devi progettare un sito per la Pubblica Amministrazione, forse dovrai includere nel testing anche alcuni browser “datati”.

4. Separare gli stili dalla struttura

4_separare_struttura
Anche utilizzando i fogli di stile esterni è possibile commettere l’errore di legare troppo saldamente la presentazione con il contenuto. Prendiamo ad esempio il seguente markup:

<div id="container">
   <div id="branding">
      <h1>Business Co.</h1>
      <span>Soluzioni Perfette</span>
   </div>

   <ul id="actions">
      <li>
         <h2>Status Clienti</h2>
         <p>Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Sed tincidunt ante ut ligula. Nam egestas, erat vitae pharetra tempor, tortor orci ultrices nisi, ut placerat, malesuada id, metus</p>
         <a href="#">Continua..</a>
      </li>

Per rendere l’elemento <strong> in verde, potrei scrivere la seguente regola:

div#container ul#actions li p > strong {
   color:green;
}

Rinominando l’id “container” in “contenitore” questa regola non funzionerebbe più! Però la modifica non ha interessato né l’elemento <strong> né il suo diretto genitore, ma un “antenato”. Questo si può evitare scrivendo delle regole “locali”, ovvero che interessino gli elementi in gruppi adiacenti, ad esempio:

#actions p > strong {
   color:green;
}

In questo modo, eventuali modifiche all’html che non interessino direttamente gli elementi, non influenzeranno minimamente il loro aspetto!

Conclusioni

In conclusione possiamo affermare che: è importante sviluppare il codice basandosi su un’attenta progettazione. Molti dimenticano che la corretta traduzione di “design” è progettazione: dunque webdesign significa progettare per il web.

Molto spesso il codice dei nostri siti è poco manutenibile ed effettuare delle modifiche costa molto in termini di tempo e di denaro.

La prossima volta prima di consegnare un progetto, domandati: “Quanto sarebbe complicato effettuare delle modifiche? Riuscirei a farle senza perderci la testa?”.

Credit: Immagine al punto 3 by John Martz

Tag: ,

L'autore

Appassionato di web design, si diletta a creare dei layout (X)HTML+CSS. È un maniaco del codice pulito e ordinato, il tipo di persona che vi ritrovate in casa a raddrizzarvi i quadri appesi alla parete. Ha deciso che diventerà un web designer con la “doppia vvu” maiuscola, e trascorre intere nottate sveglio per realizzare il suo sogno.

Sito web dell'autore | Altri articoli scritti da

Articoli correlati

Potresti essere interessato anche ai seguenti articoli:

5 commenti

Trackback e pingback

  1. CSS, come sviluppare siti in modo professionale? | Your …
    [...] approfondire consulta la fonte:  CSS, come sviluppare siti in modo professionale? | Your … Articoli correlati: SEO: cosa NON…
  2. CSS, come sviluppare siti in modo professionale?
    [...] CSS, come sviluppare siti in modo professionale? venerdì 10 luglio 2009 | Tratto da: https://www.yourinspirationweb.com/ [...]
  3. CSS, come sviluppare siti in modo professionale?
    [...] CSS, come sviluppare siti in modo professionale? Articoli correlati: CSS, come sviluppare siti in modo professionale? | Your [...]