Qu'estce que CUBE CSS?

Aujourd'hui, nous parlons de CUBE CSS. Qu'est-ce que c'est et comment diffère-t-il des approches telles que BEM, SMACSS et OOCSS? J'ai parlé à son créateur, Andy Bell, pour le découvrir.

Afficher les notes

Note : Les auditeurs du Smashing Podcast peuvent économiser 40% sur Andy Learn Eleventy From Scratch cours utilisant le code SMASHINGPOD .

Mise à jour hebdomadaire

Transcription

Drew McLellan: Il est un éducateur et concepteur de sites Web indépendant basé au Royaume-Uni et a travaillé dans le concepteur industries du Web depuis plus d'une décennie. Pendant ce temps, il a travaillé avec certaines des plus grandes organisations du monde, comme Harley-Davidson, BSkyB, Unilever, Oracle et le NHS. Aux côtés de Heydon Pickering, il est co-auteur de Every Layout et dirige le Front-End Challenges Club, qui se concentre sur l'enseignement des meilleures pratiques de développement frontal via des défis courts et amusants.

Drew: Sa dernière aventure est Piccalilli, une newsletter de site Web avec des tutoriels et des cours pour vous aider à passer au niveau supérieur en tant que développeur et concepteur frontal. Nous savons donc qu'il est un développeur et un éducateur expérimenté, mais saviez-vous qu'il était la première personne autorisée à concourir à Crufts avec un panda?

Drew: Mes amis Smashing, je vous prie de souhaiter la bienvenue, Andy Bell. Salut, Andy, comment vas-tu?

Andy Bell: Je fracasse, merci. Comment allez-vous?

Drew: Je vais très bien, merci beaucoup. Maintenant, je voulais vous parler aujourd'hui de quelque chose que vous avez publié sur votre site, Piccalilli, d'une méthodologie CSS que vous avez développée pour vous au cours des dernières années. Tout d'abord, je suppose que nous devrions probablement explorer ce que nous entendons par une méthodologie CSS, car cela pourrait signifier différentes choses pour différentes personnes. Alors, quand vous pensez à la méthodologie CSS, qu'est-ce que vous en pensez?

Andy: C'est une bonne et difficile question pour commencer, Drew. Appréciez cela, merci!

Drew: Bienvenue!

Andy: C’est délicat. Donc, pour le contexte, j'utilise BEM depuis longtemps, c'est le Block Element Modifier. Cela fait longtemps. La façon dont je regarde une méthodologie CSS est, ce n'est pas un cadre, c'est une structure organisationnelle. C’est comme ça que j’aime voir ça. C’est presque comme un processus. C'est comme si vous aviez un problème que vous devez résoudre avec CSS et que vous utilisez la méthodologie pour le résoudre pour vous et garder les choses prévisibles et organisées. BEM est juste légendaire pour cela parce qu'il a connu un succès retentissant.

Andy: Ensuite, vous pourriez presque qualifier des choses comme les composants de style et ce genre de choses. Vous pouvez presque dire qu’ils sont orientés vers la méthodologie, même s’ils sont un peu plus liés au cadre, mais quand même, c’est une méthodologie pour casser les choses en petites molécules. C'est donc essentiellement ce que j'essaie de faire avec CUBE CSS.

Drew: Donc, c'est une application de processus pour la façon dont vous architectez et vous écrivez CSS, et ce n'est pas tellement quelque chose qui est basé sur des outils ou tout autre type de technologie. , c'est juste une sorte de flux de travail. Il existe donc de nombreuses approches différentes. Vous avez mentionné BEM. Il y a SMACSS, OOCSS, Atomic CSS. Et puis vous avez ce genre d'approches amoureuses inhabituelles comme ABEM. Avez-vous vu celui-là?

Andy: Ouais.

Drew: Pourquoi publier le vôtre?

Andy: Oui, oui. Pourquoi faire le vôtre? C’est une très bonne question. Je pense que ceux qui me connaissent bien savent que j'aime beaucoup naviguer à contre-courant. C’est principalement parce que j’ai aussi tendance à faire beaucoup de projets variés, dans des équipes variées. Il est donc très difficile, j'ai trouvé, de travailler avec BEM avec un développeur traditionnel parce qu'ils sont habitués à utiliser CSS pour ce qu'est le CSS: la cascade, et cetera, et c'est pourquoi j'ai en quelque sorte volé cela dans le langage

Andy: D'un autre côté, c'est que les méthodologies moins structurées, il est plus difficile de travailler avec un programmeur, une sorte de personne JS parce qu'ils aiment la structure et l'organisation et les petits composants, ce qui est compréhensible en travaillant avec le langage qui ils travaillent.

Andy: Donc je me suis retrouvé dans ces positions où je travaillais avec différents types de personnes, différents types de projets où une méthodologie ne fonctionnait pas tout à fait. Au fil des ans, je viens de jouer avec cette idée de la façon dont les choses se passent, et puis il y a ce que moi et Heydon avons fait, Every Layout, qui a en quelque sorte appliqué la grande partie, qui est le C, la partie de la composition , puis je l'ai en quelque sorte évolué très rapidement au cours des six derniers mois.

