Catégories
Astuces et Design

CUBE CSS – Piccalilli

S'il y a une chose que vous pouvez garantir dans la technologie, c'est que quelqu'un, quelque part, déclarera que CSS n'est pas à la hauteur des «grands projets» et ce qui sera sans aucun doute recommandé par ces mêmes personnes sera soit une approche JavaScript lourde ou une sorte d'approche de classe utilitaire tout-en-un comme Tailwind.

Il n'y a généralement rien de mal à ces approches – j'aime bien Tailwind pour le prototypage à un stade précoce – mais souvent le contexte d'un projet JavaScript tout-en-un, ou du moins un projet complètement nouveau est commodément exclu, au point de suggestion. Le problème est, un énorme nombre de projets sont des sites Web, de sorte que les conseils ne fonctionnent normalement pas grande majorité des développeurs. Pour le contexte, on estime que WordPress alimente environ 36% d'Internet et est toujours en hausse. Comparez cela à un dérisoire 0,3% des sites Web qui utilisent React, par exemple. Il est important de garder ces chiffres à l’esprit.

Dans cet article, je vais vous expliquer comment J'aime écrire du CSS, ce qui, je pense, pourrait aider beaucoup de gens – du moins je l'espère – parce que j'ai utilisé cette approche, ou une version antérieure de cette approche, pour alimenter des sites Web massifs, de petits blogs, des applications mobiles et même des logiciels intranet! Cette méthodologie a ses racines dans des projets gigantesques qui desservent des millions de personnes jusqu'à de petits sites Web et des kits de démarrage, grâce à sa flexibilité. Cette flexibilité a également permis à CUBE CSS de fonctionner dans des bases de code très anciennes et très nouvelles.

L'objectif de la méthodologie est d'utiliser la puissance du CSS et de la plate-forme Web dans son ensemble, avec quelques ajouts les contrôles et des structures qui aident à garder les choses un peu plus maintenables et prévisibles. L'objectif final est de livrer le moins de CSS possible, en s'appuyant fortement sur l'amélioration progressive et les techniques modernes. J'espère qu'à la fin de l'article, cela vous aidera à repenser comment peut-être vous écrivez CSS A l'avenir.

CUBE signifie Exception de bloc utilitaire de compositionet CSS signifie, vous savez, CSS (feuilles de style en cascade). Comme mentionné précédemment, la méthodologie CUBE est extension d'une bonne vieille CSS, plutôt que d'une réinvention. Ce mantra est également très sérieusement maintenu, car la particularité de la cascade et de l'héritage joue un grand rôle.

