4 ms·

> In your tool an anti pattern that I found was that it seems to use inline styles and css class names of sort 'font-normal' 'text-gray1', etc. That's unmaintai

> In your tool an anti pattern that I found was that it seems to use inline styles and css class names of sort 'font-normal' 'text-gray1', etc. That's unmaintainable for large code base. Actually lots of companies use micro classes. I first learned about it using Tachyons and built a full compliance platform. It’s good because you don’t need to worry about unintended visual changes and bad because you can’t make large style changes without lots of effort.

drinchev 8y ago
Yeah these are out in the wild right now, but having some sort of support for those would be what I would be really looking for. The missing link is the problem. Generated HTML/CSS doesn't know anything about current frameworks / naming conventions / atomic CSS, etc. `text-gray1` means what? Which library am I supposed to use in order to make this stylesheets work? Does it match tachyons or tailwind - no. So I have to add X lines of CSS to my project coming from a tool that I am not able to use once I change a simple class name? Not a good start.
- jasim 8y ago
  The code you saw in the video uses Tailwind CSS, which means the code doesn't generate a class for `text-gray1`, but rather, it creates a simple tailwind.confg.js file that lists out all the colors (and every other design scale like typography, spacings etc.). Tailwind uses this config to generate all the functional CSS classes necessary. It is highly suited for building custom UI designs, unlike Bootstrap, Bulma etc. that brings its own styles. The software also can generate BEM like you wish for in the future. One of our earlier iterations did do that, but the default stack today is Tailwind which I've found to be the second best way to approach CSS (the first is CSS-in-JS, but with explicit design scales).
  - chrisweekly 8y ago
    Tailwind can be used with CSS-in-JS, to great effect. Emotion is my favorite / recommendation.
    - jasim 8y ago
      That's really useful to know Chris, thanks!
      - chrisweekly 8y ago
        Right on, Jasim. :) BTW I took a look at your CodeGen project, and I'm impressed.

drinchev 8y ago

Yeah these are out in the wild right now, but having some sort of support for those would be what I would be really looking for. The missing link is the problem. Generated HTML/CSS doesn't know anything about current frameworks / naming conventions / atomic CSS, etc. `text-gray1` means what? Which library am I supposed to use in order to make this stylesheets work? Does it match tachyons or tailwind - no. So I have to add X lines of CSS to my project coming from a tool that I am not able to use once I change a simple class name? Not a good start.

jasim 8y ago
The code you saw in the video uses Tailwind CSS, which means the code doesn't generate a class for `text-gray1`, but rather, it creates a simple tailwind.confg.js file that lists out all the colors (and every other design scale like typography, spacings etc.). Tailwind uses this config to generate all the functional CSS classes necessary. It is highly suited for building custom UI designs, unlike Bootstrap, Bulma etc. that brings its own styles. The software also can generate BEM like you wish for in the future. One of our earlier iterations did do that, but the default stack today is Tailwind which I've found to be the second best way to approach CSS (the first is CSS-in-JS, but with explicit design scales).
- chrisweekly 8y ago
  Tailwind can be used with CSS-in-JS, to great effect. Emotion is my favorite / recommendation.
  - jasim 8y ago
    That's really useful to know Chris, thanks!
    - chrisweekly 8y ago
      Right on, Jasim. :) BTW I took a look at your CodeGen project, and I'm impressed.