Andy: La ​​seule raison pour laquelle j'ai écrit un article à ce sujet était parce que je suivais ce cours et je pensais mieux écrire du matériel supplémentaire pour l'accompagner afin que les gens le comprennent, et il est absolument explosé. Alors peut-être que nous n'avons pas encore fini les méthodologies, Drew.

Drew: Donc le matériel de cours que vous avez préparé utilise réellement CUBE CSS comme méthodologie, n'est-ce pas?

Andy: Ouais. Donc, un bon 50% du cours est en fait frontal, même si c'est un cours illimité. C'est tellement, si profondément lié à la façon dont nous construisons le front-end que je ne pouvais pas simplement dire: "Oh, au fait, voici comment j'écris un joli CSS", puis laissez-le. Je sais que les gens aiment entrer dans les détails, donc je me disais, ce que je ferai, j'écrirai ce post qui est vraiment long et très détaillé et puis si quelqu'un veut se perfectionner et vraiment comprendre ce que nous faisons , alors ils peuvent faire, et le reste est à partir de là. Et nous voici aujourd'hui, Drew, assis et en discutant.

Drew: Donc, si quelqu'un comprend déjà le BEM et utilise peut-être déjà le BEM, par exemple, parce que c'est probablement l'une des méthodologies les plus largement adoptées, n'est-ce pas? n'est-ce pas? Donc, s'ils ont déjà une bonne compréhension de BEM et qu'ils viennent sur CUBE, est-ce quelque chose qu'ils trouveraient facile à adopter? Y a-t-il beaucoup de similitudes ou est-ce complètement différent?

Andy: Ouais. Je dirais que passer de BEM à CUBE est probablement une transition en douceur, en particulier la façon dont j'aime toujours écrire le CSS pour CUBE. Donc, la majorité des choses se passent à un niveau supérieur. Donc, cela se produit au niveau de la cascade et cela se produit au niveau mondial CSS, en utilisant les utilitaires pour faire beaucoup de choses. Mais lorsque vous en entrez dans les écrous et les boulons, ce sont des composants, des blocs et des éléments très similaires à BEM. La seule chose qui est en quelque sorte différente de BEM est que, au lieu d'avoir des modificateurs, nous utilisons plutôt ce qu'on appelle des exceptions qui, au lieu d'utiliser des classes CSS, se transforme en attributs de données, ce qui, je pense, donne une bonne séparation et un réel exception, ce qui devrait être un modificateur.

Andy: Une partie de la raison pour laquelle j'ai en quelque sorte quitté le BEM parce que j'ai trouvé la façon dont je travaillais avec lui, en particulier dans les systèmes de conception, était les modificateurs étaient dominés et c'est devenu un problème parce que c'était comme, quel est le rôle de mon bloc à ce stade? Parce que si je le modifie au point où il est méconnaissable régulièrement, cette méthodologie fonctionne-t-elle toujours comme elle est censée fonctionner?

Andy: Ensuite, il y a tout le truc du jeton de conception, le truc que Jina a fait avec le Lightning Design System que nous avons tous commencé à adopter maintenant. Les trucs de classe utilitaire ont vraiment commencé à donner un sens à cette approche. Donc, j'ai en quelque sorte effacé toutes les choses que j'aime dans le travail des autres et je me suis glissé dans le mien à la place.

Drew: Vous parlez avec BEM, le genre d'approche modificatrice qui permet de devenir hors de contrôle. Était-ce l'un des principaux problèmes avec BEM que CUBE essaie de résoudre?

Andy: Oui, absolument. J'aime bien l'approche de modification avec BEM, cela a du sens. Ce que j'aime dans BEM, c'est quelque chose que je fais toujours, c'est le double soulignement pour un élément, et puis il y a le double tiret pour un modificateur. J'aime cette façon d'organiser les choses. C'était juste un cas d'accord, eh bien, beaucoup de modificateurs que je peux réellement expliquer avec les classes d'utilité et ensuite les autres bits …

Andy: Donc l'exemple que j'utilise dans l'article est, imaginez-vous ' ai obtenu une carte, puis la carte est retournée, de sorte que le contenu apparaît avant l'image. Alors ça a du sens, voir display: flex puis on l'inverse, on inverse l'ordre. Cela a du sens, d'avoir une règle d'exception pour cela parce que c'est une exception de l'état par défaut de la carte, et c'est comme ça que j'aime le voir. C'est comme un état affecté sur ce composant, c'est ce qui est une exception, et cela a du sens.

