La tua domanda è un po 'ampia e motivata "Qual è il modo migliore per gestire l'intera cosa CSS?" .
È una bella domanda, ma non credo che ci sia una sola risposta. Sento che alla fine la domanda è, "Come lavori con Bootstrap?"
Bootstrap è un framework front-end. I framework generalmente includono molte funzionalità ma, per loro natura, sono una struttura su cui basare .
Dividerò la mia risposta in due parti, ciascuna per uno scenario diverso. Potresti essere:
- Un sito web di piccole e medie imprese o hobby con poca personalizzazione richiesta.
- Una grande azienda o un sito Web complesso che richiede notevoli modifiche.
piccola scala
Esempi: AussieOutages , {less}
Potresti facilmente scappare con un file CSS o due per gestire tutte queste cose. Se usi principalmente le funzionalità Bootstrap integrate, ma a volte devi ridimensionare o ristrutturare leggermente un componente, crea un nuovo file CSS e aggiungi i requisiti.
Personalmente, quando utilizzo Bootstrap per l'uso di modifica della luce, potrei usare un file CSS chiamato bootstrap-mod.css o bootstrap-custom.css .
Lo scopo di questo file è di modificare direttamente i componenti di bootstrap in modo che li abbia tutti in una posizione centrale.
In un altro file CSS potrei avere classi i componenti di bootstrap nativi di complimento senza effettivamente sovrascrivere nulla. Ad esempio, potrei creare una classe CSS chiamata btn-flashy . La nuova classe non sostituisce nessuno stile CSS, ma forse aggiunge un nuovo effetto hover per far lampeggiare un pulsante.
Su larga scala
Questo è per i siti Web che utilizzano Bootstrap e apportano pesanti modifiche nella misura in cui potrebbero non essere riconoscibili come utenti Bootstrap alla visualizzazione iniziale.
Qui accederai alla sorgente Bootstrap e utilizzerai strumenti come Grunt e linguaggi di estensione CSS come {less} .
How can I use the same element on one page and another with different attributes (height, width, color). Should I use in-style CSS for things I want to change or should I keep on making different .CSS files for every page.
Lo stile in linea è disapprovato. Usa i file CSS. Una pagina può avere il proprio file CSS, ma potrebbe essere eccessivo. Cerca invece di dare un nome alle classi in modo significativo. Ad esempio, se devi modificare altezze, larghezze e colori per un componente, segui l'esempio di Bootstrap utilizzando my-component-lg , my-component-wide e my-component-bright ecc.