Qual è il miglior framework CSS e valgono la pena?

https://stackoverflow.com/questions/203069

03-07-2019
|

Domanda

Leggendo su un altro forum mi sono imbattuto nel mondo dei CSS Frameworks. Quello che ho preso in considerazione in particolare è BluePrint . Mi chiedevo se qualcun altro si fosse imbattuto in framework CSS, suggerisci qual è il migliore e se valgono lo sforzo?

Soluzione

I "framework" CSS mancano completamente il punto.

CSS non è come JavaScript, in cui è possibile includere una libreria / framework di base e quindi richiamare funzioni e oggetti da esso per eseguire operazioni di livello superiore. Tutto ciò che un framework CSS può darti sono regole dichiarative: alcune cose predefinite per reimpostare le regole del browser, alcuni stili di classe su cui forzare la tua pagina e regole di layout usando 'float' e 'clear'. Puoi scriverlo tu stesso in poche righe di CSS piuttosto che tirare in gonfiore da un centinaio di regole quadro.

Le cose del "layout di griglia", in particolare, risalgono ai brutti vecchi tempi della miscelazione della presentazione nel markup. 'div class = " span-24 "' non è meglio di una tabella, dovrai tornare indietro e modificare il markup per influire sul layout. E tutti i framework che ho visto sono basati su riquadri mobili a pixel fissi, rendendo impossibile creare un layout liquido accessibile su una vasta gamma di dimensioni di finestre.

È una creazione all'indietro, utile solo per qualcuno che ha troppa paura di scrivere una regola CSS.

Altri suggerimenti

~~Quindi, nessuno ha ancora risposto a questa domanda (anche se ho visto alcuni voti positivi), quindi~~ cercherò almeno di affrontare la seconda domanda in questo prompt.

I frame CSS sono fantastici; come qualsiasi altro framework, riducono i tempi di sviluppo e ti consentono di lavorare immediatamente su design e CSS specifici del sito. Pensano a decisioni difficili, quindi non è necessario.

Sfortunatamente, ci sono due aspetti negativi nell'uso di un framework (in generale):

Il framework determina la struttura generale e la meccanica del tuo codice CSS. Ora, non sto parlando di un reset CSS (questi sono utili di per sé, ma non sono veri framework); Sto parlando di un framework onesto a buono, che ha già preso le decisioni su quali tag semantici utilizzerai nel tuo documento, ecc. Come tale, sei reso dipendente dal framework e quando c'è un bug nel framework, più comunemente dovrai ripararlo da solo.
I frame non sono una scusa per essere ignari di problemi CSS / cross-browser / avanzati. Li incontrerai invariabilmente, proprio come faresti con un framework PHP o JavaScript. E devi sapere come gestirli. C'è un detto comune che dovresti scrivere prima il tuo framework, prima di usare quello di qualcun altro.

Dando una rapida occhiata a Blueprint, non lo definirei davvero un framework; forse un reset con qualche chicca in più in cima.

Ho esaminato BluePrint e alcuni altri e l'unico "framework" CSS che consiglierei è YUI Grids

Pro:

Scritto da uno dei migliori ingegneri frontend (IMO) (Nate Koechley)
Molto piccolo. 4KB
Molto flessibile (1000 layout diversi)
Supporta layout a larghezza di fluido (100%) e layout a larghezza fissa preimpostati a 750px, 950px e 974px e la possibilità di personalizzare facilmente qualsiasi numero.
Supporta una facile personalizzazione della larghezza per layout a larghezza fissa.
Le colonne dei modelli sono indipendenti dall'ordine di origine, quindi puoi inserire i tuoi contenuti più importanti nel livello di markup per una migliore accessibilità e ottimizzazione dei motori di ricerca (SEO).
Piè di pagina a cancellazione automatica. Non importa quale colonna sia più lunga, il piè di pagina rimane in fondo.
I layout inferiori al 100% vengono automaticamente centrati.
Nomi di classe un po 'semantici (meglio di top, left, right, ecc.)

Contro:

Un sacco di markup extra rispetto a HTML e CSS scritti a mano
Ci vuole un po 'di apprendimento per capire come realizzare layout complessi

