Smashing Podcast Episodio 19 con Andy Bell: cos'è CUBE CSS?
Pubblicato: 2022-03-10Oggi parliamo di CUBE CSS. Che cos'è e in che cosa differisce da approcci come BEM, SMACSS e OOCSS? Ho parlato con il suo creatore, Andy Bell, per scoprirlo.
Mostra note
- CUBO CSS
- Piccalilli
- Impara Eleventy da zero - risparmia il 40%!
- Andy Bell e Piccalilli su Twitter
Nota : gli ascoltatori del podcast Smashing possono risparmiare un enorme 40% sul corso Learn Eleventy From Scratch di Andy utilizzando il codice SMASHINGPOD .
Aggiornamento settimanale
- “Cosa può insegnarci Vitruvio sul web design”
di Frederick O'Brien - "Un'introduzione a SWR: React Hooks per il recupero remoto dei dati"
di Ibrahima Ndaw - "Come i web designer possono aiutare i ristoranti a passare alle esperienze digitali"
di Susanna Scacca - "Una guida pratica per testare le applicazioni React con Jest"
di Adeneye David Abiodun - "Aspetti salienti di Django: gestione di risorse statiche e file multimediali (parte 4)"
di Filippo Kiely
Trascrizione
Drew McLellan: È un educatore e un web designer freelance con sede nel Regno Unito e ha lavorato nel settore del web designer per oltre un decennio. In quel periodo ha lavorato con alcune delle più grandi organizzazioni del mondo, come Harley-Davidson, BSkyB, Unilever, Oracle e NHS. Insieme a Heydon Pickering, è il coautore di Every Layout, oltre a gestire il Front-End Challenges Club, incentrato sull'insegnamento delle migliori pratiche di sviluppo front-end attraverso sfide brevi e divertenti.
Drew: La sua ultima impresa è Piccalilli, una newsletter del sito Web con tutorial e corsi per aiutarti a salire di livello come sviluppatore e designer front-end. Quindi sappiamo che è uno sviluppatore ed educatore esperto, ma sapevi che è stata la prima persona autorizzata a competere al Crufts con un panda?
Drew: Miei amici Smashing, vi prego di dare il benvenuto, Andy Bell. Ciao, Andy, come stai?
Andy Bell: Sto smashing, grazie. Come stai?
Drew: Sto molto bene, grazie mille. Ora volevo parlarti oggi di qualcosa che hai pubblicato sul tuo sito, Piccalilli, di una metodologia CSS che hai sviluppato per te negli ultimi anni. Prima di tutto, credo che dovremmo probabilmente esplorare cosa intendiamo per metodologia CSS perché potrebbe significare cose diverse per persone diverse. Quindi, quando pensi alla metodologia CSS, che cos'è per te?
Andy: Questa è una buona, difficile domanda per cominciare, Drew. Apprezzo questo, grazie!
Drew: Benvenuto!
Andy: È difficile. Quindi, per contesto, ho usato BEM per molto tempo, e questo è Block Element Modifier. È in circolazione da molto tempo. Il modo in cui guardo a una metodologia CSS è che non è un framework, è una struttura organizzativa. È così che mi piace vederlo. È quasi come un processo. È come se avessi un problema che devi risolvere con i CSS e utilizzi la metodologia per risolverlo per te e mantenere le cose prevedibili e organizzate. BEM è semplicemente leggendario per questo perché ha avuto un enorme successo.
Andy: Quindi potresti quasi qualificare cose come i componenti dello stile e quel genere di cose. Si può quasi dire che sono orientati alla metodologia anche se sono un po' più intrecciati, ma è comunque una metodologia per rompere le cose in minuscole molecole. Quindi essenzialmente è quello che sto cercando di fare anche con CUBE CSS. Una struttura pensante, penso di averla descritta come.
Drew: Quindi è un'applicazione di processo per il modo in cui progetti e scrivi CSS, e non è tanto qualcosa che si basa su strumenti o qualsiasi altro tipo di tecnologia, è solo una sorta di flusso di lavoro. Quindi ci sono molti approcci diversi là fuori. Hai citato BEM. C'è SMACSS, OOCSS, Atomic CSS. E poi hai questo tipo di approcci insoliti da figli d'amore come ABEM. Hai visto quello?
Andy: Sì.
Drew: Perché pubblicare il tuo?
Andy: Sì, sì. Perché crearne uno tuo? Questa è un'ottima domanda. Penso che chi mi conosce bene sappia che mi piace molto andare contro corrente. È principalmente perché tendo a fare anche molti progetti vari, in team diversi. Quindi è molto difficile, ho scoperto, lavorare con BEM con uno sviluppatore tradizionale perché sono abituati a usare i CSS per ciò che riguarda i CSS: la cascata, eccetera, ed è per questo che l'ho rubato dal linguaggio .
Andy: L'altro rovescio della medaglia è che metodologie meno strutturate, è più difficile lavorare con un programmatore, una specie di persona JS perché a loro piacciono la struttura, l'organizzazione e i piccoli componenti, il che è comprensibile lavorando con il linguaggio in cui lavorano.
Andy: Quindi mi sono trovato in queste posizioni in cui stavo lavorando con diversi tipi di persone, diversi tipi di progetti in cui una metodologia non funzionava del tutto. Nel corso degli anni, ho solo giocato con questa idea di come vanno le cose, e poi ci sono le cose che abbiamo fatto io e Heydon, Every Layout, che in qualche modo ne ha rafforzato la maggior parte, che è il Do, la parte della composizione , e poi l'ho semplicemente evoluto molto rapidamente negli ultimi sei mesi.
Andy: L'unico motivo per cui ho scritto un articolo su di esso è perché stavo facendo questo corso e ho pensato che fosse meglio scrivere del materiale supplementare per accompagnarlo in modo che la gente lo capisse, ed è assolutamente esploso. Quindi forse non abbiamo ancora finito le metodologie, Drew.
Drew: Quindi il materiale del corso che hai messo insieme utilizza effettivamente CUBE CSS come metodologia, vero?
Andy: Sì. Quindi un buon 50% del corso è in realtà front-end, anche se è un corso illimitato. È così, così profondamente intrecciato nel modo in cui costruiamo il front-end che non potrei semplicemente dire "Oh, a proposito, è così che scrivo un bel CSS", e poi lasciarlo. So che alla gente piace entrare nei dettagli, quindi ero tipo, quello che farò è scrivere questo post che è davvero lungo e molto dettagliato e poi se qualcuno vuole migliorare e capire davvero cosa stiamo facendo , allora possono fare, e il resto viene da lì. Ed eccoci qui oggi, Drew, seduti a parlarne.
Drew: Quindi, se qualcuno comprende già il BEM e forse sta già utilizzando il BEM, come esempio, perché è probabilmente una delle metodologie più ampiamente adottate, non è vero? Quindi, se hanno già una comprensione di BEM e stanno arrivando a CUBE, è qualcosa che troverebbero facile da adottare? Ci sono molte somiglianze o è completamente diverso?
Andy: Sì. Direi che passare da BEM a CUBE è probabilmente una transizione graduale, specialmente il modo in cui mi piace ancora scrivere i CSS per CUBE. Quindi la maggior parte delle cose sta accadendo a un livello superiore. Quindi sta accadendo a livello di cascata e sta accadendo CSS globale, usando le utilità per fare molte cose. Ma quando si entra nei dettagli, si tratta di componenti, blocchi ed elementi molto simili a BEM. L'unica cosa che è un po' diversa da BEM è, invece di avere i modificatori, usiamo questa cosa chiamata eccezioni invece che, invece di usare le classi CSS, si trasforma in attributi di dati, che penso diano un bel po' di separazione e un reale eccezione, che è ciò che dovrebbe essere un modificatore.
Andy: Parte del motivo per cui mi sono allontanato da BEM è perché ho scoperto che il modo in cui ci stavo lavorando, specialmente nei sistemi di progettazione, era che i modificatori erano dominati ed è diventato un problema perché era come, qual è il ruolo del mio blocco a questo punto? Perché se lo modifico al punto in cui è irriconoscibile regolarmente, allora questa metodologia funziona ancora come dovrebbe funzionare?
Andy: Poi c'è tutta la roba del design token, la roba che Jina ha fatto con il Lightning Design System che tutti abbiamo iniziato ad adottare ora. Le cose della classe di utilità hanno davvero iniziato ad avere un senso con quell'approccio. Quindi ho semplicemente cancellato tutte le cose che mi piacciono del lavoro degli altri e l'ho inserito nel mio.
Drew: Parli con BEM, del tipo di approccio modificatore che ti fa perdere il controllo. Era quello uno dei principali punti dolenti con BEM che CUBE cerca di affrontare?
Andy: Sì, assolutamente. Mi piace l'approccio modificatore con BEM, ha senso. Quello che mi piace di BEM è qualcosa che faccio ancora, è il doppio underscore per un elemento, e poi c'è il doppio trattino per un modificatore. Mi piace quel modo di organizzare le cose. Era solo un caso di ok, beh, molti dei modificatori che posso effettivamente spiegare con le classi di utilità e poi gli altri bit ...
Andy: Quindi l'esempio che uso nell'articolo è, immagina di avere una carta e poi la carta viene girata, quindi il contenuto appare prima dell'immagine. Quindi ha senso, per vedere il display: fletti e poi lo inverti, inverti l'ordine. Ha senso avere una regola di eccezione per questo perché è un'eccezione allo stato predefinito della carta, ed è così che mi piace vederla. È come uno stato interessato su quel componente, ecco cos'è un'eccezione e questo ha senso.
Andy: Con molte delle cose che ho fatto più di recente, il moderno stack front-end con JavaScript reattivo, c'è molto cambiamento di stato ed ha senso gestirlo in modo appropriato tra CSS e JavaScript perché stanno diventando sempre più e più intrecciati tra loro, che ti piaccia o no. È un linguaggio comune per loro. Come puoi vedere dalla mia faccia, proprio no, ma ecco qua. Probabilmente stai pensando: "In realtà, ho lavorato molto con React ultimamente, quindi sono il contrario". Quindi posso vederlo anche io.
Drew: Allora entriamo in CUBE. Quindi CUBE sta per Composition Utility Block Exception. È giusto?
Andy: Sì. È lui.
Drew: Cosa diavolo significa?
Andy: Oh, amico, avresti dovuto sentirlo prima! Stavo facendo un discorso l'anno scorso. Ho fatto un discorso e si chiamava Keeping it Simple con CSS che scala, e lì ho introdotto una versione precedente chiamata CBEUT, che era Cascade Block Element Utility Token. Era spazzatura. Odiavo il nome. L'ho fatto un paio di volte, in questo discorso l'anno scorso, e il nome non mi piaceva davvero. Poi, quando sono arrivato a fare queste cose quest'anno, ho pensato: "Ho davvero bisogno di pensare a cosa sia effettivamente e come si chiama". Penso che CUBE sia un po' meno spazzatura. Penso che sia il modo migliore per descriverlo.
Andy: Ma poi, i nomi sono sempre spazzatura per queste cose, vero? Voglio dire, come BEM, che nome schifoso che è! Ma lo facciamo tutti. Guarda Jamstack: anche questo è un nome terribile, vero?
Drew: Le mie labbra sono sigillate!
Andy: Il tuo capo sta dicendo: "Cosa?" È vero. È proprio così com'è, non è vero, nel nostro settore.
Drew: Sembra che molte metodologie CSS cerchino di aggirare alcune delle caratteristiche dei CSS, cose come la cascata. La mia comprensione da ciò che ho letto è che CUBE cerca di utilizzare quel tipo di funzionalità e proprietà dei CSS.
Andy: Sì. Una buona analogia è SCSS, come Sass, è un'estensione del linguaggio CSS naturale, vero? Hai ancora praticamente ragione nei CSS. Quindi CUBE CSS è così. Quindi è un'estensione di CSS. Quindi dovremmo ancora scrivere CSS, come dovrebbe essere CSS... beh, dovrebbe essere scritto. Siamo onesti, che come dovrebbe essere scritto, il nome lo tradisce: Cascading Style Sheets. Quindi lo sta abbracciando di nuovo perché quello che ho scoperto è che sono arrivato fino al livello di micro-ottimizzazione. Sono stato lungo il percorso in cui ho visto molte persone andare di recente dove ... e l'ho menzionato anche nell'articolo, dove posso vedere ... ci sono alcune prove di recente. Ho notato che persone hanno creato componenti distanziatori e cose del genere, e capisco il problema, mi sono trovato in quella situazione.
Andy: Il modo in cui l'ho risolto è stato, invece di approfondire e cercare di micro-ottimizzare, in realtà ho iniziato a pensare alle cose a livello compositivo invece perché non importa quanto siano piccoli i tuoi componenti, a un certo punto stanno andando per essere pagine, saranno visualizzazioni. Non puoi evitarlo, è così che sarà. Quindi, invece di provare a dire: "Esatto, ho bisogno di questi piccoli aiutanti per fare questo layout", dici: "Esatto, ho una visualizzazione della pagina dei contatti o una visualizzazione della pagina del prodotto, e questa è una composizione scheletrica del layout. Quindi al suo interno posso inserire tutti i componenti che voglio. Ora abbiamo cose come Grid e Flexbox che lo rendono molto più realizzabile e puoi essenzialmente mettere tutto ciò che vuoi all'interno del layout scheletrico, non importa. Quindi i componenti dovrebbero, a quel punto, comportarsi come vuoi che si comportino, con o senza query contenitore.
Drew: questa è la parte della composizione di CUBE in cui guardi le cose a un livello più macro, osservando come i componenti possono essere composti in una vista per creare il tipo di pagine che devi creare per un sito o un'app o cosa hai.
Andy: Quindi sta creando regole, essenzialmente. È come una guida. Sta cercando di ottenere linee guida per qualcosa. Non sono regole rigide, tipo, dovresti fare questo, dovresti fare quello. Questo è essenzialmente ciò che stai facendo con il browser, con questa metodologia, stai dicendo... non lo stai costringendo a fare nulla. Stai dicendo: "Guarda, idealmente, se potessi stenderlo in questo modo, sarebbe fantastico, ma capisco che potrebbe non essere così, quindi ecco alcuni limiti e alcuni livelli superiori e inferiori con cui possiamo lavorare. Fai quello che puoi e applausi". Quindi gli mandi alcuni componenti e lascia che faccia quello che fa. Aggiungi abbastanza controllo lì dentro perché non sembri spazzatura.
Andy: Quindi un buon esempio vedrebbe... facciamo un layout in Every Layout chiamato switcher, che essenzialmente conterrà gli elementi in linea fino a un certo punto in cui il calcolo che calcola la larghezza dovrebbe semplicemente impilarli uno sopra l'altro . Ma poiché aggiungiamo margine all'in-line e al blocco, funziona, indipendentemente dallo stato in cui si trova, sembra comunque a posto. Questa è l'idea, è che non stiamo dicendo al browser di dire: "Devi sovrapporre questa griglia a tre colonne". Stiamo dicendo: "Se puoi sovrapporre una griglia a tre colonne, fallo. Altrimenti, impila e spazio invece. Quindi è quel tipo di metodologia, di lasciare che il browser faccia davvero il suo lavoro.
Drew: Molti dei diversi approcci che sono emersi per i CSS negli ultimi anni si sono concentrati molto sul livello dei componenti di gestire tutto come se fosse un componente. CUBE non minimizza così tanto l'aspetto del componente, dà solo questo concetto in più oltre a prendere quei componenti e comporli in layout più grandi, piuttosto che semplicemente dire che il layout è solo un altro componente.
Andy: Sì, questo è un buon punto, sì. Penso che la cosa da dire sui componenti sia che sono importanti, specialmente nelle moderne cose di front-end. Facciamo un sacco di cose sui componenti, cose di sistema. Ma il modo in cui vedo un componente è che è una raccolta di regole che estendono ciò che è già stato fatto.
Andy: Il punto che voglio sottolineare nell'articolo è che quando scendi al livello di blocco, la maggior parte del tuo stile è stato effettivamente fatto, e in realtà ciò che il tuo componente sta facendo è punteggiare le I e attraversare le T e sta dicendo, "Giusto, in questo contesto..." Quindi, per una carta, ad esempio, fai in modo che l'immagine abbia un'altezza minima di X e aggiungi un po' di riempimento qui. Fai questo, quello e l'altro. Metti un pulsante qui. È solo una sorta di regole aggiuntive in aggiunta a ciò che è già stato ereditato dal resto del CSS. Penso che sia probabilmente il modo migliore per descriverlo.
Andy: Mentre in BEM, il componente è la fonte della verità. Fino a quando non metti quella classe sull'elemento, a quel punto non è stato applicato nulla e quel metodo funziona. Ho appena scoperto di aver scritto più CSS in questo modo e CSS più ripetitivi, cosa che non mi piace fare.
Drew: Prenderesti in considerazione la tipografia, i colori ei ritmi verticali, la spaziatura e tutto il resto, fa tutto parte dell'idea di composizione in questo modello?
Andy: Sì. In un CSS globale, sì, assolutamente. Il ritmo verticale in particolare, e il flusso. Abbiamo fatto un articolo su questo in 24 modi, non abbiamo, un paio di anni fa, la componente del flusso e del ritmo. Era una sorta di estratto anche da questo approccio, in cui hai impostato un componente di base che utilizza essenzialmente il selettore del gufo lobotomizzato. Non so come lo descriverò alla radio, ma lo faremo. Lo metteremo solo, credo, nelle note dello show sull'articolo di Heydon o qualcosa del genere. Ma in sostanza, seleziona gli elementi figlio... scusa, gli elementi fratelli.
Andy: Quindi dice: "Esatto, ogni elemento che segue l'elemento X ha un margine superiore ai costi CSS e al valore della proprietà", e quindi il bello è che puoi anche impostare il valore della proprietà personalizzata CSS su un contesto compositivo. Quindi puoi dire: "Bene, in questo componente, se c'è del flusso in movimento, imposteremo lo spazio di flusso in modo che sia effettivamente due rem perché vogliamo che sia bello e robusto, l'ampio spazio". Poi in un altro potresti dire: "In realtà, voglio che lo spazio di flusso sia mezzo rem perché voglio che sia stretto". Tutto questo sta accadendo, tutto il controllo viene da un livello più alto e quindi quello che stai facendo è aggiungere sostituzioni contestuali invece di reinventarlo ogni volta, reinventando la stessa cosa più e più volte.
Drew: Quindi questa è la C, Composizione. Poi abbiamo U, che è Utility. Quindi cosa intendiamo per utilità?
Andy: Quindi è una classe che fa un lavoro, e lo fa davvero bene. Potrebbe essere un'implementazione di un design token che... è un abstract di proprietà. Di solito sono i colori o gli stili tipografici, le taglie e le regole del genere. L'idea è di generare classi di utilità che le applicano. Quindi hai un'utilità che applicherà lo sfondo primario, che è come il colore primario, e poi il colore primario, che è il colore del testo. Quindi potresti generare alcuni token di spaziatura per il riempimento marginale e tutto quel genere di cose. Fanno solo un lavoro. Aggiungono solo quella regola di spaziatura, quella regola di un colore e il gioco è fatto.
Andy: Ma poi hai anche altre utilità. Quindi un buon esempio è un'utilità wrapper. Ciò che farà è inserire una larghezza massima su un elemento e quindi inserire il margine automatico sinistro e destro per posizionarlo nel mezzo della cosa. Quindi ha solo un lavoro, e lo sta facendo in modo efficiente e bene.
Andy: Quindi hai i tuoi stili globali, hai fatto molte impostazioni tipografiche e molto spazio sul pavimento. La tua composizione fornisce quindi contesto e layout. Quindi le utility applicano i token direttamente agli elementi per dare loro lo stile di cui hai bisogno. Quindi, come un'intestazione, ad esempio, stai dicendo: "Voglio che questa sia di queste dimensioni e voglio che abbia questo vantaggio e voglio che abbia questa misura". Poi a quel punto... questo è quello che stavo dicendo sui blocchi... poi vai più in basso nello stack e hai già fatto la maggior parte del lavoro a quel punto.
Andy: Quindi ti danno questo modo di lavorare davvero efficiente, e poiché anche l'HTML scorre lungo la tubazione, è davvero bello astrarre il carico di lavoro su HTML piuttosto che anche CSS, ho scoperto. Ero solito entrare davvero nelle classi di utilità, come in questo tipo di vecchio stile burbero di "Oh, separazione delle preoccupazioni", ma in realtà penso che sia un modo davvero dignitoso di lavorare. Ho menzionato nell'articolo che in realtà mi piace Tailwind CSS. Penso che funzioni e mi piace molto usarlo per la digitazione dei prodotti perché posso davvero mettere fuori qualcosa molto velocemente. Ma penso che vada un po' troppo oltre, fa Tailwind, mentre mi piace piovere quando va oltre la semplice applicazione di una singola regola su una classe. Quindi è tutto, penso. Fai?
Drew: Quindi, sì, nell'articolo parli molto di design token, che è qualcosa di cui abbiamo parlato nello Smashing Podcast con Jina Anne nell'episodio tre, penso che lo fosse. Quindi sembra che i design token siano un aspetto davvero fondamentale.
Andy: Sì. Oh, Dio, sì. Ricordo così vividamente quando Jina stava facendo le cose del Lightning Design System perché all'epoca stavo costruendo un sistema di progettazione, o qualcosa che assomigliava a un sistema di progettazione, e stavamo lottando per ottenerne l'approvazione da parte dell'esecutivo. Quando è uscito il Lightning Design System, ho letteralmente inviato loro link dopo link e ho detto: “Questo è quello che stiamo facendo. Stiamo costruendo un sistema di progettazione. Questo è ciò per cui Salesforce lo sta attualmente utilizzando". Ricordo che il suo lavoro all'epoca mi aiutava davvero a far passare le cose attraverso la porta.
Andy: Quindi la roba del design token è sempre rimasta con me come un ottimo modo per applicare queste regole. Perché sono un designer di professione, quindi posso semplicemente vedere che l'organizzazione e la capacità di organizzare e creare un'unica fonte di verità sono davvero utili perché è qualcosa che non abbiamo davvero avuto nel design digitale, specialmente in Adobe nell'era di lavorare con Photoshop e cose del genere, semplicemente non avevamo quel lusso. Lo avevamo stampato con il Pantone Book ma non lo avevamo in digitale con codici esadecimali casuali in tutto il negozio.
Andy: Quindi è semplicemente fantastico. Adoro quel livello di controllo. In realtà, penso che aiuti la creatività perché non stai più pensando a cose non importanti, stai solo pensando a cosa ci stai facendo.
Drew: L'implementazione di questi token di progettazione è particolarmente importante con l'approccio? Sono sempre proprietà personalizzate CSS?
Andy: Penso che questo sia un punto davvero importante con CUBE. Alcune delle risposte che ho avuto, le persone hanno lottato un po' con questo. Non c'è alcuna menzione di tecnologia in esso. L'unica tecnologia coerente è CSS. Puoi farlo come vuoi. Potresti fare tutto questo con qualsiasi cosa CSS e JS stiano facendo le persone ora, oppure potresti farlo solo con Vanilla CSS. Potresti farlo con Sass. Lo faccio con Sass. Meno, se è quello che stai ancora facendo. Tutte queste tecnologie disponibili, post CSS, tutte queste cose. Puoi fare come vuoi, non importa.
Andy: L'idea è che se segui questo tipo di costrutti, andrà tutto bene. Questa è l'idea alla base. È molto sciolto e non rigoroso come alcune metodologie. L'ho visto in particolare con BEM, le persone sono davvero radicate nei principi del BEM al punto in cui è come se non stessi nemmeno risolvendo più il problema. Penso che devi essere flessibile. L'ho detto in questo discorso l'anno scorso. Ero tipo: "Se ti attacchi troppo alle tue pistole, a lungo termine puoi effettivamente causare problemi a te stesso perché cerchi di seguire un certo percorso e sai che non funziona più". Dovresti sempre essere flessibile e lavorare con un sistema piuttosto che lavorare alla lettera.
Drew: Quindi la B, la B è Block. Hai parlato di questa idea, che quando arrivi al livello del blocco, la maggior parte di tutto dovrebbe essere a posto, e quindi lo stile del livello del blocco riguarda solo i dettagli reali di un particolare componente. In generale, il concetto di blocco è simile a quello con cui le persone avranno familiarità?
Andy: Oh, assolutamente, sì. Quindi immagina il tuo componente BEM e togli tutte le cose visive da esso, ed è quello che ti rimane, essenzialmente, il blocco. Questo è ciò che ho faticato ad articolare quando ho iniziato a pensare a questa metodologia. Un blocco in realtà è davvero una C, è una composizione, ma questo lo rende davvero difficile perché sei in un territorio ricorsivo lì e penso che il cervello delle persone esploderebbe. Ma in realtà è quello che è un blocco, in realtà è un altro livello compositivo ma più una sorta di contesto rigoroso, quindi come la tua scheda, il tuo pulsante, il tuo carosello, se è quello che ti piace fare ancora, e tutto quel genere di cose.
Andy: È come una cosa specifica, un componente, e poi dentro di lì stai impostando regole specifiche da seguire, ignorando davvero il resto in modo da non essere... Potresti applicare dei token nei blocchi, e io lo faccio ancora, ma in realtà è più orientato al layout, è un blocco, per quanto ci lavoro, o almeno prendo il token e applicandolo in un modo specifico, come lo stato di un pulsante al passaggio del mouse, cose del genere. Quindi davvero il tuo blocco dovrebbe essere minuscolo quando arrivi a loro, non dovrebbero davvero fare molto.
Drew: Quindi potrebbe essere piccolo come un collegamento ipertestuale.
Andy: Sì.
Drew: Ma potrebbe anche essere una raccolta composta di altri blocchi?
Andy: Sì. Come una specie di modulo. Potresti sicuramente farlo. Perché, ancora, ciò risale al tipo di aspetto compositivo, è che qualunque cosa vi entri non dovrebbe avere importanza. Il buon esempio è come la carta. Quindi il contenuto di una scheda è, diciamo, come un'intestazione, un riepilogo e un pulsante. Non dovresti prendere di mira specificamente questi tre elementi. Dovresti dire: "Guarda, tutto ciò che capita di trovarsi nel contenuto, ha alcune regole di flusso lì dentro e ha una sorta di regole di layout compositivo", e poi non importa cosa ci metti dentro. Potresti decidere di voler inserire un'immagine in quel contenuto e dovrebbe funzionare, dovrebbe semplicemente avere un bell'aspetto.
Andy: Questo è lo scopo principale di lavorare con i CSS. È un modo molto clemente di lavorare con i CSS. Stai rendendo la tua vita molto più facile essendo meno rigido perché quando le cose si trovano accidentalmente in qualcosa, cosa che succederà, non sembra orribile come potrebbe fare se fossi più specifico sulle cose, è quello che ho fondare.
Drew: Ho sicuramente bisogno di molto perdono per il mio CSS!
Andy: So che lo fai!
Drew: Saluti! Quindi questa è la B. L'ultima cosa è E: E è Eccezione. Ora non stiamo parlando di messaggi di errore, vero?
Andy: No, no. È una specie di-
Drew: Non stiamo parlando di eccezioni JavaScript.
Andy: Sì, sì. Non dovrebbe esserci niente di tutto questo a questo punto. Spero di no comunque, altrimenti a quel punto sei proprio nel bosco: non credo di poterti aiutare! L'idea di tutto questo è... quindi hai creato il contesto con il tuo blocco, e un'eccezione è esattamente questa, è come un'eccezione alla regola: quindi una carta girata, o potrebbe essere un pulsante fantasma. Quindi conosci quei pulsanti che hanno appena un bordo e uno sfondo trasparente? Sarebbe un'eccezione perché un pulsante ha probabilmente un colore di sfondo a tinta unita e quindi il colore dell'etichetta. Quindi sta creando una sorta di distinto stato di variazione.
Andy: Il motivo per cui lo faccio con gli attributi dei dati anziché con le classi, e il motivo è perché a) Penso che sia bello avere una distinzione. Quindi, quando esegui la scansione di un sacco di HTML, puoi vedere dati, trattino qualcosa, sei tipo "Va bene, qualcosa è decisamente cambiato su questo elemento". L'altra cosa è che è molto bello dare a JavaScript l'accesso a quello stato e anche viceversa. Quindi mi piace molto applicare lo stato con gli attributi dei dati in JavaScript. Penso che sia essenzialmente quello a cui servono, una sorta di livello di comunicazione. L'armonia tra loro sembra funzionare davvero bene.
Andy: Quindi un buon esempio è, supponiamo che tu abbia un messaggio di stato e quindi JavaScript aggiungerà lo stato dei dati è successo, errore o informazione o qualcosa del genere. Puoi quindi collegarti con i tuoi stili di eccezione in CSS. Quindi sai che è un'eccezione del componente di stato e sta andando contro il suo stato predefinito. Quindi è solo un modo davvero pratico di lavorare con le cose. È prevedibile su entrambe le estremità: è prevedibile sul lato CSS ed è prevedibile anche sul lato JavaScript.
Drew: Immagino sia abbastanza carino che qualcosa che i nomi delle classi non ti danno sia una proprietà e un valore. Quindi, se vuoi avere qualcosa come quello che è lo stato, e può essere un successo o un fallimento o un avvertimento o quello che hai, puoi indirizzare specificamente quella proprietà dello stato e capovolgerne il valore. Considerando che con un lungo elenco di nomi di classi, se lo stai manipolando in JavaScript, ad esempio, dovrai guardare ognuno di essi e aggiungere quella logica aziendale che dice: "Posso solo impostare uno di questi,” e cosa succede se due di queste classi vengono applicate allo stesso elemento? Non puoi ottenerlo con un attributo di dati, ha solo un valore.
Andy: Sì. È un buon modo per dirlo, sì. È molto utile, ho scoperto, lavorare in questo modo.
Drew: È piuttosto interessante. Non credo di aver visto altre metodologie che adottano questo approccio. È completamente unico per CUBE, farlo?
Andy: Potrebbe essere. Non presto molta attenzione ad altre cose, cosa che dovrei fare. Probabilmente qualcun altro lo sta facendo. Te lo dico ora, è stato l'aspetto più controverso. Ad alcune persone non piaceva davvero l'idea di utilizzare gli attributi dei dati. Il fatto è che, e il modo in cui rispondo, è fare quello che vuoi. Non ti stiamo dicendo di fare le cose in un certo modo, sono solo suggerimenti. Se vuoi fare eccezioni alle classi CSS, come i modificatori, allora mettiti al tappeto. La polizia del CUBE non verrà a bussare alla tua porta. Va assolutamente bene.
Andy: La cosa del CUBE è una cosa pensante, è una struttura. Applichi quella struttura nel modo in cui vuoi applicarla, con gli strumenti che desideri o con la tecnologia che desideri. Finché mantieni le cose coerenti, questa è la cosa importante.
Drew: Quindi non esiste un CUBE puro?
Andy: Il modo in cui lo scrivo è puro CUBE, Drew. Tutti gli altri sono solo falsi, è solo una debole imitazione.
Drew: A parte te, nessuno può dire: "Quello non è CUBE da manuale".
Andy: No, questo è tutto. Nessuno può contestarlo davvero, vero? Quindi, sì, andrò con quello. Ti dà un po' di influenza o qualcosa del genere, penso, qualcosa del genere.
Drew: Puoi combinare un approccio CUBE con altre metodologie? Puoi usare bit di BEM?
Andy: Sì, credo di sì. Ci ho pensato un po' perché presto ci farò altre cose perché è diventato abbastanza popolare, quindi le persone vorranno più lavoro. Una cosa che esaminerò è come affrontare l'utilizzo della metodologia CUBE con qualcosa di esistente.
Andy: Quindi ci sono due estremi opposti della scala. Una buona domanda che le persone hanno posto è: "Come funziona con ogni layout, le altre cose?" In pratica, ogni layout è la C. Questo è ciò che ogni layout è, è il livello compositivo. Poi qualcun altro ha chiesto: "Beh, come funzionerebbe con qualcosa come Atomic Web Design, come le loro cose che ha fatto Brad Frost? È come se, beh, potresti rompere quei pezzi e applicarli a ogni livello. Atomic Design va fino in fondo nei micro dettagli. È astrarlo nell'usarlo, giusto, ok, beh, posso applicarlo con le utilità, quindi le molecole, penso. Posso applicarlo con le utilità e sta traducendo ciò che già conosci in questa struttura di lavoro leggermente diversa.
Andy: Davvero, è una ridenominazione di molte cose. Non ho inventato niente qui, ho solo, come ho detto, ho appena rubato cose che mi piacciono. Adoro il modo in cui vengono pensate alcune delle cose di Atomic Design. Questo è davvero un lavoro intelligente. E BEM. Le cose che Harry ha fatto, l'Inverted Triangle CSS, ho pensato che fosse davvero fantastico. Quindi ho appena ritagliato dei pezzi che mi piacciono da ognuno di essi e li ho in qualche modo ricuciti tutti insieme in quest'altra cosa ibrida, l'approccio. Altro in arrivo, credo.
Drew: L'approccio CUBE può essere applicato a progetti esistenti che dispongono già di CSS o è qualcosa con cui devi davvero iniziare un nuovo progetto?
Andy: Dipende molto. Quindi, se hai un lavoro di bootstrap e ha solo migliaia di righe di CSS personalizzati, in cui sono stato sicuramente coinvolto prima, allora penso che potresti provare a spegnere un incendio con una bottiglia d'acqua a quello punto. But if you… say, for instance, if you've got a rough BEM setup and it's gone a bit layer-y, you could use CUBE to refactor and actually pull it back into shape again.
Andy: It depends, the answer to that one. But it's doable, as with everything. If you really want it to work, Drew, you can do it if you want, can't you? The world is our oyster!
Drew: Especially if your BEM site's gone layer-y.
Andy: Yeah. Nothing worse than a layer-y BEM site!
Drew: I've noticed in the examples that you've given… and I've got an eagle eye, I've seen you've been doing this for a while… a lot of your class values in the HTML attribute are wrapped in square brackets.
Andy: Oh, God, yeah. Tell you what, Drew-
Drew: What is that about? Di cosa si tratta?
Andy: I'll tell you what, if there's ever one thing that I've done in my whole career that's just been absolutely outrageously controversial… and you follow me on Twitter, you've seen what comes out of my mouth… it's those bloody brackets! My, God! People either love them or hate them. They're Marmite, they are.
Andy: The reason I do them is a grouping mechanism. So if you look at the way that they're structured, the way I do it is, block at the start and then I'll do a utilities after that. Then what I might do is, in between a block group and a utility group, there might be another block class. So a good example of that would be… we'll go back to the card again. But then say that there's a specific block called a CTA, like a call to action. You might have that applied to the card as well, and then your utilities are enforcing the design attributes, so the colors and all that business. So then you've got three groups of stuff.
Andy: When you come to it, if you've got that order in your head each time, you know, okay, right, this first group's blocks. Oh, that's looks like another block. I've got that one. Then it's like, right, they're definitely utility classes. Then what I might even do is, if there's a lot of design token implementation, have that in a separate group. So it's just very clear what each group is doing, and there's a separation inside of the classes there as well. I've found it really helpful. Some people find it incredibly offensive. It's definitely a do it if you want to do it. Definitely you don't have to do it.
Andy: It's quite funny, when I published that article, so many people finished halfway through to ask me, “What is it with these brackets?” I was like, “Did you finish the article? Because there's a big section at the end where it explains exactly what they're doing,” to the point where I actually had to write a bit in the middle of the article of, “If the brackets are essentially doing your head in, click here and I'll skip you all the way down to that explanation bit so you can just read about them.” It can be quite controversial.
Andy: When I've worked on really, really complex front-ends… and we did a little bit of stuff together, didn't we, last year?
Drew: Sì.
Andy: You've seen the sort of design implementation on that project that we were on. It requires that sort of grouping because there's just so much going on at the time, there's so much different stuff happening. I've just found it really, really useful over the years, and also get lots of questions about it, to the point where I was almost going to write just one page on my website that I could just fire people to to answer the question for them.
Drew: Slash, what's with the brackets?
Andy: Yeah. Slash, brackets. Have you seen that new Hey Email thing that's just come out? They've bought a domain of itsnotatypo.com, just to answer the whole Imbox, like im with an M rather than an in. Basically, I was like, “I think I need to do that,” like, whatswiththebrackets.com, and just do a one-pager about it.
Drew: It strikes me that the approach with brackets actually could be something that might be useful when using things like Tailwind or something that has a lot of classes because that can-
Andy: Yeah. Oh, God, yes.
Drew: You have classes that are addressing your break points and what have you, and then you'll have things that are for layout, things that are for color or type, or what have you. So it might also be a useful way of dealing in situations like that.
Andy: I'd definitely agree with that. A good analogy… not analogy. A good bit of info about Tailwind is that I actually quite like Tailwind. I've used that on very big projects. The one thing that really opened my eyes to Tailwind though was when I saw a junior developer try to work out what was going on, and it was really, really eye-opening because they just didn't have a clue what was happening.
Andy: I think that's one problem I've found with these sort of over-engineered approaches, which I think it's fair to say Tailwind is, is that there's a certain skill level that is required to work with it. I know the industry tends to have an obsession with seniority now, but there's still people that are just getting into the game that we need to accommodate, and I think having stuff that's closer to the language itself is more helpful in those situations because they're probably learning material that is the language as it is. So I think it's just a bit more helpful. Especially having a diverse team of people as well. Just food for thought for everyone.
Drew: People might look at all the different methodologies that are out there and say, “This is evidence that CSS is terrible and broken, that we need… all these problems have to be solved by hacking stuff on top. We need tools to fix bits of CSS. We need strict procedures for how we implement it, just to get it to work.” Should the platform be adapting itself? Do we need new bits of CSS to try and solve these problems or are we all right just hacking around and making up funny acronyms?
Andy: I think the power of CSS, I think, is its flexibility. So if you're going to program CSS, a lot of the knowledge is less of the syntax and more of the workings of a browser and how it works. I think that might be a suggestion, that the problem is that people might not have learnt CSS quite as thoroughly as they thought they might have learnt it, who created these problems. I've seen that in evidence myself. I spotted a spacing mechanism that had been invested, which was very complicated, and I thought, “This person has not learnt what padding is because padding would actually fix this problem for them, understanding how padding works and the box model.” That's not to be snidey about it.
Andy: We work in an industry now that moves at an even faster pace than it has done previously and I think there's a lot less time for people to learn things in detail. But, on that front, I think CSS still does have work to do in terms of the working group, who I think do a bloody good job. A great, shining example of their work was the Grid spec which was just phenomenal. The way that rolled out in pretty much every browser on day one, I thought that was so good.
Andy: But we've got more work to do, I think, and I think maybe the pace might need to increase a little, especially with stuff like container queries, we all love talking about them. Stuff like that I think would help to put CSS in a different light with people, I think. But I think CSS is brilliant, I love it. I've never had a problem with it in lots of years really. I do find some of the solutions a bit odd, but there you go.
Drew: What's the response been like to CUBE since you published the article?
Andy: Mind-blowing. I honestly published it as just supporting material, and that's all I expected it to be, and it's just blown up all over the place. A lot of people have been reading it, asking about it, been really interested about it. There's definitely more to come on it.
Andy: I did say in the article, I said, “Look, if people are actually quite interested in this, I'll expand on this post and actually make some documentation.” I've got bits of documentation dotted around all over the place, but to sort of centralize that, and then I was thinking of doing some workshops and stuff. So there's stuff to go. It's how Every Layout started as well. We both had these scattered ideas about layout and then we sort of merged them together. So something like that, I suppose, will come in the future.
Drew: Are there any downsides that you're aware of to using CUBE? Are there problems that it doesn't attempt to solve?
Andy: Yeah. This accent, Drew, it just won't go way, no matter what I do! In all seriousness, I think CUBE's got as close as I can get to being happy with the front-end, which is saying a lot, I think. You never know, things might change again. This has evolved over more recent years. Give it another five years, I'll probably be struggling with this and trying something else. I think that's the key point, is to just keep working on yourself and working on what you know and how you approach things.
Andy: This definitely won't work for everyone as well, I know that for a fact. I know that from my comments. I don't expect it to work for everyone. I don't expect anything to work for everyone. It's the same with JavaScript stuff: some people like the reactive stuff and some people don't. It is what it is. We're all people at the end of the day, we all have different tastes. It's all about communicating with your teammates at the end of the day, that's the important thing.
Drew: I know you as a very talented designer and developer and you, like many of us, you're just working on real projects all day, every day. But you've recently started publishing on this site, Piccalilli, which is where the CUBE CSS introduction article was. So Piccalilli is kind of a new venture for you, isn't it? What's it all about?
Andy: Very kind of you to say, Drew. You've actually worked with me, so that's high praise. But the Piccalilli thing is an evolution. So I'm a freelancer. I do client work, but I think this has become apparent with the pandemic, that that is not the most sustainable thing in the world in some industries. I think freelancing can be very, very tough, as a developer and designer. It's something that I've been doing it for so long now, 10 years… well, 12 years now actually.
Andy: Mi piaceva fare qualcosa di un po' diverso e applicare le conoscenze che ho e condividerle effettivamente con le persone. Sono sempre stato molto aperto e condivido, e volevo ufficializzarlo. Così ho creato Piccalilli per scrivere tutorial, ma principalmente per i piatti che sto producendo: ecco la carne principale e le patate. E poi c'è la newsletter che è... la gente si sta davvero godendo la newsletter perché condivido cose interessanti che ho trovato su Internet ogni settimana. Questa è la spina dorsale. Sta andando davvero bene. Questo è essenzialmente il punto in cui voglio vedermi fare sempre più a tempo pieno, con il passare degli anni, credo.
Drew: Allora cosa accadrà per Piccalilli? Hai qualcosa che hai in uscita?
Andy: Grazie per la porta aperta lì, Drew! Quando questa registrazione uscirà, il primo corso sarà live: Learn Eleventy From Scratch, ed è qui che impariamo come costruire un sito web Gatsby! No, impari come costruire un sito Eleventy. Quindi inizi con una directory completamente vuota, non c'è niente in essa, è vuota, e poi alla fine finirai con questo sito di agenzia davvero carino. Impariamo tutti i tipi in esso. Impari come andare davvero in città con Eleventy. Estraiamo dati remoti da luoghi. Usiamo CUBE CSS per creare un front-end davvero interessante.
Andy: Se vuoi entrare in Jamstack e vuoi entrare nei generatori di siti statici, o semplicemente come costruire un bel sito web, è solo un corso davvero utile, spero, per quello. Attualmente è in fase di modifica entro un centimetro dalla sua vita mentre stiamo parlando. Sarà bello, spero, e utile. Ma è un accumulo di molte cose che ho fatto negli ultimi due anni. Quindi dovrebbe essere divertente.
Andy: Quindi compralo e farò un codice sconto, come smashingpod con uno sconto del 40% e potrai ottenerlo quando uscirà.
Drew: Incredibile. Lo collegheremo. Hai già capito come si scrive Piccalilli in modo affidabile?
Andy: Ero con Chris e Dave allo ShopTalk Show e lì ho detto: "Se c'è una cosa per cui vuoi assumermi è scrivere Piccalilli a mano la prima volta senza nemmeno pensarci", perché ho Ho scritto quella parola così tante volte che so esattamente come scriverla a memoria. Quindi la risposta alla tua domanda è sì.
Drew: Beh, sto ancora lottando, te lo dico io!
Andy: È difficile. Oh Dio. Sono totalmente empatico. Mi ci è voluto molto tempo per imparare a scriverlo, ma è una di quelle parole nel nostro vocabolario. Quest'anno sto cercando di scrivere necessario senza commettere errori di ortografia!
Drew: Quindi ho imparato tutto su CUBE CSS. Cosa stai imparando ultimamente, Andy?
Andy: Sai cosa? Questo ti sorprenderà, Drew. MySQL è ciò che ho imparato di recente. Quindi, in pratica, Piccalilli è totalmente autopubblicato. È un sito Eleventy ma ha un'API dietro e dietro c'è un database MySQL. Le cose che danno alle persone i contenuti che hanno acquistato richiedono alcune query piuttosto pesanti. Quindi ho appena investito correttamente in alcuni MySQL... in particolare la differenza tra i join, che in realtà non mi rendevo conto che c'era una differenza tra ogni tipo di join. Quindi è stato davvero utile e ha portato ad alcune interazioni piuttosto veloci con il database.
Andy: Gestivo questa cosa chiamata Front-End Challenges Club e quando l'ho lanciato per la prima volta è semplicemente crollato ed è morto su se stesso perché MySQL era a dir poco scadente. Quindi ho davvero imparato a farlo perché non sono affatto una persona di back-end, sono un pixel pusher. Quindi non è assolutamente nel mio mandato. Questo è più il tuo collo del bosco, vero? Lo trovo davvero fantastico, MySQL. In realtà mi piace molto scriverlo. È davvero un bel linguaggio didattico, vero?
Drew: Lo è, è fantastico. Ho imparato l'SQL a scuola.
Andy: Wow!
Drew: Stiamo parlando di 20 anni fa.
Andy: Avevano i computer a quei tempi?
Drew: L' hanno fatto, sì. Abbiamo dovuto vento-
Andy: Dovevi scriverlo a mano?
Drew: Abbiamo dovuto liquidarli! Noi facemmo. Ma, ti dico, per uno sviluppatore, è come imparare le tue tabelline: una di quelle cose che sembra un po' un lavoro ingrato ma una volta che sei fluente, diventa utile più e più volte.
Andy: Sì. Di sicuro. Ci sono anche differenze davvero tangibili. Vedi davvero la differenza di velocità. Mi piace molto lavorare con Node perché è molto veloce, ma Node e MySQL sono solo... non una scelta molto comune, ma penso che sia una buona scelta. Penso che funzioni davvero, davvero bene. Quindi ne sono felice. Come sai, non mi piace scrivere PHP. Quindi non sarà mai un'opzione.
Drew: Se tu, caro ascoltatore, vorresti sentire di più da Andy, puoi seguirlo su Twitter dove è su hankchizljaw. Puoi trovare Piccalilli su piccalil.li, dove troverai anche l'articolo che descrive CUBE CSS e aggiungeremo anche collegamenti a tutti quelli nelle note dello spettacolo, ovviamente.
Drew: Grazie per esserti unito a noi oggi, Andy. Hai avuto qualche parola d'addio?
Andy: Stai al sicuro e indossa la tua maschera.