Andy: Avec beaucoup de choses que j'ai faites plus récemment, la pile frontale moderne avec réactif JavaScript, il y a beaucoup de changements d'état et il est logique de le gérer de manière appropriée entre CSS et JavaScript car ils sont de plus en plus entrelacés les uns avec les autres, que cela vous plaise ou non. C'est un langage commun pour eux. Comme vous pouvez le voir sur mon visage, pas du tout, mais voilà. Vous pensez probablement: "En fait, j'ai beaucoup travaillé avec React récemment, donc je suis dans l'autre sens." Je peux donc voir cela aussi.

Drew: Alors passons au CUBE. CUBE signifie donc Composition Utility Block Exception.

Andy: Ouais. C'est celui-là.

Drew: Qu'est-ce que ça veut dire sur terre?

Andy: Oh, mec, tu aurais dû l'entendre avant! Je faisais un discours l'année dernière. J'ai fait un discours, et il s'appelait Keeping it Simple avec CSS qui évolue, et là j'en ai en quelque sorte introduit une version antérieure appelée CBEUT, qui était Cascade Block Element Utility Token. C'était nul. J'en détestais le nom. Je l'ai fait plusieurs fois, cette conférence l'année dernière, et je n'ai vraiment pas aimé le nom. Puis, quand j'ai commencé à faire ce genre de choses cette année, j'ai pensé: "J'ai vraiment besoin de réfléchir à ce que c'est réellement et à ce que ça s'appelle." Je pense que CUBE est un peu moins de détritus. Je pense que c'est la meilleure façon de le décrire.

Andy: Mais alors, les noms sont toujours des ordures pour ces choses, n'est-ce pas? Je veux dire, comme BEM, quel nom de déchet! Mais nous le faisons tous. Regardez Jamstack: c'est aussi un nom terrible, n'est-ce pas?

Drew: Mes lèvres sont scellées!

Andy: Votre patron va, "Quoi?" C'est vrai. C'est juste comme ça, n'est-ce pas, dans notre industrie.

Drew: Il semble que beaucoup de méthodologies CSS essaient de contourner certaines des fonctionnalités de CSS, des choses comme la cascade. D'après ce que j'ai lu, CUBE essaie d'utiliser ce genre de fonctionnalités et de propriétés de CSS.

Andy: Ouais. Une bonne analogie car SCSS, comme Sass, est une extension du langage CSS naturel, n'est-ce pas? Vous avez à peu près toujours raison en CSS. Donc CUBE CSS est comme ça. C'est donc une extension de CSS. Nous devons donc toujours écrire du CSS, comme le CSS devrait… eh bien, il est censé être écrit. Soyons honnêtes, la façon dont il est censé être écrit, c'est que le nom le donne: Feuilles de style en cascade. Donc, c'est encore une fois parce que ce que j'ai trouvé, c'est que je suis allé jusqu'au niveau de micro-optimisation. J'ai suivi le chemin que je vois beaucoup de gens descendre récemment là où … et je l'ai également mentionné dans l'article, où je peux voir … il y a des preuves de cela récemment. J'ai repéré que des gens avaient créé des composants d'espacement et des trucs comme ça, et je comprends ce problème, je me suis retrouvé dans cette situation.

Andy: La ​​façon dont je l'ai corrigé, au lieu de forer et d'essayer pour micro-optimiser, j'ai en fait commencé à penser à des choses au niveau de la composition, car peu importe la taille de vos composants, à un moment donné ils seront des pages, ils seront des vues. Vous ne pouvez pas éviter cela, c'est comme ça que ça va être. Donc, au lieu d'essayer de dire: «D'accord, j'ai besoin de ces minuscules petits assistants pour faire cette mise en page», vous dites: «D'accord, j'ai une vue de page de contact ou une page de produit, et c'est une composition de disposition squelettique. Ensuite, à l'intérieur, je peux y insérer tous les composants que je veux. » Nous avons maintenant des choses comme Grid et Flexbox qui rendent cela beaucoup plus réalisable, et vous pouvez essentiellement mettre ce que vous voulez à l'intérieur de la disposition squelettique, cela n'a pas d'importance. Ensuite, les composants devraient, à ce stade, se comporter comme vous voulez qu'ils se comportent, avec ou sans requêtes de conteneur.

Drew: Ceci est la partie de la composition de CUBE où vous regardez les choses à plus d'une macro niveau, en regardant comment les composants peuvent être composés dans une vue pour créer le type de pages que vous devez créer pour un site ou une application ou ce que vous avez.

Andy: Il s'agit donc essentiellement de créer des règles. C’est comme une orientation. Il essaie d'obtenir des directives pour quelque chose. Ce n'est pas comme des règles strictes, comme, vous devriez faire ceci, vous devriez faire cela. C'est essentiellement ce que vous faites avec le navigateur, avec cette méthodologie, c'est que vous dites … vous ne le forcez pas à faire quoi que ce soit. Vous dites: "Écoutez, idéalement, si vous pouviez le présenter comme ça, ce serait formidable, mais je comprends que cela pourrait ne pas être le cas, alors voici quelques limites et certains niveaux supérieurs et inférieurs avec lesquels nous pouvons travailler. Faites ce que vous pouvez et applaudissez. » Ensuite, il vous suffit de lui jeter quelques composants et de le laisser faire ce qu'il fait.

