Astrazione lontano dai CSS

Question

Vorrei chiarire una cosa.

IO. Odio.CSS.

È un incubo senza fine.Ogni piccola modifica al layout sembra un hack.Le soluzioni ai problemi sembrano spesso comportare l'uso di numeri, come uno chef che cerca di capire esattamente quanta noce moscata mettere nel suo futuro budino di riso.Poi arriva il problema dei browser multipli, i problemi di risoluzione multipla..

..per farla breve, è una seccatura.Una PITA, se vuoi.

Molti framework cercano di allontanarsi dall'HTML (tag personalizzati, sistema di componenti JSF) nel tentativo di rendere più semplice la gestione di quel particolare bollitore.

C'è qualcosa che avete usato che ha un concetto simile applicato ai CSS?Qualcosa che fa un sacco di magie cross-browser per te, supporta variabili simili (perché devo digitare #3c5c8d ogni volta che voglio quel colore), supporta campi calcolati (che sono "compilati" in CSS e JS), ecc.

In alternativa, ci sto pensando correttamente?Sto cercando di spingere un blocco molto quadrato attraverso un foro molto rotondo?

Answer 1

Puoi sempre utilizzare un motore di modelli per aggiungere variabili e campi calcolati ai tuoi file CSS.

Answer 2

Ciò che ho scoperto che funziona meglio è imparare davvero i CSS.Intendo Veramente imparare i CSS.

Può essere una lingua confusa da imparare, ma se leggi abbastanza e fai pratica, alla fine imparerai il modo migliore per fare le cose.

La chiave è farlo abbastanza da risultare naturale.I CSS possono essere molto eleganti se sai cosa vuoi fare prima di iniziare e hai abbastanza esperienza per farlo.

Certo, a volte è anche una grande PITA da fare, ma anche i problemi tra browser non sono così gravi se tu Veramente fai pratica e impara cosa funziona e cosa no e come aggirare i problemi.

Tutto ciò che serve è la pratica e col tempo puoi diventare bravo.

Answer 3

Se per caso usi Ruby, c'è Sass.Supporta selettori gerarchici (usando il rientro per stabilire gerarchie), tra le altre cose, il che rende la vita più facile da estendere dal punto di vista sintattico (ti ripeti molto meno).

Certamente sono con te, però.Anche se mi considero un piccolo esperto di CSS, penso che sarebbe carino se ci fossero strumenti per CSS come quelli che esistono con Javascript (Prototype, JQuery, ecc.).Dici allo strumento quello che vuoi e gestisce le incoerenze del browser dietro le quinte.Sarebbe l'ideale, secondo me.

Answer 4

Questo approfondisce la mia risposta precedente.

Quando ho iniziato a utilizzare i CSS per la prima volta ho pensato che fosse una seccatura il fatto che non supportasse variabili, espressioni, ecc.Ma quando ho iniziato a usarlo sempre di più, ho sviluppato uno stile diverso per superare questi problemi.

Ad esempio, invece di questo:

a { color: red }
.entry { color: red }
h1 { color: red }

Tu puoi fare:

a, .entry, h1 { color: red }

In questo modo puoi mantenere il colore dichiarato in un punto.

Una volta che usi abbastanza CSS dovresti essere in grado di superare facilmente la maggior parte delle incoerenze del browser.Se ritieni di dover utilizzare un hack CSS, probabilmente c'è un modo migliore per farlo.

Answer 5

Mi dispiace dirlo ragazzi, ma tutti voi non avete colto il punto.

La parola astrazione è la chiave.Supponiamo che tu e Sally stiate creando un sito web.Stai modellando le forme mentre lei arrotonda gli angoli.Sia tu che lei avete definito una manciata di selettori.

E se, inconsapevolmente, scegliessi nomi di classe che stridono con quelli di Sally?Vedi, non puoi "nascondere" (astrarre) i dettagli quando lavori in CSS.Ecco perché non puoi correggere un bug in IE e poi creare una soluzione autonoma che altri possano usare così com'è, proprio come chiami procedure in un linguaggio di programmazione preoccupandoti solo delle pre e postcondizioni e non pensando a Come funziona all'interno.Basta pensare Che cosa vuoi realizzare.

Questo è il problema più grande del web:manca completamente di meccanismi di astrazione!La maggior parte di voi esclamerà: "Non è necessario;smettila di fumare crack!"

Farai invece il lavoro di, ad esempio, correggere bug di layout o arrotondare gli angoli o discutere ripetutamente sul markup "migliore" per questo o quel caso.Troverai un sito che ti spiega la soluzione, poi fai copia-incolla della risposta per poi adattarla al tuo caso specifico senza nemmeno pensare che diavolo stai facendo!Sì, è quello che farai.

Fine dello sfogo.

Answer 6

Poi arriva il problema dei browser multipli

C'è Questo che aiuta a rimuovere alcune incoerenze da IE.Puoi anche utilizzare jQuery per aggiungere alcuni selettori tramite javascript.