Come altri hanno pubblicato, non ci sono veri e propri "framework" per CSS. Ripristina i fogli di stile aiutano molto anche con il layout. Di solito mi attengo a un foglio di stile di ripristino e vado da lì. Ma se non hai molta esperienza CSS, YUI Grids potrebbe farti risparmiare un po 'di tempo.

Compass è un vero e proprio framework CSS in la sensazione che ti offra non solo modelli (sia YUI che blueprint), ma anche costrutti riutilizzabili e dichiarazioni di livello superiore, pur continuando a darti una sintassi CSS familiare.

Prenditi il ??tempo per studiare e capire (davvero capire!) alcuni framework CSS come BluePrint e YUI, e i reset CSS come Eric Meyer. Quindi, prenditi il ??tempo per mettere insieme il tuo reset e / o framework in base ai tuoi metodi di lavoro e al tipo di siti che costruisci.

Personalmente, utilizzo gran parte del reset di Eric Meyer con alcune classi e ripristini personali, oltre ad alcune idee di BluePrint e YUI.

Di recente ho visto Eric Meyer fare una presentazione sui CSS Frameworks in cui ha posto la domanda: "quindi qual è quello giusto per me?" Ha quindi risposto alla domanda mostrando una diapositiva vuota. Il suo punto era che ci sono certamente alcuni concetti utili integrati nella maggior parte dei ripristini e dei framework, ma quello che ti si addice meglio è quello che scrivi per te (ne vale la pena).

Perché usare i 'framework' css?

Se sei sotto pressione per il tempo.
Se non conosci css e non lo sai conoscere qualcuno che può scriverlo per te.
Se non sei troppo prezioso standard ecc.

Conosco programmatori che sono stati davvero felici di usare blueprint o 960, poiché consente loro di mettere insieme un layout da soli, senza rivolgersi a uno sviluppatore front-end. Questo è l'ideale per progetti personali o startup con risorse limitate.

Se hai già una discreta conoscenza dei CSS, presumibilmente hai già una libreria decente di layout stock, quindi chiaramente non avrai bisogno di un framework.

Tuttavia, se sei un principiante e hai solo bisogno di far funzionare qualcosa, allora potresti passare a un framework, in quanto rende il layout di base molto più semplice e anche la compatibilità con il browser.

Detto questo, molti framework pronti all'uso fanno uso di alcuni orribili nomi di classe, ecc. Conosco alcuni siti Web che hanno preso un framework come punto di partenza e poi lo hanno personalizzato con i propri tag di classe e ID. Ma chiaramente c'è anche un po 'di lavoro in quella riscrittura. L'uso di qualcosa come Compass, come menzionato sopra, aiuta a ovviare a questo.

Quindi, i framework CSS - possono farti risparmiare tempo, a scapito della semantica. Potrebbero anche danneggiare la tua conoscenza dei CSS, ma ciò dipende più da quanto investi nell'apprendimento della materia in generale. Se tu li usi dipende da te.

Dovresti chiederti quanto sono efficaci i framework disponibili nel risolvere i tuoi problemi. Soddisfano le tue esigenze?

Utilizzando un framework, puoi impostare alcune regole o dettagli a livello di pixel e dedicare il resto del tuo tempo all'implementazione e alla produzione. È un enorme aumento della produttività. Se ti ritrovi a passare il tempo ad aggiustare le cose di qualche pixel in ritardo nel progetto (micro gestione del design), è un segno che un framework può essere utile.

Suggerimento n. 17 in Il programmatore pragmatico dice: " Programma vicino al dominio problematico " . L'uso di uno strato di astrazione può avvicinarti alla risoluzione dei problemi reali del layout. Ad esempio: potresti essere in grado di concentrarti sul miglioramento dell'esperienza utente con il tempo extra che hai, piuttosto che piccole regolazioni dei pixel.

Questo non vuol dire che devi sacrificare la qualità per la quantità. Riguarda l'efficienza.

In un recente progetto, ho creato il mio framework perché avevamo risorse molto limitate e i framework popolari non hanno fatto quello che volevo. Quindi, ho impostato i PSD del team di progettazione affinché si agganciassero alla stessa griglia che ho distribuito.