Andy: Donc, un bon exemple verrait… nous faisons une mise en page dans chaque mise en page appelée le commutateur, qui essentiellement mettra en ligne les éléments jusqu'à un certain point où le calcul qui détermine la largeur qu'il devrait simplement les empiler les uns sur les autres. Mais parce que nous ajoutons de la marge à la ligne et au bloc, cela fonctionne, quel que soit son état, il a toujours l'air bien. C'est l'idée, c'est que nous ne disons pas au navigateur de dire: "Vous devez superposer cette grille à trois colonnes." Nous disons: "Si vous pouvez superposer une grille à trois colonnes, faites-le. Sinon, empilez et espacez plutôt. » C'est donc ce genre de méthodologie, de laisser le navigateur faire son travail vraiment.

Drew: Beaucoup des différentes approches qui ont été adoptées pour CSS au cours des dernières années se sont beaucoup concentrées sur le niveau des composants de traitement avec tout comme c'est un composant. CUBE ne minimise pas tellement cet aspect des composants, il donne simplement ce concept supplémentaire au-dessus de la prise de ces composants et de leur composition dans de plus grandes dispositions, plutôt que de simplement dire que la disposition n'est qu'un autre composant.

Andy: Ouais , c'est un bon point, oui. Je pense que la chose à dire sur les composants est qu’ils sont importants, en particulier dans le front-end moderne. Nous faisons beaucoup de choses sur les composants, sur les systèmes. Mais la façon dont je vois un composant est, c'est un ensemble de règles qui étendent ce qui a déjà été fait.

Andy: Le point que je fais dans l'article est, au moment où vous descendez au niveau du bloc, la plupart de votre style a effectivement été fait, et vraiment ce que votre composant fait est de parsemer l'Is et de traverser le Ts et il dit: "D'accord, dans ce contexte …" Donc, pour une carte, par exemple, faites en sorte que l'image ait une hauteur minimale de X, et ajoutez un peu de rembourrage ici. Faites ceci, cela et l'autre. Mettez un bouton ici. C'est juste une sorte de règles supplémentaires en plus de ce qui a déjà été hérité du reste du CSS. Je pense que c'est probablement la meilleure façon de le décrire.

Andy: Alors que dans BEM, le composant est la source de la vérité. Jusqu'à ce que vous mettiez cette classe sur l'élément, rien n'a été appliqué à ce stade et cette méthode fonctionne. Je viens de découvrir que j'ai écrit plus de CSS en faisant cela, et plus de CSS répétitifs, ce que je n'aime pas faire.

Drew: Considérez-vous la typographie et les couleurs et les rythmes verticaux, l'espacement, et tout le reste ça fait partie de l'idée de composition dans ce modèle?

Andy: Ouais. Dans un CSS global, oui, absolument. Le rythme vertical surtout, et le flow. Nous avons fait un article à ce sujet de 24 façons, n'est-ce pas, il y a quelques années, la composante débit et rythme. C'était aussi une sorte d'abstrait de cette approche, où vous définissez un composant de base qui utilise essentiellement le sélecteur de chouette lobotomisé. Je ne sais pas comment je vais décrire cela à la radio, mais nous le ferons. Nous allons simplement mettre, je pense, dans les notes de l'émission sur l'article Heydon ou quelque chose. Mais essentiellement cela, il sélectionne les éléments enfants … désolé, les éléments frères.

Andy: Donc, il dit: "Bon, chaque élément qui suit l'élément X a une marge supérieure aux coûts CSS et à la valeur de la propriété", puis la beauté vous pouvez alors également définir cette valeur de propriété personnalisée CSS dans un contexte de composition. Vous pouvez donc dire: «D'accord, dans ce composant, s'il y a un flux en cours, nous allons définir l'espace de flux à deux rem, car nous voulons qu'il soit agréable et costaud, le grand espace.» Ensuite, dans un autre, vous pourriez dire: "En fait, je veux que l'espace de flux soit à moitié rem parce que je veux qu'il soit serré." Tout cela se passe, tout le contrôle vient d'un niveau supérieur et ensuite ce que vous faites, vous ajoutez des remplacements contextuels plutôt que de le réinventer à chaque fois, réinventant la même chose encore et encore.

Drew: Voilà donc le C, Composition. Ensuite, nous avons U, qui est Utility. Alors, qu'entendons-nous par utilité?