Sono d'accordo con Dan, imparalo e non sarà più un problema, anzi sarà divertente.

Answer 7

Vedi, questo è il problema con SO: ogni risposta finora ha fatto un punto valido e dovrebbe essere considerata la risposta finale.Provo a riassumere:

• I CSS sono buoni! Per espandersi ulteriormente, c'è una curva di apprendimento ma una volta imparata molte cose saranno molto più facili.
• (Alcune) incoerenze del browser sono risolvibili genericamente.
• (Alcuni dei tuoi) Variabile e calcolato la funzionalità del campo può essere gestita tramite qualsiasi motore di template utilizzato.

Penso che una combinazione di tutti questi risolva sicuramente una grande quantità di problemi (anche se, ad essere onesti, l'apprendimento approfondito dei CSS non è un'opzione per tutti;alcune persone semplicemente non lo usano abbastanza da giustificare il tempo).

Ci sono alcuni problemi che nessuno dei punti precedenti copre (per alcuni tipi di campi calcolati sarebbe necessario scrivere una libreria JS, credo) ma è sicuramente un buon inizio.

Answer 8

Per il supporto variabile, ho utilizzato PHP con intestazioni CSS con ottimi risultati.Penso che tu possa farlo in qualsiasi lingua.Ecco un esempio di PHP:

<?
header('content-type:text/css');
header("Expires: ".gmdate("D, d M Y H:i:s", (time()+900)) . " GMT"); 

$someColorVar = "#cc0000";
?>
BODY {
      background-color: <?= someColorVar ?>;
     }

Answer 9

Le soluzioni ai problemi sembrano spesso comportare l'uso di numeri, come uno chef che cerca di capire esattamente quanta noce moscata mettere nel suo budino di riso che presto diventerà famoso.

Ottengo questo solo quando provo a far funzionare le cose in IE.

Se impari i CSS al punto in cui puoi codificare la maggior parte delle cose senza dover cercare il riferimento (se stai ancora cercando regolarmente il riferimento non lo sai davvero e non puoi pretendere di lamentarti, credo), e poi sviluppare per Firefox/Safari, è un posto davvero carino in cui trovarsi.

Lascia il dolore e la sofferenza della compatibilità con IE alla fine dopo che avrà funzionato in FF/Safari, così la tua mente attribuirà la colpa a IE, a cui appartiene dannatamente bene, piuttosto che ai CSS in generale.

Answer 10

Variabili CSS stanno arrivando (relativamente) presto, ma sono d'accordo che sono attesi da tempo.Nel frattempo, è possibile utilizzare un motore di template CSS come Sass, o anche il linguaggio web dinamico di tua scelta, per generare i tuoi fogli di stile in modo programmatico.

Answer 11

Per i framework CSS, potresti prendere in considerazione Griglie YUI.Rende il layout di base molto più rapido e semplice, sebbene utilizzato nella sua forma grezza compromette la semantica.

Answer 12

La chiave per una reale comprensione dei CSS (e dei grattacapi del browser) è una solida conoscenza dei CSS modello a scatola utilizzato dagli standard CSS e il modello errato utilizzato da alcuni browser.Una volta che lo avrai imparato e inizierai ad imparare i selettori, ti allontanerai dalle proprietà specifiche del browser e i CSS diventeranno qualcosa che non vedi l'ora.

Answer 13

Controlla anche BlueprintCSS, un framework di layout in CSS.Non risolve tutti i tuoi problemi, ma molti, e non devi scrivere tu stesso il CSS.

Answer 14

Credo che gli errori comuni che i principianti commettono con i CSS abbiano a che fare con la specificità.Se stai modellando il UN tag, sei sicuro di voler davvero dare uno stile a ognuno di essi nel documento o ad una certa "classe" di UN tag?

Di solito inizio in modo molto specifico con i miei selettori CSS e li generalizzo quando lo ritengo opportuno.

Ecco un articolo umoristico sull'argomento, ma anche informativo:Guerre di specificità

Answer 15

I CSS richiedono un po' di tempo per essere imparati, ma la cosa che inizialmente ho trovato più scoraggiante è stato il fatto che fossero necessari così tanti hack per far sì che tutti i browser si comportassero allo stesso modo.Imparare un sistema che non aderisce alla logica sembra stupido...ma mi sono aggrappato alla vaga convinzione che ci sia una logica dietro l'idiosincrasia di ogni browser, sotto forma di specifiche W3.Sembra che i browser di nuova generazione si stiano lentamente allineando, ma IE6 mi rende ancora la vita un inferno ogni giorno.

Forse creare un livello di astrazione tra il codice CSS conforme/valido e le implementazioni scadenti dei browser non sarebbe una brutta cosa.Ma se venisse creata una cosa del genere, sarebbe necessario essere alimentata da JS (o jQuery)?(e ciò creerebbe un onere irragionevole, in termini di costi di elaborazione?)

