• CUBE #CSS - Piccalilli

    In this article, I’m going to tell you about how I like to write CSS, which I think could help a lot of folks—at least I hope so—because I’ve used this approach, or an earlier iteration of this approach, to power massive websites, tiny blogs, mobile apps and even intranet software! This #methodology has roots in both huge projects that service millions of people all the way down to small websites and starter kits, thanks to its flexibility. This Flexibility has also enabled CUBE CSS to work in both very old and very new codebases.

    The focus of the methodology is utilising the power of CSS and the web platform as a whole, with some added controls and structures that help to keep things a bit more maintainable and predictable. The end-goal is shipping as little CSS as possible—leaning heavily into progressive enhancement and modern techniques. I hope by the end of the article, it’ll help you to re-think how maybe you write CSS in the future.

    What is CUBE CSS?

    CUBE stands for Composition Utility Block Exception, and CSS stands for, y’know, CSS (Cascading Style Sheets). As mentioned before, the CUBE methodology is very much an extension of good ol’ CSS, rather than a reinvention. This mantra is very seriously maintained too, as the cascade and inheritance particularity play a big role.

    This isn’t a heavily documented, complex methodology. Well, not now, anyway. It’s more of a concept method of organising CSS just enough to not pull to far away from the “classic” way of writing it. Really, it’s more of a thinking structure.

    I’ve been all the way down the micro-optimisation rabbit hole and been down the “let’s build a library of skeletal components for all projects” (this almost never brings any benefit). On the opposite end of the scale, I’ve done all globals with direct HTML tag styling, too. Any method is extremely valid for your context and if this is how you write your CSS, keep doing what works for you and your team. All I would recommend is keeping other team’s contexts and caveats in mind before you recommend your way as absolute.


    • #intégration #web #html #css #méthodologie

      2-3 trucs que j’ai trouvé intéressant :
      – séparer la notion de composition (layout quoi), cela dit il ne donne aucun exemple de code et de comment l’appliquer, et au final pour moi c’est un peu comme un « module »/block particulier, dont on ne connait pas les éléments intérieurs (BEM permet sans aucun problème d’avoir des blocks dans des blocks, donc par exemple avoir un block « card » dans un block « colonnes_3 » …)
      – le fait de ranger les classes CSS dans le HTML lui-même, à la fois dans un ordre logique ET le plus important avec un séparateur, qui sera parfaitement ignoré par HTML (je trouve ça pas mal avec juste pipe | c’est léger et ça fait bien le job)
      – le fait de mettre les variantes dans des data- du HTML… ce qui les rend plus facile d’accès au JS aussi… bon j’ai trouvé ça intéressant mais ça reste à voir, si vraiment utile par rapport à des classes de variante en plus…