Un framework non deve essere un'implementazione particolare di CSS. Non deve essere qualcosa di gonfio che hai scaricato dall'interweb o qualcosa che implementa idee obsolete. È solo una tecnica per ottenere un lavoro fatto. Non sarei sorpreso se alcuni programmatori hanno già i loro framework e non lo sanno nemmeno. In effetti, se consideri il DOM come un insieme di elementi predefiniti che estendi con CSS, questo è un framework per definizione.

In realtà ho passato buona parte delle ultime 24 ore a indagare da solo, eh. La mia conclusione è stata che un bel ripristino (ho usato YUI Reset ), e forse qualcos'altro per impostare roba di base ( font YUI è stato utile nel mio caso; forse il " extra extra " di BluePrint sarebbe nella tua) è una buona idea. Ma un "framework" --- che in genere è qualcosa come Griglie YUI - -è troppo restrittivo, costringendoti a usare i loro nomi di classe, ID, ecc. e raramente adattarsi al tuo sito come farebbe CSS fatto a mano.

Quindi in breve: i ripristini sembrano abbastanza belli; è bene eliminare tutte le variazioni in es. margin-vs-padding per elenchi, spaziatura di paragrafo o altro. Ma questo è quanto vorrei.

Non l'ho usato sì, ma penso che emastic potrebbe essere un buon alternativa merita un controllo. è simile al progetto nell'ambito, ma supporta anche layout elastici (da cui il nome) e puoi specificare valori in px, em o% e persino mescolarli.

Bussola Penso che sia sorprendente. Assicurati di vedere screencast .

Sto usando 960.gs per alcuni siti web e lo trovo molto semplice e facile e vale la pena . Mi fa risparmiare molto lavoro sul layout. Assicurati di controllare il generatore CSS personalizzato che scompare con la larghezza fissa di 960 pixel.

Penso che questa presentazione video del CEO di Site Point Kevin Yank risponderà alla tua domanda. Consiglio vivamente di guardarlo.

Compass ti consente di rinominare le classi e gli ID del tuo framework con i tuoi nomi semantici, quindi potresti voler provarlo. Fornisce inoltre l'accesso a cose che non si ottengono con CSS semplici come i mixin.

Sono sbalordito dai cosiddetti "esperti CSS" " che criticano questi strumenti senza averli veramente scavati e usati. Sono essenziali? No. Se ti piace il tuo framework (ne hai uno tuo, giusto? Un framework CSS è solo una libreria accuratamente definita - tutti dovrebbero usarne uno) quindi continuare a usarlo. Nessuno ti sta costringendo ad usare altri framework e non vedo persone che usano framework dire ai puristi CSS che stanno facendo "male".

Criticare i framework da un tale punto di vista rivela solo un'insicurezza e un'ignoranza. Ad esempio, l'idea è ridicola che una persona utilizzerebbe uno strumento come Compass senza conoscere CSS. Ti rendi conto, giusto, che un framework generalmente non scrive tutto il tuo CSS per te? Puoi comunque uscire e scrivere il tuo CSS nel contesto della maggior parte dei framework. In effetti, se non conosci i CSS potresti essere frustrato rapidamente.

Per quanto mi riguarda, apprezzo avere un framework perché è già documentato, testato da centinaia di altri utenti e posso applicare le mie classi e i miei ID tramite Compass. Se ho bisogno di qualcosa per cui il framework non è adatto, allora codificherò il mio.

Matt Raible, famoso per AppFuse, aveva un concorso CSS Framework qualche tempo fa per sviluppare CSS Frameworks per AppFuse. I risultati sono pubblicati qui . Ci sono alcune varianti e ne ho usate alcune perché uso AppFuse e le trovo molto buone.

Dovrei aggiungere che questi CSS Frameworks funzionano bene perché sono usati in applicazioni a tema. Cioè, se ti attieni alle regole, passare da una all'altra è semplice come cambiare un valore in un file delle proprietà.