La partie la plus importante de cette méthodologie est le langage lui-même: CSS. Il est essentiel de noter son existence dans le nom, car certaines approches alternatives, telles que BEM, que j'apprécie depuis de nombreuses années, peuvent s'éloigner très loin des feuilles de style en cascade. je amour CSS, cependant et pense que ses capacités de base sont en fait clé en CSS évolutif (désolé, je l'ai dit). Cette réflexion a pris longtemps et beaucoup d'expérience à embrasser, aussi. CSS est un langage de programmation incroyablement complexe à apprendre car une grande partie de la connaissance de travail est moins de syntaxe et plus Comment les choses fonctionnent dans des domaines spécifiques, qui sont souvent des navigateurs.

La Cascade est elle-même, magnifique, car cela nous permet d'écrire très peu de CSS et n'est vraiment pas aussi effrayant que les gens le prétendent souvent. Bien sûr, dans les temps anciens d'Internet Explorer, la cascade était un peu délicate, mais utiliser d'anciennes connaissances et techniques comme base d'une approche moderne, c'est comme nourrir un cheval avec une voiture.

Le cœur de cette méthodologie est que la plupart des travaux sont déjà fait pour vous avec des styles globaux et de haut niveau. Cela signifie qu'avant même de commencer à penser aux composants, ou dans le cas des blocs CUBE CSS, votre typographie est généralement définie, vos couleurs fonctionnent très bien et vos éléments fonctionnent harmonieusement les uns avec les autres. Nous utilisons le reste de la méthodologie – CUBE – pour ne pas styliser tout, mais plutôt de fournir des styles contextuels qui s'écartent du système mondial commun.

CUBE CSS est essentiellement une approche d'amélioration progressive, contre une lutte contre le grain de CSS ou un pixel poussant votre projet à un pouce de son approche de la vie.

En parlant de systèmes: parlons de systèmes de conception. J'ai de la chance de travailler dans ce domaine depuis environ une demi-décennie maintenant, et travailler avec des systèmes de conception a été l'un des aspects les plus précieux de ma carrière en tant que designer et développeur front-end. Ceci est principalement dû au fait qu'un système de conception ne vous fait pas seulement réfléchir à un niveau micro, mais aussi à un niveau macro, car vous devez prendre non seulement des décisions concernant les pixels, mais également des décisions d'organisation de haut niveau que le système de conception aide à résoudre. Le travail du système de conception est en fait travail de diplomatie, la plupart du temps.

C'est souvent là que je vois la vision tunnel étroite et uniquement composée de composants en deçà et vraiment, ces approches sont moins des systèmes de conception, mais plus bibliothèques de composants qui résolvent une cohorte de problèmes beaucoup plus étroite.

Souvent, dans les conversations plus récentes (lire: fils de tweet) sur les systèmes de conception, les choses sont très micro-optimisé. C'est très bien, parce que si ça marche pour les gens, ça marche! Je voudrais cependant émettre un avertissement: l'analogie des blocs LEGO n'est pas si pertinente dans le contexte plus large des systèmes de conception. Il est cependant très utile pour expliquer le rôle d’un composant dans un projet global.

Je mentionne tout cela, non pas pour être intelligent sur les systèmes de conception, mais parce que même si vous divisez votre système de conception en de minuscules molécules, cela va toujours être appliqué dans un contexte plus large à un moment donné et cela ne devrait jamais être oublié, mais donc l'est souvent. J’ai constaté au fil de nombreuses approches, au sein de nombreux projets au fil des ans, qu’une composition plus large l’emporte souvent sur les micro-optimisations et couche de composition de CUBE CSS existe à cause de cela

Qu'est-ce que je veux dire sur la composition? Jetons un œil à cette disposition classique:

Une illustration de ligne d'une disposition de base avec des composants

Un bon vieux
situation classique de héros et de cartes avec une grille à 3 colonnes.

Nous avons ici divers éléments qui sont eux-mêmes des composants individuels. le composition de cette disposition est ce qui contrôle la disposition générale et le rythme des éléments. Considérez la composition comme un squelette.

La même illustration mais les composants ont disparu et une structure squelettique reste

Comme tu peux
voyez, la composition gère la façon dont les choses s'assemblent, indépendamment de
quel composant ils se trouvent.

Pour illustrer cela davantage, nous pouvons mettre tous les composants que nous aimons dans notre squelette. Comme dans cet exemple, nous remplaçons plutôt une carte par un appel à l'action:

L'illustration initiale mais l'une des cartes a été remplacée par un nouveau composant

Notre appel à
l'action n'est pas déplacée car la composition de cette vue gère
toute la mise en page pour nous.

La composition est aussi clé dans les composants. Prenons l'exemple de notre composant de carte. Vous aurez probablement du contenu de flux quelque part, tout comme dans les illustrations, où un titre et un résumé traînent ensemble. Ce que vous pourriez faire est d'ajouter une classe à chaque élément et de micro-optimiser leur comportement, comme vous le feriez avec BEM, ou vous pouvez faire quelque chose comme ceci:

.flow > * + * {
margin-top: var(--flow-space, 1em);
}

Ensuite, nous l'appliquerions à notre balisage de carte comme ceci:

<article class="card">
<img class="card__image" alt="" />
<div class="( card__content ) ( flow )">
div>
article>

Vous vous demandez peut-être à quoi servent ces supports (()) font dans le class attribut. Il s'agit d'un mécanisme de regroupement expliqué plus loin dans cet article.

Vous pouvez passez directement à cette section aussi.

Nous créons un utilitaire qui nous fournit un flux et un rythme communs qui, à leur tour, nous aident à composer nos mises en page et Composants. Cela nous fait passer sans encombre à la section suivante.

Si l'utilisation de la cascade est l'épine dorsale de cette méthodologie, les utilitaires sont les chaussures qui l'aident à marcher confortablement.

Un utilitaire, dans le contexte de CUBE CSS, est un Classe CSS qui fait un travail et fait bien ce travail. Cette classe CSS, le plus souvent, aura une propriété CSS définie, mais elle peut également en avoir quelques-unes, dans un groupe concis, comme cet exemple d'utilitaire wrapper:

.wrapper {
margin-inline: auto;
padding-inline: 1rem;
max-width: 60rem;
}

Cet utilitaire pratique fournit un conteneur rembourré de largeur maximale constante qui se trouve au milieu de la fenêtre lorsque la fenêtre est plus de 60rem de large.

Un travail: bien fait.

Jetons de conception

Ce sont un concept de Jina qui a complètement transformé ma façon de penser les systèmes de conception. Voici une citation directe de ce qu’elles sont, par Jina:

«Les jetons de conception sont les atomes visuels du système de conception – en particulier, ce sont des entités nommées qui stockent des attributs de conception visuelle. Nous les utilisons à la place de valeurs codées en dur afin de maintenir un système visuel évolutif et cohérent. »

Les jetons de conception sont vraiment utiles car ils permettent à nos systèmes d'être évolutifs (désolé, je l'ai répété). Ceci est au cœur de cette méthodologie – CUBE CSS – parce que nous prenons ces valeurs abstraites et les appliquons à notre contexte avec les classes utilitaires.