Ho trovato utile "livellare il terreno" durante lo scripting con i CSS.Probabilmente ci sono un sacco di tipi diversi di script di ripristino là fuori, ma l'uso dei ripristini YUI mi ha aiutato a ridurre il numero di stranezze che altrimenti avrei incontrato e le griglie YUI a volte rendono la vita un po' più semplice.

Answer 16

@SCdF:Penso che il tuo riassunto qui sia giusto.Ma l'argomento secondo cui alcune persone non hanno il tempo di imparare i CSS è falso: pensaci solo per un secondo.Sostituisci una tecnologia che hai padroneggiato e vedrai perché:

IO.Odio.Giava.C'è qualcosa là fuori che lo scriverà per me?Non tutti hanno il tempo per padroneggiare Java.

I CSS sono certamente una tecnologia imperfetta: ho grandi speranze che tra 5 anni non avremo più a che fare con le incompatibilità dei browser (ci siamo quasi) e che avremo migliori strumenti lato autore (ho ho scritto una macro di Visual Studio per uso personale che fornisce il tipo di variabili e calcoli che descrivi, quindi non è impossibile) - ma insistere sul fatto che dovresti essere in grado di utilizzare questa tecnologia in modo efficace senza capirla veramente semplicemente non è ragionevole .

Answer 17

Tuttavia, ci stai pensando correttamente, probabilmente avrai ancora bisogno di comprendere le diverse implementazioni dei CSS nel browser.Si tratta solo di comprendere l'ambiente in cui vive la tua applicazione.

Chiarire:non si tratta di comprendere i CSS.Se conosci bene la lingua, dovrai comunque gestire la ridondanza, la duplicazione e la mancanza di strutture di controllo nella lingua.

Scrivo CSS in modo solido da più di 10 anni e sono giunto alla conclusione che, sebbene il linguaggio sia potente ed efficace, l'implementazione dei CSS fa schifo.Quindi utilizzo un livello di astrazione come Sass O Meno O xCSS interfacciarsi con la lingua.Questi strumenti utilizzano una sintassi simile ai CSS, quindi risolvi il problema nel dominio del problema.Usare qualcosa come PHP per scrivere CSS funziona ma non è l'approccio migliore.

Nascondendo i problemi nel linguaggio attraverso uno strato di astrazione, puoi fornire un prodotto migliore che manterrà la sua integrità durante l'intero ciclo di vita del tuo progetto.Scrivere CSS a mano accelera marciume del software a meno che tu non stia fornendo una documentazione solida che la maggior parte dei programmatori CSS non lo sono.Se stai scrivendo un framework CSS ben documentato, probabilmente non lo scriveresti comunque a mano.Semplicemente non è efficiente.

Un altro problema con i CSS è dovuto alla mancanza di supporto per le dichiarazioni di blocchi annidati.Ciò incoraggia i programmatori a creare un insieme di classi piatto e globale e a gestire le collisioni dei nomi con una convenzione di denominazione.Sappiamo tutti che i globali sono malvagi, ma perché scriviamo CSS in questo modo?Non sarebbe meglio dare alle tue classi un contesto invece di esporle all'intero modello di documento?E la tua convenzione di denominazione potrebbe funzionare, ma è solo un altro compito che devi padroneggiare per scrivere la lingua.

Incoraggio quelli di voi che sono orgogliosi di scrivere buoni CSS a iniziare ad applicare alcune delle migliori pratiche dalla programmazione al markup.Usare un livello di astrazione non significa che ti manchi la capacità di scrivere un buon CSS, significa che hai limitato la tua esposizione ai punti deboli del linguaggio.

Answer 18

Non hai bisogno di un’astrazione lontana dai CSS: devi realizzare che i CSS stessi sono un’astrazione.I CSS non riguardano l'inserimento dei pixel sullo schermo.Si tratta invece di scrivere un sistema di regole che aiuti il ​​browser a prendere queste decisioni per te.Questo è necessario, perché nel momento in cui scrivi CSS, non sai a quale contenuto il browser lo applicherà;né conosci l'ambiente in cui il browser lo farà.

Padroneggiare questo richiede tempo.Non puoi prendere il CSS in un fine settimana ed essere pronto a partire.È un po’ ingannevole, perché la lingua ha una barriera di accesso molto bassa, ma le acque scorrono profondo.Eccone solo alcuni degli argomenti dovresti cercare di padroneggiare per essere esperto nei CSS:

• La cascata e l'eredità
• Il modello della scatola
• Metodi di layout inclusi i float e il nuovo flexbox
• Posizionamento
• Le migliori pratiche attuali come SMACSS o BEM per mantenere i tuoi stili modulari e di facile manutenzione

Non è necessario che tu sappia tutto in anticipo, ma dovresti continuare ad andare avanti.Proprio come con altri linguaggi e programmazione in generale, devi cercare continuamente di imparare di più e padroneggiare il mestiere.I CSS sono una parte fondamentale dello sviluppo web e sempre più sviluppatori devono trattarli con lo stesso rispetto che riservano ad altri linguaggi.