Smashing Podcast Épisode 19 Avec Andy Bell : Qu'est-ce que CUBE CSS ?
Publié: 2022-03-10Aujourd'hui, on parle de CUBE CSS. De quoi s'agit-il et en quoi diffère-t-il des approches telles que BEM, SMACSS et OOCSS ? J'ai parlé à son créateur, Andy Bell, pour le savoir.
Afficher les remarques
- CUBE CSS
- Piccalilli
- Apprenez Eleventy From Scratch - économisez 40 % !
- Andy Bell et Piccalilli sur Twitter
Remarque : Les auditeurs du Smashing Podcast peuvent économiser 40 % sur le cours Learn Eleventy From Scratch d'Andy en utilisant le code SMASHINGPOD .
Mise à jour hebdomadaire
- "Ce que Vitruve peut nous apprendre sur la conception Web"
par Frederick O'Brien - "Une introduction à SWR : React Hooks pour la récupération de données à distance"
par Ibrahima Ndaw - "Comment les concepteurs Web peuvent aider les restaurants à passer aux expériences numériques"
par Suzanne Scacca - "Un guide pratique pour tester les applications React avec Jest"
par Adeneye David Abiodun - « Faits saillants de Django : se disputer les actifs statiques et les fichiers multimédias (Partie 4) »
de Philip Kiely
Transcription
Drew McLellan : Il est un éducateur et un concepteur Web indépendant basé au Royaume-Uni et a travaillé dans les industries du Web de conception pendant plus d'une décennie. Au cours de cette période, il a travaillé avec certaines des plus grandes organisations au monde, telles que 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 front-end via des défis courts et amusants.
Drew : Sa dernière entreprise est Piccalilli, une newsletter de site Web avec des tutoriels et des cours pour vous aider à progresser en tant que développeur et concepteur front-end. 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, veuillez accueillir Andy Bell. Salut, Andy, comment vas-tu ?
Andy Bell : Je suis époustouflant, merci. Comment vas-tu?
Drew : Je vais très bien, merci beaucoup. Maintenant, je voulais vous parler aujourd'hui de quelque chose que vous avez posté sur votre site, Piccalilli, à propos d'une méthodologie CSS que vous avez développée vous-même 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 c'est pour vous ?
Andy : C'est une bonne question difficile pour commencer, Drew. Appréciez cela, merci!
Drew : Bienvenue !
Andy : C'est délicat. Donc, pour le contexte, j'utilise BEM depuis longtemps, et c'est Block Element Modifier. Cela existe depuis longtemps. La façon dont je regarde une méthodologie CSS est, ce n'est pas un cadre, c'est une structure d'organisation. C'est comme ça que j'aime le voir. C'est comme un processus presque. C'est comme si vous aviez un problème à résoudre avec CSS et que vous utilisiez 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 car il a connu un succès fou.
Andy : Alors 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 imbriqués dans le cadre, mais c'est quand même une méthodologie qui consiste à décomposer les choses en minuscules molécules. C'est donc essentiellement ce que j'essaie de faire avec CUBE CSS également. Une structure pensante, je pense l'avoir décrite comme.
Drew : C'est donc une application de processus pour la façon dont vous concevez et écrivez CSS, et ce n'est pas tant 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 inhabituelles d'enfants amoureux comme ABEM. Avez-vous vu celui-là?
Andy : Ouais.
Drew : Pourquoi publier le vôtre ?
Andy : Ouais, ouais. Pourquoi fabriquer 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 car ils sont habitués à utiliser CSS pour ce qu'est CSS : la cascade, etc., et c'est pourquoi j'ai en quelque sorte volé cela au 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 dans lequel ils travaillent.
Andy : Je me suis donc retrouvé dans ces postes 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, j'ai juste joué 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 en a en quelque sorte renforcé la grande partie, qui est le C, la partie composition , puis je l'ai en quelque sorte fait évoluer très rapidement au cours des six derniers mois.
Andy : La seule raison pour laquelle j'ai écrit un article à ce sujet, c'est parce que je faisais juste ce cours et j'ai pensé que je ferais mieux d'écrire du matériel supplémentaire pour que les gens le comprennent, et c'est complètement foutu. Alors peut-être que nous n'avons pas encore tout à fait dépassé les méthodologies, Drew.
Drew : Donc, le matériel de cours que vous avez mis en place utilise en fait CUBE CSS comme méthodologie, n'est-ce pas ?
Andy : Ouais. Donc un bon 50% du cours est en fait front-end, même s'il s'agit d'un cours illimité. C'est tellement, tellement profondément lié à la façon dont nous construisons le front-end que je ne pouvais pas simplement dire : « Oh, au fait, c'est comme ça que j'écris un joli CSS », puis le laisser. Je sais que les gens aiment entrer dans les détails, alors j'étais comme, ce que je vais faire, c'est que j'écrirai ce post qui est vraiment long et vraiment détaillé et ensuite 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 ? Donc, s'ils ont déjà une compréhension de BEM et qu'ils viennent à 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 encore écrire le CSS pour CUBE. Donc la majorité des choses se passent à un niveau supérieur. Cela se passe donc au niveau de la cascade et du CSS global, en utilisant les utilitaires pour faire beaucoup de choses. Mais quand vous entrez dans les détails, 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 qu'au lieu d'avoir des modificateurs, nous utilisons plutôt cette chose appelée exceptions qui, au lieu d'utiliser des classes CSS, se tourne vers les attributs de données, ce qui, je pense, donne une belle séparation et un vrai exception, qui est ce qu'un modificateur devrait être.
Andy : Une partie de la raison pour laquelle j'ai en quelque sorte quitté BEM était parce que j'ai découvert que la façon dont je travaillais avec lui, en particulier dans les systèmes de conception, était que 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 régulièrement au point qu'il est méconnaissable, alors cette méthodologie fonctionne-t-elle toujours comme elle est censée fonctionner ?
Andy : Ensuite, il y a tout le truc du design token, ce que Jina a fait avec le Lightning Design System que nous avons tous commencé à adopter maintenant. Les trucs de la classe utilitaire ont vraiment commencé à avoir un sens avec cette approche. Donc j'ai en quelque sorte écrasé toutes les choses que j'aime dans le travail des autres et je les ai insérées dans le mien à la place.
Drew: Vous parlez avec BEM, le genre d'approche modificatrice qui permet de perdre le contrôle. Était-ce l'un des principaux problèmes avec BEM que CUBE essaie de résoudre ?
Andy : Oui, absolument. J'aime l'approche du modificateur avec BEM, cela a du sens. Ce que j'aime à propos de BEM, c'est quelque chose que je fais toujours, c'est le double trait de soulignement pour un élément, 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 dont je peux réellement tenir compte avec les classes utilitaires, puis les autres éléments…
Andy : Donc, l'exemple que j'utilise dans l'article est, imaginez que vous avez une carte et que la carte est ensuite retournée, de sorte que le contenu apparaisse avant l'image. Alors ça a du sens, pour voir l'affichage : fléchissez et ensuite vous l'inversez, inversez l'ordre. C'est logique, 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 qu'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 JavaScript réactif, il y a beaucoup de changement d'état et il est logique de le gérer de manière appropriée entre CSS et JavaScript car ils deviennent de plus en plus plus liés les uns aux autres, que cela vous plaise ou non. C'est une langue commune 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 c'est l'inverse. Donc je peux voir ça aussi.
Drew : Alors, entrons dans CUBE. Ainsi, CUBE signifie Composition Utility Block Exception. Est-ce correct?
Andy : Ouais. C'est celui-là.
Drew : Qu'est-ce que cela signifie ?
Andy : Oh, mec, tu aurais dû l'entendre avant ! Je faisais une conférence l'année dernière. J'ai fait une conférence, et elle s'appelait Keeping it Simple with CSS that scales, et j'y ai en quelque sorte présenté une version antérieure appelée CBEUT, qui était Cascade Block Element Utility Token. C'était nul. J'en ai détesté 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 comment ça s'appelle. Je pense que CUBE est un peu moins nul. 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 merde c'est ! 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 vous demande "Quoi ?" C'est vrai. C'est comme ça, n'est-ce pas, dans notre industrie.
Drew : Il semble que de nombreuses 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 type 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 encore à peu près raison en CSS. Donc CUBE CSS est comme ça. C'est donc une extension de CSS. Nous devrions donc toujours écrire CSS, comme CSS devrait… eh bien, c'est censé être écrit. Soyons honnêtes, c'est comme ça que c'est censé être écrit, c'est le nom qui le donne : Feuilles de style en cascade. Donc, c'est encore une fois adopté parce que ce que j'ai découvert, c'est que je suis descendu jusqu'au niveau de la micro-optimisation. J'ai parcouru le chemin où j'ai vu beaucoup de gens descendre récemment où… et j'ai également mentionné cela dans l'article, où je peux voir… il y a des preuves de cela récemment. J'ai remarqué que des gens créaient des composants d'espacement et des trucs comme ça, et je comprends ce problème, j'ai été dans cette situation.
Andy : La façon dont j'ai résolu le problème était qu'au lieu d'approfondir et d'essayer de micro-optimiser, j'ai plutôt commencé à penser aux choses au niveau de la composition, car peu importe la taille de vos composants, à un moment donné, ils vont être des pages, ils vont être des vues. Vous ne pouvez pas éviter cela, c'est comme ça que ça va être. Ainsi, au lieu d'essayer de dire : "Bien, j'ai besoin de ces minuscules assistants pour faire cette mise en page", vous dites : "Bien, j'ai une vue de page de contact ou une vue de page de produit, et c'est une composition de mise en page squelettique. Ensuite, à l'intérieur de cela, je peux insérer tous les composants que je veux là-dedans. 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 doivent, à ce stade, se comporter comme vous le souhaitez, avec ou sans requêtes de conteneur.
Drew : Il s'agit de la partie composition de CUBE où vous examinez les choses à un niveau plus macro, en examinant 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 quoi avez-vous.
Andy : Il s'agit donc essentiellement de créer des règles. C'est comme une orientation. Il essaie d'obtenir des lignes directrices pour quelque chose. Ce n'est pas comme des règles strictes, comme, tu devrais faire ceci, tu devrais faire cela. C'est essentiellement ce que vous faites avec le navigateur, avec cette méthodologie, c'est-à-dire que vous ne le forcez pas à faire quoi que ce soit. Vous dites : « Écoutez, idéalement, si vous pouviez le présenter comme ceci, ce serait formidable, mais je comprends que ce ne soit peut-être pas le cas, alors voici quelques limites et des niveaux supérieurs et inférieurs avec lesquels nous pouvons travailler. Faites ce que vous pouvez, et bravo. Ensuite, il vous suffit de lui jeter quelques composants et de le laisser faire ce qu'il fait. Vous ajoutez suffisamment de contrôle là-dedans pour qu'il n'ait pas l'air nul.
Andy : Donc, un bon exemple serait de voir… nous faisons une mise en page dans chaque mise en page appelée le commutateur, qui sera essentiellement des éléments en ligne 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, il suffit d'empiler et d'espacer à la place. C'est donc ce genre de méthodologie, qui consiste à laisser le navigateur faire son travail.
Drew : La plupart des différentes approches qui ont vu le jour pour CSS au cours des dernières années se sont beaucoup concentrées sur le niveau des composants pour traiter tout comme s'il s'agissait d'un composant. CUBE ne minimise pas tellement cet aspect de composant, il donne simplement ce concept supplémentaire en plus de prendre ces composants et de les composer dans des mises en page plus grandes, plutôt que de simplement dire que la mise en page n'est qu'un autre composant.
Andy : Ouais, c'est un bon point, ouais. Je pense que la chose à dire à propos des composants est qu'ils sont importants, en particulier dans les éléments frontaux modernes. Nous faisons beaucoup de choses sur les composants, les choses sur le système. Mais la façon dont je vois un composant est qu'il s'agit d'un ensemble de règles qui étendent ce qui a déjà été fait.
Andy : Ce que je veux dire dans l'article, c'est qu'au moment où vous arrivez au niveau du bloc, la plupart de votre style a été fait, et ce que votre composant fait vraiment, c'est pointer les I et croiser les T et ça 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 placiez 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étitif, ce que je n'aime pas faire.
Drew : Considérez-vous que la typographie, les couleurs et les rythmes verticaux, l'espacement et tout cela font 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 là-dessus à 24 voies, n'est-ce pas, il y a quelques années, la composante flux et rythme. C'était aussi une sorte de résumé de cette approche, où vous définissez un composant de base qui utilise essentiellement le sélecteur de hibou lobotomisé. Je ne sais pas comment je vais décrire cela à la radio, mais nous le ferons. Nous allons juste mettre, je pense, dans l'émission des notes sur l'article de Heydon ou quelque chose comme ça. Mais essentiellement cela, il sélectionne des éléments enfants… désolé, des éléments frères.
Andy : Donc, il est écrit : "Bien, 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é", et la beauté de cela est que vous pouvez également définir cette valeur de propriété personnalisée CSS sur un contexte de composition. Vous pouvez donc dire : "Bien, dans ce composant, s'il y a un flux en cours, nous allons définir l'espace de flux sur deux rem parce que nous voulons qu'il soit agréable et costaud, l'espace large." Ensuite, dans un autre, vous pourriez dire : "En fait, je veux que l'espace de flux soit d'un demi-rem parce que je veux qu'il soit étroit." Tout se passe, tout le contrôle vient d'un niveau supérieur et ensuite ce que vous faites, c'est que vous ajoutez des remplacements contextuels plutôt que de le réinventer à chaque fois, en réinventant la même chose encore et encore.
Drew : C'est donc le C, Composition. Ensuite, nous avons U, qui est Utility. Alors qu'entend-on 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é de propriétés. Habituellement, ce sont des couleurs ou des styles de typographie, des tailles et des règles comme ça. L'idée est de générer des classes utilitaires qui les appliquent. Vous avez donc un utilitaire qui appliquera l'arrière-plan primaire, qui est comme la couleur primaire, puis la couleur primaire, qui est la couleur du texte. Ensuite, vous pouvez générer des jetons d'espacement pour le remplissage marginal, et toutes ces sortes de choses. Ils ne font qu'un seul travail. Ils ajoutent simplement cette règle d'espacement, cette règle de couleur, et c'est tout.
Andy : Mais vous avez également d'autres utilitaires. Ainsi, un bon exemple est 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 l'asseoir au milieu de la chose. Donc, il n'a qu'un seul travail, et il le fait efficacement et bien.
Andy : Donc, vous avez vos styles globaux, vous avez fait beaucoup de vos paramètres de typographie et une grande partie de votre espace au sol. Votre composition donne alors 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 en-tête, 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." Ensuite, à ce moment-là… c'est ce que je disais à propos des blocs… puis vous descendez plus bas dans la pile et vous avez déjà fait la majeure partie du travail à ce stade.
Andy : Ils vous offrent donc cette méthode de travail très efficace, et parce que le HTML est également un flux dans le tuyau, c'est vraiment bien d'abstraire la charge de travail sur HTML plutôt que sur CSS, j'ai trouvé. J'avais l'habitude d'aller vraiment dans des cours d'utilité, comme dans ce genre de vieux style grincheux de « 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 vraiment Tailwind CSS. Je pense que cela fonctionne, et j'aime vraiment l'utiliser pour le typage de produit parce que je peux vraiment sortir quelque chose très rapidement. Mais je pense que ça va juste un peu trop loin, fait Tailwind, alors que j'aime faire pleuvoir quand ça va au-delà de l'application d'une seule règle sur une classe. Alors voilà, je pense. Est-ce que tu?
Drew : Donc, oui, vous parlez beaucoup dans l'article des jetons de conception, ce dont nous avons parlé sur le Smashing Podcast avec Jina Anne dans l'épisode trois, je pense que c'était le cas. Il semble donc que les jetons de conception soient un aspect vraiment fondamental.
Andy : Ouais. Oh, mon Dieu, ouais. Je me souviens très bien de l'époque où Jina s'occupait 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 la direction. Lorsque 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 aidé à faire passer des trucs par la porte.
Andy : Ensuite, les trucs sur les jetons de conception m'ont toujours semblé être un très bon moyen d'appliquer ces règles. Parce que je suis un designer de métier, je peux donc en quelque sorte voir cette organisation et la capacité d'organiser et de créer une source unique de vérité être vraiment utile parce que c'est quelque chose que nous n'avons pas vraiment eu dans la conception numérique, en particulier dans Adobe l'ère de travailler avec Photoshop et d'autres choses, nous n'avions tout simplement pas ce luxe. Nous l'avions en version imprimée avec le Pantone Book, mais nous ne l'avions pas en version numérique avec des codes hexadécimaux aléatoires dans toute la boutique.
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 juste à ce que vous en faites.
Drew : La mise en œuvre de ces jetons de conception est-elle particulièrement importante pour l'approche ? S'agit-il toujours de propriétés personnalisées CSS ?
Andy : Je pense que c'est un point très important avec CUBE. Certaines des réponses que j'ai eues, les gens ont un peu lutté avec cela. Il n'y a aucune mention de technologie là-dedans. 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 actuellement avec CSS et JS, ou vous pouvez le faire avec 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 comme bon vous semble, ce n'est pas grave.
Andy : L'idée est que si vous suivez ce genre de constructions, tout ira bien. C'est l'idée derrière tout ça. C'est une approche très lâche et non stricte comme le sont certaines méthodologies. Je l'ai vu avec BEM en particulier, les gens s'enracinent vraiment dans les principes de BEM au point où c'est comme si vous ne résolviez même plus le problème. Je pense qu'il faut être flexible. Je l'ai dit dans cette conférence l'année dernière. J'étais comme, "Si vous vous en tenez trop à vos armes, vous pouvez en fait 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, c'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, et ensuite le style au niveau du bloc ne concerne vraiment que les détails réels d'un composant particulier. En règle générale, le concept de bloc ressemble-t-il à ce que les gens connaissent ?
Andy : Oh, absolument, ouais. Imaginez donc votre composant BEM et enlevez tous les éléments visuels, et c'est ce qu'il vous reste, essentiellement, le bloc. C'est ce que j'ai eu du mal à exprimer lorsque j'ai commencé à penser à cette méthodologie. Un bloc est en fait vraiment un C, c'est une composition, mais cela rend les choses vraiment difficiles 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 plus une sorte de contexte strict, donc comme votre carte, votre bouton, votre carrousel, si c'est toujours ce que vous aimez faire, et tout ce genre de choses.
Andy : C'est comme une chose spécifique, un composant, et puis à l'intérieur de là, vous définissez des règles spécifiques à suivre, en ignorant vraiment le reste, donc vous n'êtes pas... Vous pouvez appliquer des jetons dans les blocs, et je le fais encore, mais vraiment c'est plus orienté vers la mise en page, c'est un bloc, pour autant que je travaille avec eux, ou du 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 les approchez, ils ne devraient pas vraiment faire grand-chose.
Drew : Cela pourrait donc être aussi petit qu'un lien hypertexte.
Andy : Ouais.
Drew : Mais cela pourrait aussi être une collection composée d'autres blocs ?
Andy : Ouais. Comme une sorte de module de chose. Vous pourriez certainement le faire. Parce que, encore une fois, cela revient au genre d'aspect compositionnel, c'est que tout ce qui y entre ne devrait pas avoir 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, ayez des règles de flux là-dedans et ayez une sorte de règles de mise en page de composition », et peu importe ce que vous y mettez. Vous pouvez décider de mettre une image dans ce contenu et cela devrait fonctionner, cela devrait bien paraître.
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 être le cas si vous étiez plus précis sur les choses, c'est ce que j'ai a trouvé.
Drew : J'ai définitivement besoin de beaucoup de pardon autour de mon CSS !
Andy : Je le sais !
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. J'espère quand même que non, sinon tu es vraiment dans le bois à ce moment-là : je ne pense pas pouvoir t'aider ! L'idée générale de ceci est… donc vous avez 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. Alors vous connaissez ces boutons qui ont juste 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 la raison pour laquelle c'est parce que a) je pense que c'est bien d'avoir une distinction. Ainsi, lorsque vous parcourez beaucoup de code HTML, vous pouvez voir des données, un trait d'union, vous vous dites : "D'accord, 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 à JavaScript l'accès à cet état, et vice versa également. J'aime donc beaucoup appliquer l'état avec des attributs de données en JavaScript. Je pense que c'est essentiellement à cela qu'ils servent, 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 l'état des données soit succès, erreur ou information, ou quelque chose comme ça. Vous pouvez ensuite vous y connecter avec vos styles d'exception dans CSS. Vous savez donc que c'est une exception du composant d'état et qu'il va à l'encontre de son état par défaut. C'est donc juste une façon très pratique de travailler avec les choses. C'est prévisible aux deux extrémités : c'est prévisible du côté CSS, et c'est également prévisible du côté JavaScript.
Drew : Je suppose que c'est plutôt bien que quelque chose que les noms de classe ne vous donnent pas soit une propriété et une valeur. Donc, si vous voulez avoir quelque chose comme ça qui est l'état, et cela peut être soit un succès, soit un échec, soit un avertissement ou autre, 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 allez devoir examiner chacun d'eux et ajouter cette logique métier qui dit: "Je ne peux que définir l'une d'entre elles », 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. C'est très utile, j'ai trouvé, 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 : C'est possible. Je ne fais pas vraiment attention aux autres choses, ce que je devrais faire. Quelqu'un d'autre le fait probablement. Je vais vous dire maintenant, c'est 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, c'est, fais ce que tu veux. 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 les modificateurs, alors assommez-vous. La police CUBE ne viendra pas frapper à votre porte. C'est tout à fait bien.
Andy : La chose CUBE est une chose pensante, c'est une structure. Vous appliquez cette structure comme vous voulez l'appliquer, avec l'outillage que vous voulez ou la technologie que vous voulez. Tant que vous gardez les choses cohérentes, c'est la chose importante.
Drew : Donc, le CUBE pur n'existe pas ?
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 imitation.
Drew : À part vous, personne ne peut dire : « Ce n'est pas le CUBE des manuels. »
Andy : Non, c'est ça. Personne ne peut vraiment le contester, n'est-ce pas? Donc, oui, je vais faire avec ça. Vous donne un peu de poids ou quelque chose, je pense, quelque chose comme ça.
Drew : Pouvez-vous combiner une approche CUBE avec d'autres méthodologies ? Pouvez-vous utiliser des morceaux de BEM ?
Andy : Oui, je pense que oui. J'y ai pensé un peu parce que je vais faire d'autres trucs dessus bientôt parce que c'est devenu assez populaire, donc les gens voudront plus de travail. Une chose que je vais examiner est la façon d'aborder l'utilisation de la méthodologie CUBE avec quelque chose d'existant.
Andy : Il y a donc deux extrémités opposées de l'échelle. Une bonne question que les gens ont posée est : "Comment cela fonctionne-t-il avec chaque mise en page, les autres éléments ?" Je suis comme, fondamentalement, chaque mise en page est le C. C'est ce que chaque mise en page est, c'est la couche de composition. Puis quelqu'un d'autre a demandé: «Eh bien, comment cela fonctionnerait-il avec quelque chose comme Atomic Web Design, comme leurs trucs que Brad Frost a fait? C'est comme si vous pouviez briser ces morceaux et les appliquer à chaque niveau. Atomic Design va jusqu'au moindre détail. C'est abstrait en utilisant, d'accord, d'accord, eh bien, je peux appliquer cela avec des utilitaires, donc les molécules, je pense. Je peux appliquer cela avec les utilitaires, et cela traduit ce que vous savez déjà dans cette structure de travail légèrement différente.
Andy : Vraiment, c'est un changement de nom pour beaucoup de choses. Je n'ai rien inventé ici, j'ai juste en quelque sorte, comme je dis, j'ai juste volé des choses que j'aime. J'aime la façon dont certains éléments d'Atomic Design sont pensés. C'est vraiment un travail intelligent. Et BEM. Ce qu'Harry a fait, le CSS Triangle inversé, j'ai trouvé ça vraiment cool. Donc, j'ai juste entaillé des morceaux que j'aime de chacun d'eux et je les ai en quelque sorte tous cousus ensemble dans cette autre chose hybride, l'approche. Plus à venir, je pense.
Drew : L'approche CUBE peut-elle être appliquée à des projets existants qui ont déjà un CSS en place ou est-ce quelque chose dont vous avez vraiment besoin pour démarrer un nouveau projet ?
Andy : Cela dépend beaucoup. Donc, si vous avez comme un travail d'amorçage et qu'il ne contient que des milliers de lignes de CSS personnalisées, dans lesquelles j'ai certainement été impliqué auparavant, alors je pense que vous essayez peut-être d'éteindre un feu avec une bouteille d'eau. indiquer. 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? De quoi s'agit-il?
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 : Ouais.
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 : J'avais envie de faire quelque chose d'un peu différent et d'appliquer les connaissances que j'ai et de les partager avec les gens. J'ai toujours été très ouvert et partageur, et je voulais formaliser cela. J'ai donc créé Piccalilli pour écrire des tutoriels, mais principalement pour les cours que je produis : c'est le principal meat and potatos. Et puis il y a la newsletter qui est… les gens apprécient vraiment la newsletter parce que je partage des choses sympas que j'ai trouvées sur Internet chaque semaine. C'est l'épine dorsale de celui-ci. Ça se passe très bien. C'est essentiellement là que je veux me voir faire de plus en plus à temps plein, au fil des années, je pense.
Drew : Alors, qu'est-ce qui s'en vient pour Piccalilli ? Avez-vous quelque chose qui sort?
Andy : Merci pour la porte ouverte là-bas, Drew ! Au moment où cet enregistrement sortira, le premier cours sera en direct : Learn Eleventy From Scratch, et c'est là que nous apprendrons à créer un site Web Gatsby ! Non, vous apprenez à créer un site Eleventy. Donc, vous commencez avec un répertoire complètement vide, il n'y a rien dedans, il est vide, et puis à la fin vous finirez avec ce site d'agence vraiment sympa. On y apprend toutes sortes de choses. Vous apprenez à vraiment aller en ville avec Eleventy. Nous extrayons des données distantes depuis des endroits. Nous utilisons CUBE CSS pour créer une très belle interface.
Andy : Si vous voulez entrer dans le Jamstack et que vous voulez entrer dans les générateurs de sites statiques, ou simplement comment créer un joli site Web, c'est juste un cours vraiment pratique, j'espère, pour ça. Il est actuellement en cours d'édition à un pouce de sa vie au moment où nous parlons. Ça va être cool, j'espère, et utile. Mais c'est une accumulation de beaucoup de choses que j'ai faites au cours des deux dernières années. Donc ça devrait être amusant.
Andy: Alors achetez-le, et je ferai un code de réduction, faites comme smashingpod pour 40% de réduction, et vous pourrez l'obtenir dès sa sortie.
Drew : Incroyable. Nous ferons le lien. Avez-vous déjà compris comment épeler Piccalilli de manière fiable ?
Andy : J'étais avec Chris et Dave au ShopTalk Show et j'ai dit : « S'il y a une chose pour laquelle vous voulez m'engager, c'est d'écrire Piccalilli à la main la première fois sans même y penser », parce que j'ai écrit ce mot tellement de fois que je sais exactement comment l'épeler par cœur. La réponse à votre question est donc oui.
Drew : Eh bien, j'ai encore du mal, je vais tout vous dire !
Andy : C'est dur. Oh mon Dieu. Je compatis totalement. J'ai mis du temps à apprendre à l'épeler mais c'est un de ces mots de notre vocabulaire. Cette année j'essaie d'épeler nécessaire sans faire de faute d'orthographe !
Drew : J'ai donc tout appris sur CUBE CSS. Qu'as-tu appris dernièrement, Andy ?
Andy : Tu sais quoi ? Ça va te surprendre, Drew. MySQL est ce que j'ai appris récemment. Donc, à la base, Piccalilli est totalement auto-édité. C'est un site Eleventy mais il y a une API derrière et une base de données MySQL derrière. Les éléments qui donnent aux gens le contenu qu'ils ont acheté nécessitent des requêtes assez lourdes. Je viens donc d'investir correctement dans MySQL… en particulier la différence entre les jointures, dont je n'avais pas réalisé qu'il y avait une différence entre chaque type de jointure. Cela a donc été très utile et cela a entraîné des interactions assez rapides avec la base de données.
Andy : J'avais l'habitude de gérer ce truc appelé Front-End Challenges Club et quand je l'ai lancé pour la première fois, il s'est effondré et est mort sur lui-même parce que MySQL était pour le moins de mauvaise qualité. J'ai donc vraiment appris à faire ça parce que je ne suis pas du tout une personne backend, je suis un pousseur de pixels. Ce n'est donc certainement pas dans mes attributions. C'est plus votre coin de pays, n'est-ce pas ? Je trouve ça vraiment cool, MySQL. En fait, j'aime beaucoup l'écrire. C'est un très bon langage d'instruction, n'est-ce pas ?
Drew : Ça l'est, c'est super. J'ai appris SQL à l'école.
Andy : Waouh !
Drew : Nous parlons d'il y a 20 ans maintenant.
Andy : Avaient-ils des ordinateurs à l'époque ?
Drew : Ils l'ont fait, oui. Nous avons dû vent-
Andy : Avez-vous dû l'écrire à la main ?
Drew : Nous avons dû les liquider ! Nous faisions. Mais, je vous le dis, pour un développeur, cela revient à apprendre vos tables de multiplication : une de ces choses qui semble être une corvée, mais une fois que vous parlez couramment, cela devient utile à maintes reprises.
Andy : Ouais. Avec certitude. Il y a aussi des différences vraiment tangibles. Vous voyez vraiment la différence de vitesse. J'aime vraiment travailler avec Node parce que c'est très rapide, mais Node et MySQL ne sont juste pas un choix très courant, mais je pense que c'est un très bon choix. Je pense que ça marche vraiment, vraiment bien. Donc je suis content de ça. Comme vous le savez, je n'aime pas écrire PHP. Ce ne sera donc jamais une option.
Drew : Si vous, cher auditeur, souhaitez en savoir plus sur Andy, vous pouvez le suivre sur Twitter où il est à hankchizljaw. Vous pouvez trouver Piccalilli sur piccalil.li, où vous trouverez également l'article décrivant CUBE CSS, et nous ajouterons également des liens vers tous ceux-ci dans les notes de l'émission, bien sûr.
Drew : Merci de vous être joint à nous aujourd'hui, Andy. Avez-vous eu des mots d'adieu?
Andy : Restez en sécurité et portez votre masque.