Andy: C'est donc une classe qui fait un travail, et elle le fait très bien. Cela pourrait être une implémentation d'un jeton de conception qui… c'est un résumé des propriétés. Habituellement, ce sont les couleurs ou les styles de typographie, les tailles et les règles de ce genre. L'idée est de générer des classes utilitaires qui les appliquent. Vous disposez donc d'un utilitaire qui appliquera l'arrière-plan principal, qui est comme la couleur principale, puis la couleur principale, qui est la couleur du texte. Ensuite, vous pourriez générer des jetons d'espacement pour le remplissage marginal, et toutes ces sortes de choses. Ils font juste un travail. Ils ajoutent simplement cette règle d'espacement, cette règle d'une seule couleur, et c'est tout.

Andy: Mais vous avez également d'autres utilitaires. Un bon exemple est donc un utilitaire wrapper. Ce que cela fera, c'est qu'il mettra une largeur maximale sur un élément, puis il mettra une marge automatique gauche et droite pour le placer au milieu de la chose. Donc, il n'y a qu'un seul travail, et il le fait simplement et efficacement.

Andy: Donc, vous avez vos styles globaux, vous avez fait beaucoup de vos réglages de typographie et beaucoup de votre espace de plancher . Votre composition donne ensuite le contexte et la mise en page. Ensuite, les utilitaires appliquent des jetons directement aux éléments pour leur donner le style dont vous avez besoin. Donc, comme un titre, par exemple, vous dites: "Je veux que ce soit cette taille et je veux qu'il ait cette avance, et je veux qu'il ait cette mesure." Puis à ce moment-là … c'est ce que je disais sur les blocs … puis vous descendez plus bas dans la pile, et vous avez déjà fait la plupart du travail à ce moment-là.

Andy: Donc, ils vous donnent ceci une façon vraiment efficace de travailler, et parce que le HTML coule aussi dans le tuyau, il est vraiment agréable d'abstraire la charge de travail en HTML plutôt qu'en CSS, j'ai trouvé. J'avais l'habitude de vraiment entrer dans les classes utilitaires, comme dans ce genre de vieux style de curmudgeon, "Oh, séparation des préoccupations", mais je pense en fait que c'est une façon de travailler vraiment décente. Je mentionne dans l'article que j'aime réellement Tailwind CSS. Je pense que cela fonctionne, et j'aime vraiment l'utiliser pour taper des produits parce que je peux vraiment mettre quelque chose très rapidement. Mais je pense que ça va un peu trop loin, fait Tailwind, alors que j'aime pleuvoir quand ça va au-delà de l'application d'une seule règle à une classe. Donc c'est tout, je pense.

Drew: Donc, oui, vous parlez beaucoup dans l'article de jetons de conception, ce dont nous avons parlé sur le Smashing Podcast avec Jina Anne dans l'épisode trois, je pense que était. Il semble donc que les jetons de conception soient un aspect vraiment fondamental.

Andy: Ouais. Oh, mon Dieu, ouais. Je me souviens si bien quand Jina faisait les trucs du Lightning Design System parce que je construisais un système de conception à l'époque, ou quelque chose qui ressemblait à un système de conception, et nous avions du mal à obtenir l'approbation de l'exécutif. Quand le Lightning Design System est sorti, je leur ai littéralement envoyé lien après lien et j'ai dit: «C'est ce que nous faisons. Nous construisons un système de conception. C'est pour cela que Salesforce l'utilise actuellement. » Je me souviens que son travail à l'époque m'a en fait aidé à faire passer des trucs par la porte.

Andy: Ensuite, les trucs de jetons de conception m'ont toujours marqué comme étant un très bon moyen d'appliquer ces règles. Parce que je suis designer de métier, je peux donc voir que cette organisation et la capacité d'organiser et de créer une seule source de vérité sont vraiment utiles parce que c'est quelque chose que nous n'avons pas vraiment dans la conception numérique, en particulier dans Adobe ère de travailler avec Photoshop et d'autres choses, nous n'avions tout simplement pas ce luxe. Nous l'avions imprimé avec le Pantone Book, mais nous ne l'avions pas en numérique avec des codes hexadécimaux aléatoires dans tout le magasin.

Andy: Donc, c'est tout simplement génial. J'adore ce niveau de contrôle. En fait, je pense que cela aide à la créativité parce que vous ne pensez plus à des choses sans importance, vous pensez simplement à ce que vous en faites.

Drew: L'implémentation de ces jetons de conception est-elle particulièrement importante avec l'approche? Est-ce toujours des propriétés CSS personnalisées?

Andy: Je pense que c'est un point vraiment important avec CUBE. Certaines des réponses que j'ai eues, les gens ont un peu lutté avec cela. Il n’y est aucunement question de technologie. La seule technologie cohérente est CSS. Vous pouvez le faire comme vous le souhaitez. Vous pouvez faire tout cela avec tout ce que les gens font en CSS et JS, ou vous pouvez le faire avec juste Vanilla CSS. Vous pourriez le faire avec Sass. Je le fais avec Sass. Moins, si c'est ce que vous faites encore. Toutes ces technologies disponibles, post CSS, toutes ces choses. Vous pouvez faire ce que vous voulez, cela n'a pas d'importance.

