Sovrascrittura delle classi CSS Bootstrap

Question

Sovrascrittura delle classi CSS Bootstrap

#1 da (2 voti)
#2 da (2 voti)
#3 da (1 voti)
#4 da (0 voti)

0

Abbiamo un'app Angular JS per la quale utilizziamo i CSS Bootstrap. Attualmente stiamo usando puro Bootstrap con i file CSS predefiniti. Tuttavia, prima o poi è necessario modellare l'app nella progettazione aziendale della mia azienda. Qual è il modo migliore / consigliato per farlo?

Abbiamo già pensato alle seguenti possibilità:

1 # Sovrascrivi semplicemente le classi Bootstrap:

.btn {
    background-color: blue
}

2 # Modifica i file Bootst LESS e compila Bootstrap.

3 # Introdurre le proprie classi CSS per sovrascrivere Bootstrap:

<button class="btn my-btn">

.my-btn {
   background-color: blue
}

Personalmente preferirei # 1 come sembra facile. Non abbiamo quasi nessuna esperienza con LESS, quindi non preferiamo il # 2. Tuttavia, il mio collega preferisce il n.3 perché non vuole toccare le lezioni di Bootstrap. Ma la mia opinione è che dovremmo cancellare l'HTML con le nostre classi mentre stiamo ancora utilizzando le classi Bootstrap.

C'è qualche raccomandazione?

css bootstrap

posta Thomas Uhrig 02.02.2016 - 09:03

fonte

4 risposte

Leggi altre domande sui tag css bootstrap

Come convincere gli sviluppatori a correggere i test non funzionanti Valore dell'iniezione di dipendenza in MVC con controller skinny

score 2 · Answer 1

Non esiste un modo "migliore" per farlo, in quanto dipende dal tuo contesto. C'è un modo consigliato per farlo, però.

Tieni presente che se vai con 1) o 3) finirai in base all'ordine in cui i tuoi file CSS vengono importati, il che potrebbe creare problemi in un grande sistema.

Il modo ufficiale per farlo è usare MENO e modificare i colori usati dal framework. Non hai nemmeno bisogno di aggiungerlo al tuo flusso di lavoro, in quanto forniscono un personalizzatore molto utile - puoi modificarlo online e scaricare il risultati. C'è anche un config.json per reimportarlo sul customizer se hai bisogno di ulteriori modifiche.

score 2 · Answer 2

Il numero 1 è molto semplice, ma provate a immaginare cosa accadrà se la società decide di aggiornare le librerie in questo progetto?

Io voto per il n. 3, perché è davvero fastidioso quando qualcosa non funziona come ci si aspetta che funzioni (in realtà ciò che ci si aspetta da librerie e framework, giusto?).

score 1 · Answer 3

Penso che # 2 sia tecnicamente il metodo preferito. Offrono anche una pagina web che ti consente di specificare una tonnellata delle costanti che potresti voler personalizzare, quindi scaricare un Bootstrap "pulito". css.

D'altra parte, # 3 ha un certo fascino per due motivi:

Completa l'isolamento dai file Bootstrap di base, il che significa che potresti consumare qualsiasi nuova versione senza preoccuparti troppo della sovrascrittura delle tue estensioni.
Possibilità di utilizzare un CDN per servire i file Bootstrap principali indipendentemente dalle tue classi estese .

Detto questo, non lo farei # 3. Farei # 4 (sto aggiungendo questo mentre scrivo) che è leggermente diverso:

Include il file base Bootstrap.css originale. Utilizza un CDN se lo desideri.
Aggiungi il tuo file .css che contiene selettori CSS più specifici dei selettori Bootstrap originali, in modo che gli stili estesi abbiano la precedenza durante le cascate.

Ad esempio, se la definizione Bootstrap originale ha il seguente aspetto:

.btn {
    background-color: blue
}

... quindi dovresti aggiungere una nuova definizione simile a questa:

.custom .btn {
    background-color: red
}

Ciò significa che il selettore personalizzato non verrà attivato a meno che non si tratti di un elemento incorporato in un elemento padre con una classe di "personalizzato".

Quindi, in ciascuna delle tue pagine, in cui desideri utilizzare gli stili personalizzati e non gli stili di base, aggiungi questo al tuo elemento del corpo:

<BODY class="custom">

Poiché .custom .btn è più specifico di .custom , la logica CSS a cascata sceglierà sempre il tuo stile rispetto allo stile di base. Quindi puoi avere stili personalizzati senza modificare i file Bootstrap e senza preoccuparti dell'ordine in cui vengono caricati.

score 0 · Answer 4

Essendo pratico, come web dev devi mantenere gli originali commentati e poi definirti. Se sei sicuro che il tuo capo aggiornerà sicuramente le librerie, allora sì, sicuro, definisci i css esterni. Altrimenti, basta commentare quello più vecchio e fai da te quindi:).