Ho usato BluePrint con molto successo su un sito (potrei menzionare il sito qui ma sono sicuro che il post sarebbe contrassegnato come spam!). Non sono sicuro se lo userò in futuro, perché una delle idee di CSS che pensavo fosse quella di non avere una logica di layout codificata. Non dovresti avere elementi CSS chiamati span-24 e span-12 per definire il layout ma qualcosa come searchBox e mainContent. Almeno è così che lo vedo.

Buon collegamento che ho trovato: I 12 migliori frame CSS e come capirli

Ecco il mio post sul blog sui frame CSS Quando utilizzare il framework CSS?

L'unico modo che conosco per usare un framework CSS e conservare il markup semantico è usare un'astrazione di livello superiore. Al momento, Compass è l'unico di cui sono a conoscenza che è abbastanza maturo da usare, ma Nicole Sullivan sembra fare qualcosa di interessante con il suo "CSS orientato agli oggetti". progetto.

Trovo brillante l'uso intelligente da parte di Compass dei mixin di Sass, e un grande passo verso il Santo Graal di markup semantico sostenibile. Non credo che vorrei usare un framework come Blueprint o YUI senza un'astrazione come Compass per tenere le lezioni di presentazione fuori dal markup.

A proposito, c'è un bel framework CSS chiamato Elastic che sembra abbastanza buono che sto pensando di aggiungerlo a Compass.

Credo che i CSS riguardino la semplicità. L'obiettivo è quello di avere uno o due posti da controllare quando si fa riferimento tra HTML e foglio di stile. L'aggiunta di più righe, e in particolare di righe che non sono state scritte e che probabilmente non conoscono, aumenterà esponenzialmente la complessità e quindi la volatilità del codice CSS.

Vorrei suggerire i tuoi layout mentre li scrivi e sviluppare un sistema di template generico da quello. Mentre adoro rendere i CSS più modulari, spesso e in base al design, il tuo CSS può essere molto specifico per il caso e non modulare affatto.

Ho usato Blueprint su alcuni siti unici e sicuramente ho risparmiato tempo, principalmente nei test cross-browser.

Fa decisamente schifo aggiungere il codice di presentazione al tuo markup, anche se il lato positivo è leggibile. Mentre adoro il concetto di "puoi ridisegnare senza toccare il markup", se stai producendo un sito in cui ciò non accadrà comunque e ne hai solo bisogno ieri, Blueprint è qualcosa da guardare.

Ci sono anche dei compromessi in quali tipi di layout può comunque essere fattibile. Se si esegue il wireframe del sito dall'inizio su una griglia rigorosa, sarà molto più semplice trasporre nel framework con un minimo sforzo.

Ho usato BluePrint e YUI ma mi sento sempre frustrato con alcuni dei nomi che danno il loro id e classi.

A ciascuno il suo, ma preferisco fare le cose da zero, ma dopo un po 'sviluppi un processo in cui utilizzerai il tuo lavoro precedente e lo applicherai a nuovi progetti e farai alcune modifiche per rendere il sito web simile al come vorresti.

Assicurati di usare una buona convenzione di denominazione, nel caso in cui arrivasse qualcun altro in fondo alla strada per modificare il CSS, allora avranno una buona idea a cosa si riferisce ogni nome di stile.

Craig,

La bussola è ciò che stai cercando: ti consente di rinominare le tue classi CSS Blueprint come " span-24 " con i tuoi nomi. Espande anche la funzionalità CSS con variabili e mixin. In verità, quelli che giudicano prematuramente i framework senza aver verificato Compass mancano "il punto". È un po 'come quelle persone che ci hanno detto anni fa che ci manca il punto usando CSS al posto delle tabelle HTML per i nostri layout.

-Matt

controlla http://www.ez-css.org/ . uno dei framework css più facili e leggeri su cui lavorare. :)

Dai un'occhiata a questa demo: http://www.richstyle.org/demo-web.php Questo framework si basa sull'idea che i tag HTML "dovrebbero essere sufficienti". Penso che la riutilizzabilità sia il fattore più importante per la scelta di un componente software, incluso un framework web. Per gli sviluppatori di framework Web, più ti impegni a rispettare gli standard, più garantisci la riutilizzabilità.

Autorizzato sotto: CC-BY-SA insieme a attribuzione

Non affiliato a StackOverflow