Riassunto di un framework CSS in un'applicazione Web aziendale

0

Il nostro team sta tentando di "modernizzare" una vecchia applicazione Web Form ASP.NET. Un aspetto che vogliamo migliorare è il suo stile visivo poiché sembra molto datato dagli standard odierni. Inoltre, il suo foglio di stile CSS esistente è un abominio e sarebbe più facile buttarlo fuori e ricominciare da capo. Purtroppo nessuno di noi è un esperto di CSS, quindi stiamo pensando di andare con un framework CSS come Bootstrap per semplicità.

La mia preoccupazione è usare direttamente le classi CSS Bootstrap all'interno delle pagine dell'applicazione. Tieni presente che questa è un'applicazione di livello enterprise e ha molte, molte pagine, quindi l'utilizzo della classe Bootstrap sarebbe prolifico. È una cattiva idea? Dovremmo, invece, creare un'astrazione oltre a Bootstrap? Questo è possibile anche con i CSS e / o ne vale la pena? La mia sensazione è che, certo, anche se abbiamo creato un'astrazione per Bootstrap, probabilmente non potremmo semplicemente sostituirlo con qualche altro framework più tardi. Quindi quale sarebbe il punto?

    
posta Jake Shakesworth 25.11.2018 - 20:01
fonte

1 risposta

1

Mentre i CSS ti consentono di disaccoppiare la struttura HTML e il suo aspetto in una certa misura, non sarai mai in grado di separarli completamente. Una dipendenza da qualcosa come Bootstrap non è qualcosa su cui puoi ragionevolmente astrarre. Tuttavia, un framework come Bootstrap ti aiuterà a ottenere un design ragionevole senza dover scrivere alcun CSS, quindi utilizzarlo potrebbe valerne la pena - dipendenza o meno.

Invece di iniziare completamente da zero, ti consiglio di identificare i componenti autosufficienti nelle tue pagine e di modificare i modelli HTML corrispondenti per utilizzare gli stili Bootstrap. Cioè, esegui la riprogettazione verso l'interno. Il motivo è che gli stili esistenti potrebbero non funzionare autonomamente, ma potrebbero dipendere dal loro layout di chiusura.

Il motivo per cui il CSS rende difficile l'astrazione su un framework è che mentre gli stili si sovrappongono, non possono estendersi o ereditare direttamente da un altro. Se ho uno stile .foo { /* ... foo styles */ } e voglio ereditarlo con uno stile .bar , dovrei scrivere:

.foo, .bar {
  /* ... foo styles */
}
.bar {
  /* ... bar-specific styles */
}

Cioè, dobbiamo modificare .foo -definizione per aggiungere il selettore .bar . Non è una buona idea se .foo sia definito in un file framework.

Puoi evitarlo se usi un preprocessore CSS come Less o Sass. Bootstrap è disponibile in queste lingue che ti aiuta ad adattarli più facilmente. Oltre all'ereditarietà e ai mixaggi, questi linguaggi offrono funzionalità utili come variabili e selettori annidati, quindi considera strongmente l'utilizzo di uno di questi per la tua riprogettazione. Solo l'uso di variabili può rendere i progetti CSS molto più mantenibili. Ovviamente questo si applica solo se si sta scrivendo il proprio CSS - che non è richiesto con Bootstrap.

    
risposta data 25.11.2018 - 20:58
fonte

Leggi altre domande sui tag