Andy: L'idée est que si vous suivez ce genre de constructions, tout ira bien. C’est l’idée derrière. C’est très lâche et pas strict comme le sont certaines des méthodologies. Je l'ai vu avec BEM en particulier, les gens sont vraiment enracinés dans les principes de BEM au point où c'est comme si vous ne résolviez même plus le problème. Je pense que vous devez être flexible. Je l'ai dit dans cette conférence l'an dernier. Je me disais: "Si vous vous en tenez trop à vos armes, vous pouvez réellement vous causer des problèmes à long terme parce que vous essayez de suivre un certain chemin, et vous savez que cela ne fonctionne plus." Vous devez toujours être flexible et travailler avec un système plutôt que de travailler à la lettre.

Drew: Donc le B, le B est Block. Vous avez parlé de cette idée, qu'au moment où vous descendez au niveau du bloc, la plupart de tout devrait être en place, puis le style au niveau du bloc ne s'intéresse vraiment qu'aux détails réels d'un composant particulier. En général, le concept d'un bloc est-il similaire à ce que les gens connaissent?

Andy: Oh, absolument, oui. Imaginez donc votre composant BEM et retirez-en tous les éléments visuels, et c'est ce qui vous reste, essentiellement, le bloc. C'est ce que j'ai eu du mal à articuler lorsque j'ai commencé à penser à cette méthodologie. Un bloc est en fait vraiment un C, c'est une composition, mais cela rend vraiment difficile parce que vous êtes en territoire récursif là-bas et je pense que le cerveau des gens exploserait. Mais c'est vraiment ce qu'est un bloc, c'est en fait une autre couche de composition mais plutôt une sorte de contexte strict, donc comme votre carte, votre bouton, votre carrousel, si c'est ce que vous aimez faire encore, et tout ce genre de choses. [19659011] Andy: C'est comme une chose spécifique, un composant, puis à l'intérieur de celui-ci, vous définissez des règles spécifiques à suivre, ignorant vraiment le reste, donc vous ne l'êtes pas … Vous pourriez appliquer des jetons dans les blocs, et Je le fais toujours, mais il est vraiment plus orienté vers la mise en page, c'est un bloc, dans la mesure où je travaille avec eux, ou au moins en prenant le jeton et en l'appliquant d'une manière spécifique, comme un statut de survol de bouton, des trucs comme ça. Donc, vraiment, votre bloc devrait être minuscule au moment où vous vous y attelez, ils ne devraient pas vraiment faire grand-chose.

Drew: Il pourrait donc être aussi petit qu'un hyperlien.

Andy: Ouais.

Drew: Mais ça pourrait aussi être une collection composée d'autres blocs?

Andy: Ouais. Comme une sorte de module. Vous pourriez certainement le faire. Parce que, encore une fois, cela remonte au genre d’aspect compositionnel, c’est que tout ce qui y est contenu n’a pas d’importance. Le bon exemple de cela est comme la carte. Ainsi, le contenu d'une carte est, disons, comme un titre, un résumé et un bouton. Vous ne devriez pas vraiment cibler spécifiquement ces trois éléments. Vous devriez dire: «Écoutez, tout ce qui se trouve dans le contenu, contient des règles de flux et des règles de mise en page de composition», et peu importe ce que vous y mettez. Vous pourriez décider que vous voulez mettre une image dans ce contenu et cela devrait juste fonctionner, ça devrait juste aller bien.

Andy: C'est tout l'intérêt de travailler avec CSS. C'est une façon très indulgente de travailler avec CSS. Vous vous rendez la vie beaucoup plus facile en étant moins rigide parce que lorsque des choses se retrouvent accidentellement dans quelque chose, ce qui arrivera, cela n'a pas l'air horrible comme cela pourrait le faire si vous étiez plus précis sur les choses, c'est ce que j'ai

Drew: J'ai vraiment besoin de beaucoup de pardon autour de mon CSS!

Andy: Je sais que vous le faites!

Drew: Bravo! C'est donc le B. La dernière chose est E: E est Exception. Maintenant, nous ne parlons pas de messages d'erreur, n'est-ce pas?

Andy: Non, non. C'est une sorte de-

Drew: Nous ne parlons pas d'exceptions JavaScript.

Andy: Ouais, ouais. Il ne devrait rien y avoir à ce stade. Je ne devrais pas espérer de toute façon, sinon vous êtes vraiment dans les bois à ce stade: je ne pense pas que je vais pouvoir vous aider! L'idée est que … vous avez donc créé le contexte avec votre bloc, et une exception est exactement cela, c'est comme une exception à la règle: donc une carte retournée, ou ce pourrait être un bouton fantôme. Vous connaissez donc ces boutons qui viennent d'avoir une bordure et un fond transparent? Ce serait une exception car un bouton a probablement une couleur d'arrière-plan unie, puis la couleur de l'étiquette. Cela crée donc une sorte d'état de variation distinct.

