Buone pratiche per CSS responsivi

[chumkiu]

Ciao a tutti,
piccoli consigli:

devo rifare un portale, programmato a moduli, in modo altamente responsivo. Ogni modulo ha il suo css e un comportamento particolare in caso di visualizzazione su diversi dispositivi.

Qualcuno ha qualche link, esperienze su come affrontare questo problema in modo ottimale?
Sono orientato ad utilizzare less (o sass) come moduli di Gruntjs in modo base (sfruttando variabili, mixin e sintassi annidata) e non troppo avanzato (non voglio avere sintassi poco intellegibili che tra 2 anni non capirei più o saranno cambiate nuovamente).

Un primo approccio al problema mi ha creato altri problemi e dopo un po' di riflessioni ho più domande di prima e meno risposte.

Sicuramente la struttura HMVC sarà (perché è già così) questa:

_lib
_module
\_module1
  \_php
  \_css
  \_js
\_module2
  \_php
  \_css
  \_js
---

Primo bivio:
- uso files css differenti per dispositivi differenti (con dentro comunque le mediaqueries perché i files saranno tutti concatenati e serviti) magari prevedendo uno generale (con i colori, font ecc)

module1
\_ css
  \_ module1.css
  \_ module1_1024.css
  \_ module1_800.css
  \_ module1_400.css

oppure

uso un solo file css per modulo con dentro le varie mediaquery

module1
\_ css
  \_ module1.css

Il primo caso è apparentemente più semplice. Ma ho già avuto esperienze con strutture di questo tipo e non sono state idilliache: troppa ridondanza e quando si modifica una cosa, modificarla in tutti i files è problematico (molte volte modifichi il file sbagliato, altre volte te ne dimentichi ecc).
Darebbe il vantaggio che mi lascerebbe la libertà di decidere se servire un file mobile.css ai dispositivi mobile, con risparmio di banda, calcolo da parte del dispositivo ecc. (cosa che non sono sicuro di volere, ma non lo so ancora).

Il secondo invece si presta lo stesso a una certa ridondanza, che però può essere ottimizzata. Una formula non l'ho ancora trovata ma ho viso che ci sono possibilità. per esempio

.module1 {    

    background-color: #afafaf;    
    color: #000;    width: 1000px;

    @media (max-width: 1186px) { 
       width: 900px;    
    }
    @media (max-width: 800px) {
        width: 600px;
    }
    @media (max-width: 400px) {
        width: 200px;
    }
    h1 {
        color:#f00;
        span {
            @media (max-width: 1186px) {
                width: 200px;
            }            @media (max-width: 800px) {
                width: 100px;
            }
            @media (max-width: 400px) {
                width: 50px;
            }
        }
    }
} 

Potrei anche fare un mixin che stampa le varie mediaqueries nelle diverse risoluzioni. Tipo:

.responsiveWidth(900,600,200) 

Ma ho paura che il risultato finale (cioé la compilazione) non sarà ottimizzato, in quanto una cosa del genere (comodissima)

.responsiveWidth(900,600,200)
.responsiveMargin(10,7,2) 

produrrebbe

@media (max-width: 1186px) {
    width: 900px;
}
@media (max-width: 800px) {
    width: 600px;
}
@media (max-width: 400px) {
    width: 200px;
}
@media (max-width: 1186px) {
    margin: 10px;
}
@media (max-width: 800px) {
    margin: 7px;
}
@media (max-width: 400px) {
    margin: 2px;
} 

Invece che un meno verbosa

@media (max-width: 1186px) {
        width: 900px;    
        margin: 10px;
}
@media (max-width: 800px) {
        width: 600px;
        margin: 7px;
}
@media (max-width: 400px) {
        width: 200px;
        margin: 2px;
} 

Voi avete esperienze? Avete trovato una formula migliore?