Thomas Tastet

Développeur Freelance

à propos

Je te donne plein de conseils utiles au métier de développeur et de temps en temps plus.

BracketCSS, Pensez responsive

/ Partager

Bonjour tout le monde, aujourd'hui je vais vous parler de BracketCSS, un outil que j'ai pu réaliser et déjà disponible sur NPM.

La problématique :

J'ai pu remarquer que sur les projets dans lesquels je travaille, le responsive n'était pas une tâche aussi simple que ça.

Le problème n'était pas le responsive lui-même mais la gestion du code, ce même code atteint des milliers de lignes sur de gros projets e-commerce et devient difficile à maintenir sans y passer beaucoup de temps ou sans ajouter du code qui passera en priorité sur l'ancien.

Je n'ai pas vraiment trouvé de solution à ce problème jusqu'au jour où sur Twitter, j'ai aperçu un tweet de Kyle Shook dans lequel il publie une image avec du code css qui s'apparente à ce qui pourrait être la solution à ce problème de gestion du responsive.

L'idée étant ici de définir une tableau "responsive" et d'attribuer aux attributs des éléments un tableau constitué des valeurs dans le bon ordre.

Le code "source" serait clean et facilement maintenable, mais l'outil permettant de faire fonctionner ce code n'existait pas encore.

Dans les réponses de ce tweet, j'ai pu voir ce nombreuses suggestions comme une fonction SASS permettant de faire plus ou moins ce que l'on veut, mais rien qui ne colle exactement à la vision du tweet.

J'ai donc décidé de prendre du temps et de coder un outil permettant de traduire du code comme celui du tweet en un code css compréhensible par le navigateur.

Et voici que la solution est née :

BracketCSS

BracketCSS est le transpiler qui transforme le code bcss en un code css.

Il est OpenSource et va être amené à évoluer avec plus de fonctionnalités.

Pour le moment, il est possible d'utiliser des variables et a une syntaxe similaire au SCSS.

Voici un exemple :

$color: red;
@media screen and max-width: [1920px, 1024px, 778px] {
  p {
    color: [${color}, green, blue];
    content: "\n";
  }
}

Maintenant que vous avez le code source, j'ai aussi réalisé un outil "watcher" qui permet de générer automatiquement un .css à partir d'un .bcss, voici le lien de bracketcss-watcher.

Maintenant parlons du futur de BracketCSS.

Actuellement, la principale fonctionnalité étant le responsive facilité fonctionne correctement et les variables aussi.

La prochaine étape sera de gérer les enfants pour pouvoir comme avec SCSS, pouvoir directement attribuer à un élément un élément enfant, puis une fonction d'importation d'autres fichiers .bcss.

L'outil est nouveau et donc il se peut qu'il y ai des problèmes, vous pouvez me les remonter sur Twitter ou sur Github en créant une nouvelle issue, vous pouvez aussi mettre une étoile sur le projet s'il vous plait 😄

Et si vous avez des suggestions c'est le moment, le projet étant en "beta", si des choses doivent changer, c'est bien le moment 😉