Andy: La ​​raison pour laquelle je fais cela avec des attributs de données au lieu de classes, et c'est parce que a) Je pense que c'est bien d'avoir une distinction . Donc, lorsque vous parcourez beaucoup de code HTML, vous pouvez voir des données, mettre un trait d'union, vous vous dites: "D'accord, quelque chose a définitivement changé sur cet élément." L'autre chose est qu'il est très agréable de donner un accès JavaScript à cet état, et vice versa également. Donc j'aime vraiment appliquer l'état avec des attributs de données en JavaScript. Je pense que c'est essentiellement pour ça qu'ils sont, une sorte de couche de communication. L'harmonie entre eux semble très bien fonctionner.

Andy: Donc, un bon exemple est, disons que vous avez un message d'état et ensuite JavaScript ajoutera que l'état des données est soit succès, erreur ou information, ou quelque chose. Vous pouvez ensuite vous y connecter avec vos styles d'exception en CSS. Vous savez donc que c'est une exception du composant d'état et que cela va à l'encontre de son état par défaut. C’est donc une manière très pratique de travailler avec les choses. Il est prévisible aux deux extrémités: il est prévisible à la fin CSS et il est également prévisible à la fin JavaScript.

Drew: Je suppose que c'est assez agréable que quelque chose que les noms de classe ne vous donnent pas soit une propriété et valeur. Donc, si vous voulez avoir quelque chose comme ça qui est l'état, et cela peut être un succès ou un échec ou un avertissement ou ce que vous avez, vous pouvez spécifiquement traiter cette propriété d'état et inverser sa valeur. Alors qu'avec une longue liste de noms de classes, si vous manipulez cela en JavaScript, par exemple, vous devrez regarder chacun d'eux et y ajouter cette logique métier qui dit: «Je ne peux que définir l'un d'eux ", et que se passe-t-il si deux de ces classes sont appliquées au même élément? Vous ne pouvez pas obtenir cela avec un attribut de données, il n'a qu'une seule valeur.

Andy: Ouais. C’est une bonne façon de dire ça, oui. J'ai trouvé très utile de travailler comme ça.

Drew: C'est assez intéressant. Je ne pense pas avoir vu d'autres méthodologies qui adoptent cette approche. Est-ce complètement unique à CUBE, faire ça?

Andy: Peut-être. Je ne fais pas vraiment attention aux autres choses, ce que je dois faire. Quelqu'un d'autre fait probablement ça. Je vais vous dire maintenant, cela en a été l'aspect le plus controversé. Certaines personnes n'aimaient vraiment pas l'idée d'utiliser des attributs de données. La chose est aussi, et comment je réponds, faites ce que vous voulez. Nous ne vous disons pas de faire les choses d'une certaine manière, ce sont juste des suggestions. Si vous voulez faire des exceptions aux classes CSS, comme des modificateurs, alors assommez-vous. La police CUBE ne va pas venir frapper à votre porte. C'est tout à fait correct.

Andy: Le truc CUBE est une chose qui pense, c'est une structure. Vous appliquez cette structure comme vous le souhaitez, avec l'outillage que vous souhaitez ou la technologie que vous souhaitez. Tant que vous gardez les choses cohérentes, c'est l'important.

Drew: Donc, il n'y a pas de pur CUBE?

Andy: La ​​façon dont je l'écris est du pur CUBE, Drew. Tout le monde n'est qu'un faux, c'est juste une faible immitation.

Drew: À part vous, personne ne peut dire: «Ce n'est pas un CUBE de manuel.»

Andy: Non , c'est tout. Personne ne peut vraiment contester cela, n'est-ce pas? Donc, oui, je vais y aller. Vous donne un peu d'influence ou quelque chose, je pense, quelque chose comme ça.

Drew: Pouvez-vous mélanger et assortir une approche CUBE avec d'autres méthodologies? Pouvez-vous utiliser des morceaux de BEM?

Andy: Oui, je le pense. I’ve been thinking about it a little bit because I’m going to do some more stuff on it soon because it’s become quite popular, so people will want more work. One thing I’m going to look at is how to approach using the CUBE methodology with something existing.

Andy: So there’s two opposite ends of the scale. A good question that people have asked is: “How does this work with every layout, the other stuff?” I’m like, basically, every layout is the C. That’s what every layout is, it’s the compositional layer. Then someone else asked, “Well, how would this work with something like Atomic Web Design, like their stuff that Brad Frost did? It’s like, well, you could break those pieces up and apply them at each level. Atomic Design goes all the way down into the micro detail. It’s abstracting that into using, right, okay, well I can apply this with utilities, so the molecules, I think. I can apply that with the utilities, and it’s translating what you know already into this slightly different structure of working.

Andy: Really, it’s a renaming for a lot of things. I’ve not invented anything here, I’ve just sort of, like I say, I’ve just stolen things that I like. I love the way that some of the Atomic Design stuff is thought about. That’s really some smart work. And BEM. The stuff Harry did, the Inverted Triangle CSS, I thought that was really cool. So I’ve just sort of nicked bits that I like from each one of them and sort of stitched them all together into this other hybrid thing, approach. More to come, I think.

Drew: Can the CUBE approach be applied to existing projects that already have CSS in place or is it something you really need to start on a fresh project with?

Andy: That very much depends. So if you’ve got like a bootstrap job and it’s just got thousands of lines of custom CSS, that I’ve definitely been involved in before, then I think you might be trying to put a fire out with a bottle of water at that point. 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? What is that about?

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: Yeah.

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: I fancied doing something a bit different and applying the knowledge that I’ve got and actually sharing it with people. I’ve always been very open and sharing, and I wanted to formalize that. So I created Piccalilli to write tutorials, but mainly for courses that I’m producing: that’s the main meat and potatoes. And then there’s the newsletter which is… people are really enjoying the newsletter because I share cool things I’ve found on the internet every week. That’s the backbone of it. It’s just going really well. That’s essentially where I want to see myself doing more and more full-time, as the years go on, I think.

Drew: So what’s coming next for Piccalilli? Have you got anything that you’ve got coming out?

Andy: Thanks for the door open there, Drew! By the time this recording goes out, the first course will be live: Learn Eleventy From Scratch, and that’s where we learn how to build a Gatsby website! No, you learn how to build an Eleventy site. So you start off with a completely empty directory, there’s nothing in it, it’s empty, and then at the end of it you’ll finish up with this really nice-looking agency site. We learn all sorts in it. You learn how to really go to town with Eleventy. We pull remote data in from places. We use CUBE CSS to build a really nice front-end for it.

Andy: If you want to get into the Jamstack and you want to get into static site generators, or just how to build a nice website, it’s just a really handy course, I hope, for that. It’s currently being edited within an inch of its life as we’re talking. It’s going to be cool, I hope, and useful. But that’s an accumulation of a lot of stuff I’ve been doing over the last couple of years. So it should be fun.

Andy: So buy it, and I’ll do a discount code, do like smashingpod for 40% off, and you can get it when it comes out.

Drew: Amazing. We’ll link that up. Have you figured out how to spell Piccalilli reliably yet?

Andy: I was on with Chris and Dave with the ShopTalk Show and I said on there, “If there’s ever one thing you want to hire me for it’s to write Piccalilli by hand first time without even thinking about it,” because I’ve written that word so many times that I just know exactly how to spell it off by heart. So the answer to your question is yes.

Drew: Well, I’m still struggling, I’ll tell you that much!

Andy: It is hard. Oh, God. I totally empathize. It took me a long time to learn how to spell it but it’s one of those words in our vocabulary. This year I’m trying to spell necessary without making a spelling mistake!

Drew: So I’ve been learning all about CUBE CSS. What have you been learning about lately, Andy?

Andy: Do you know what? This is going to surprise you, Drew. MySQL is what I’ve been learning about recently. So, basically, Piccalilli is totally self-published. It’s an Eleventy site but it’s got an API behind it, and that’s got a MySQL database behind it. The stuff that gives people content that they’ve purchased requires some pretty hefty querying. So I’ve just actually properly invested in some MySQL… especially the difference between joins, which I didn’t actually realize there was a difference between each type of join. So that’s been really useful and it’s resulted in some pretty speedy interactions with the database.

Andy: I used to run this thing called Front-End Challenges Club and when I first launched it it just collapsed and died on itself because MySQL was shoddy to say the least. So I’ve really been learning how to do that because I’m not a backend person at all, I’m a pixel-pusher. So it’s definitely not in my remit. That’s more your neck of the woods, isn’t it? I find it really cool, MySQL. I actually really like writing it. It’s a really nice, instructional language, isn’t it?

Drew: It is, it’s great. I learnt SQL at school.

Andy: Wow!

Drew: We’re talking like 20 years ago now.

Andy: Did they have computers in those days?

Drew: They did, yeah. We had to wind-

Andy: Did you have to write it by hand?

Drew: We had to wind them up! We did. But, I tell you, for a developer, it’s akin to learning your times tables: one of those things that seems like a bit of a chore but once you’re fluent, it just becomes useful time and time again.

Andy: Yeah. For sure. There’s really tangible differences as well. You really see the difference in speed. I really like working with Node because that’s really fast but Node and MySQL is just… not a very common choice, but I think it’s a pretty good choice. I think it works really, really well. So I’m happy with that. As you know, I don’t like writing PHP. So that’s never going to be an option.

Drew: If you, dear listener, would like to hear more from Andy, you can follow him on Twitter where he’s at hankchizljaw. You can find Piccalilli at piccalil.li, where you’ll also find the article describing CUBE CSS, and we’ll also add links to all of those in the show notes, of course.

Drew: Thanks for joining us today, Andy. Did you have any parting words?

Andy: Stay safe, and wear your mask.

(il)