» CSS: regole e consigli utili

La realtà riconosciuta del Web 2.0 ha scisso definitivamente la rappresentazione grafica di una pagina dal codice dietro le quinte, un divario ormai necessario data la complessità degli attuali siti, che puntano sempre più sull’interazione con l’utente e sul dinamismo in generale.
La figura del web designer si allontana sempre più da quella del grafico esperto e si avvicina alla natura programmatica del web developer, dovendo anche comprendere le necessità di chi sviluppa, cosa sviluppa e soprattutto per chi.
Il CSS (Cascading Style Sheet), nato come ausilio del grafico per colorare facilmente i testi all’interno delle pagine, si è evoluto in un potente strumento di rendering visuale via codice, semplificando la vita al grafico web, che non è più costretto a limitare la propria creatività dentro gli stretti bordi delle tabelle, e al programmatore, che non deve più preoccuparsi di pericolose modifiche strutturali dovute ad output non precalcolati.
E questa figura di mezzo, un po’ creativa, un po’ sviluppatrice, prende sempre più consistenza e spessore: ecco quindi qualche consiglio sul CSS per i web designer esperti e non.

• Usate le classi multiple

  L’attributo class di un elemento HTML può avere più di un valore, le cosidette classi multiple, aggiungendo i successivi separandoli con uno spazio.
  Questa utile tecnica permette di applicare più stili allo stesso elemento e quindi definire classi generali che poi distinguiamo con classi specifiche, scrivendo quindi meno righe di codice e rendendo il lavoro più semplice da capire, modificare e riadattare.

  Un elemento con più di una classe appare così:

  <a class=’class1 class2′ href=’/'>link</a>

  Questa tecnica potrebbe creare conflitti nel caso in cui entrambe le classi definiscano la stessa proprietà:

  .class1 {color: #fff;}
  .class2 {color: #000;}

  in casi del genere il browser renderizza la prima classe letta nel codice quindi il colore del link sarà bianco (#fff).

• Usate nomi che si riferiscono all’oggetto, non alla sua visualizzazione

  Per esperienza vi consiglio di evitare nomi che facciano riferimento al colore o allo stile che si vuole rappresentare e di chiamare le vostre classi usando termini che ricordino a quale parte del template vi state riferendo.
  Nomi come top_menu o left_menu esprimono chiaramente la natura degli elementi o zone di cui modifichiamo la visualizzazione e oltretutto possono essere facilmente riadattati ad altri template.

• Ordine e disciplina

  Impostate il foglio di stile in questo modo: prima gli elementi HTML che costituiscono l’aspetto più generale, poi gli ID e le CLASSI; se lo ritenete opportuno usate anche dei commenti per distinguere le zone, sia sulla pagina HTML che sul CSS.
  Sempre per migliorare la leggibilità del foglio di stile e perdere meno tempo nella ricerca delle classi definite, cercate di seguire lo stesso ordine di elementi della pagina HTML.

• Usate tecniche di CSS reset

  Per perdere meno tempo possibile ad adattare il CSS sui diversi browser azzerate i valori impostati di default tramite le tecniche di CSS Reset, di cui trovate vari esempi in questa pagina: CSS Reset: il tuo stile uguale su tutti i browser.

• Usate al massimo gli elementi HTML

  Un buon webdesigner conosce il codice HTML meglio della propria lingua, per cui cercate di valorizzare e usare al massimo gli elementi HTML presenti nella pagina.
  Invece di creare tante classi diverse e specifiche, definite le proprietà direttamente per gli elementi che si presentanto più spesso nella pagina come il bold (B), l’anchor (A), i paragrafi (P), i list item (LI).
  Il CSS non è solo DIV e così facendo renderete anche il codice più leggibile e leggero per il motore di ricerca.

• Codice pulito

  Il codice deve essere essenzialmente quello che occorre, ogni proprietà definita deve risultare utile e necessaria.
  Per ottenere un codice esemplare è sconsigliabile ricorrere agli IDE più famosi, che sporcano inutilmente il codice e spesso lo rendono poco compatibile, e quindi è preferibile impiegare strumenti che aiutano senza essere invasivi.
  Personalmente vi consiglio Notepad++, editor di testo leggero, semplice da usare, pieno di plug-in scaricabili e funzioni utili: supporta e suggerisce tantissimi linguaggi, evidenza il codice (code highlighting), dispone di ottimi shortcuts da tastiera per velocizzare il lavoro: consigliatissimo il download!

Ritieni questo post utile o interessante?
Condividi e Segnala

Leggi anche:

• CSS Reset: il tuo stile uguale su tutti i browser
  Il classico problema del webdesigner è mantenere la coerenza del proprio webdesign CSS sulla moltitudine di browser in circolazione: il rendering della pagina viene più che altro influenzato dalle impostazioni di default del programma, per questo è nata l'esigenza della tecnica denominata CSS Reset. Solitamente basta inserire questa riga al nostro CSS in primissima posizione per [...]
• Web Gallery e Web Design
  Le migliori opere di web design in CSS e Flash raccolte in questa selezione di web gallery. In quasi ognuno di questi portali potrete segnalare il vostro o i vostri siti, aumentando così visite e possibilità di lavoro. E se conoscete web gallery meritevoli di stare tra quelle qui sotto menzionate lasciate pure la segnalazione nei commenti. Best [...]
• CSS gallery per template CSS
  Una selezione delle migliori CSS Gallery del web, usateli come ispirazione per i vostri nuovi template in CSS e sfida per le creazioni di webdesign più elaborate. E come al solito la selezione è aperta ai vostri consigli e suggerimenti..se conoscete gallery CSS non presenti lasciate pure un commento. CSS Tea Template gallery in CSS divisi per categoria, [...]