Par exemple, disons que notre couleur principale est #ff00ff, qui est une belle couleur magenta. Cela pourrait être défini en dehors de notre contexte dans une base de données ou même un fichier JSON comme ceci:

{
"colours": {
"primary": "#ff00ff",
"secondary": "#ffbf81",
"base": "#252525"
}
}

Pour moi, il y a généralement une étape entre cela et CSS où les classes d'utilitaires de jeton de conception sont générées. Vous vous retrouvez avec quelque chose comme ça:

.bg-primary {
background: #ff00ff;
}

.bg-secondary {
background: #ffbf81;
}

.color-primary {
color: #ff00ff;
}

.color-secondary {
color: #ffbf81;
}

Avec ces classes générées, nous les appliquerions ainsi:

<article class="bg-primary color-base">article>

L'application de nos jetons de conception comme celui-ci nous permet de définir les choses une fois et de les appliquer partout. Il réduit la répétition et surtout: réduit la taille globale des paquets!

Passons à la partie suivante de la méthodologie: Block. Un bloc est votre bloc de construction ou votre composant. C'est votre carte ou votre bouton. Si vous avez déjà utilisé BEM auparavant, la définition est presque identique. Un bloc à ce stade est vraiment une chose mineure, car beaucoup de choses ont été gérées par les autres parties couvertes: CSS, composition et utilitaires. Si vous choisissez d'écrire votre CSS avec ce type de méthodologie, vous constaterez probablement que votre CSS de bloc est minuscule, à cause de ce.

Une différence majeure entre BEM et CUBE est que tout ce qui se passe à l'intérieur du bloc est saison ouverte. En effet, comme mentionné précédemment, votre CSS global, vos règles de composition et vos utilitaires ont probablement fait la plupart du travail pour vous, donc avoir des éléments formels est en quelque sorte redondant.

Personnellement, j'aime toujours utiliser la syntaxe BEM pour les éléments, comme ceci:

C’est principalement une préférence qui découle années de travailler avec BEM, c'est ainsi que mon cerveau est programmé maintenant.

Vous pouvez très facilement donner à chaque élément des sélecteurs plats ou même appliquer des styles d'élément HTML, comme ceci, aussi:

.my-block .title {
}

.my-block h2 {
}

Cela ne devrait pas vraiment avoir d'importance car, encore une fois, votre CSS global, vos utilitaires et vos règles de composition font déjà le gros du travail pour vous.

Enfin dans cette tournée: Exceptions. Ce sont de petites variations d'un bloc. Par exemple, vous pouvez avoir un état «inversé» ou un état «inactif». Pour ceux-ci: nous utilisons attributs de données.

Prenez cette carte comme exemple. Par défaut, c'est une carte d'édition standard:

Une carte avec image, en-tête et résumé

Notre édition standard
élément de carte

Mais lorsque nous ajoutons un état «inversé», l'image est en bas et le contenu est en haut.

La même carte mais retournée

Notre exception lui donne un flip.

Nous ajoutons l'exception à l'aide d'un attribut de données comme celui-ci:

<article class="card" data-state="reversed">article>

Cela fournit un crochet utile pour les deux CSS et JavaScript! Vous pouvez inverser le contenu comme ceci:

.card(data-state='reversed') {
display: flex;
flex-direction: column-reverse;
}

Il pourrait y avoir beaucoup de choses avec votre class attribuer avec cette méthodologie, donc j'aime regrouper les choses entre crochets, comme ceci:

<article
class="( card ) ( section box ) ( bg-base color-primary )"
data-state="reversed"
>
article>

J'ai tendance à suivre cet ordre:

  1. La classe de bloc principale
  2. Toutes les classes de blocs suivantes
  3. Classes utilitaires

Je pourrais même diviser les utilitaires en utilitaires standard et en jetons de conception, en fonction du nombre.

On me demande mon utilisation des crochets dans les attributs de classe beaucoup et la plupart du temps, ils reçoivent un accueil très mitigé. L'important est la clarté et je pense qu'ils le fournissent.

Si vous n'aimez pas les crochets, vous pouvez utiliser quelque chose comme des tuyaux à la place:

<article
class="card | section box | bg-base color-primary"
data-state="reversed"
>
article>

En fin de compte, peu importe ce que vous faites, car HTML et CSS sont suffisamment intelligents pour ignorer des choses qu'ils ne comprennent pas ou des choses qui n'ont aucun sens pour eux. Ce sont vraiment d'excellents langages de programmation pour cette raison.

Il ne s'agit pas d'une méthodologie complexe et fortement documentée. Enfin, pas maintenant, de toute façon. C'est plus une méthode conceptuelle d'organisation du CSS juste assez de ne pas trop s'éloigner de la manière «classique» de l'écrire. Vraiment, c'est plus une structure de réflexion.

J'ai parcouru tout le long du trou de lapin de micro-optimisation et j'ai parcouru le «construisons une bibliothèque de composants squelettiques pour tous les projets» (cela n'apporte presque jamais aucun avantage). À l'autre extrémité de l'échelle, j'ai également réalisé tous les globaux avec un style de balise HTML direct. Toute méthode est extrêmement valable pour votre contexte et si c'est ainsi que vous écrivez votre CSS, continuez à faire ce qui fonctionne pour vous et votre équipe. Tout ce que je recommanderais, c'est de garder à l'esprit les contextes et les avertissements des autres équipes avant de recommander votre chemin comme absolu.

Je présente principalement cette méthodologie aux personnes qui suivent mes cours et qui lisent mes tutoriels, en tant que support, afin qu’elles puissent comprendre Pourquoi Je fais les choses comme je suis, mais j'espère également que cela aide les autres. Si vous aimez ce que vous voyez et pensez plus concis, une documentation formelle serait utile: faites-le moi savoir!

J'aimerais aussi entendre vos autres pensées sur Twitter à l'adresse @piccalilli_, ou @hankchizljaw ou par email à hi@piccalil.li.

Vous voulez en savoir plus sur la façon dont je fais les choses avec CSS? Inscrivez-vous pour des mises à jour sur le cours Learn CSS From Scratch à venir ou prenez une copie de Every Layout.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *