Scrivere codice CSS riusabile

Da circa tre mesi ho terminato un progetto che mi ha visto impegnato sul fronte client. In questo progetto ho imparato l'importanza di scrivere codice CSS riusabile. Infatti, in un'email che ho ricevuto dal responsabile del progetto, mi veniva segnalato il fatto che, pur essendo il codice CSS ottimo, avevo scritto degli stili troppo legati alle singole pagine, con una visione più statica che dinamica del progetto.

In molte sezioni il codice CSS è ridondante, nel senso che non sfrutta al meglio la cascata ma fa uso del solo contesto per diversificare gli stili. Per esempio, nel CMS dei prodotti ho dei box flottati che contengono delle immagini, alcuni a sinistra, altri a destra. L'errore è stato quello di scrivere degli stili legati al solo CMS e che non possono essere esportati in altre parti del sito. Meglio sarebbe stato se avessi specificato prima due classi generiche come queste:

.alignleft {
  float: left;
}
.alignright {
  float: right;
}

e quindi, usando la cascata, usare degli stili cumulativi in questo modo:

#cms .alignleft {
  width: 200px;
  margin-right: 5px;
}
#cms .alignright {
  width: 150px;
  margin-left: 5px;
}

Così facendo, le due classi di base possono essere riusate in altre parti del sito ed essere estese sfruttando la cascata e l'ereditarietà . Certo, è chiaro che bisogna evitare la "classite", ma fra tutti i selettori CSS le classi sono gli unici che permettono di avere una certa flessibilità  e riusabilità . Non mi sembra pratico abusare al contrario degli ID, come ho fatto io in questo progetto, perché il rischio è quello di avere una struttura rigida e poco adatta alla dinamicità  di un sito complesso come un e-commerce.