Modifica del tema della pagina Web

Question

So che questo non è collegato alla domanda di codifica, ma prima di iniziare a lavorare sullo scenario mi piacerebbe avere una guida.

Lo scenario è di dare la possibilità di cambiare il tema della pagina. Quello che ho deciso è, dare classe comune per più elementi come

• tag h1 per tutti i principali titoli della pagina
• classe .image per tutte le immagini della pagina
• classe per il tag p per il contenuto della pagina
• e così via ....

Quindi creerò più fogli di stile con questi nomi di classi con colori diversi.

Ma la difficoltà viene dal posizionamento di ogni elemento. Ho pensato di dare uno stile in linea a ciascun elemento per definire gli oggetti correlati alla posizione. Per esempio

.image {border:grey solid 1px /*this border color will be different in each stylesheet*/} 

<div class="image" style="float:right; margin:6px"><img src="" /> </div> 

Così come questo tutti gli altri elementi sarà avere CSS in linea per lo scopo allineamento.

Pensi che questo sia il modo migliore per raggiungere lo scenario tematico ??

PS - L'utente ha accesso per personalizzare il tema. (Stiamo dando il pannello di modifica). Questa non è in realtà una pagina web, è un modulo di prodotto (proprio come il modo in cui cambiamo il colore dei grafici e dei grafici di Powepont).

Answer 1

Non proprio ... Credo che si dovrebbe caricare un predefinito tema "vuoto' per gli stili di base e gli stili generali. Than caricare un altro foglio di stile a seconda di quale tema l'utente ha scelto. In quel tema si specifica il tema stili specifico d'(come il border-color dal vostro esempio).

Answer 2

È possibile utilizzare LESS o SaSS.

opere MENO sia sul lato server e lato client