4 ms·

I personally have an issue with this "Utility/Functional" CSS pattern. To me I still think that the good old "HTML describe how the content is organized, CSS d

I personally have an issue with this "Utility/Functional" CSS pattern. To me I still think that the good old "HTML describe how the content is organized, CSS describe how this content looks like" is the way to go. In the end it's how CSS and HTML were designed at first. But when I see that <div class="bg-white mx-auto max-w-sm shadow-lg rounded-lg overflow-hidden"></div> I'm sorry but it just doesn't feels right to me.

cimmanom 8y ago
Yup. Call me old-school, but seeing markup like that makes me wince.
badestrand 8y ago
Yes, the problem is that this library just replaced typing <div style="background: white"> with <div class="bg-white"> without realizing that the first is considered a bad practice for a reason and that the second is equivalent.
- aloisdg 8y ago
  Isn't that basically the same thing as inline styles? Not quite, for a few reasons: Inline styles don't respect media queries, which basically rules out responsive design Inline styles aren't limited to pre-defined options, meaning you can still end up with 90 different shades of blue) Inline styles cause specificity issues, since they trump separate stylesheets. Inline styles don't support print-specific styles. Inline styles can't address pseudo-elements (such as ::before and ::after) Inline styles can't apply to multiple elements. Utility classes can define .bg-blue once and have it apply to many things, which leads to shorter markup and quicker rendering speed. Inline styles are a pain to type. Compare class="f-sm bg-blue" to style="font-size: 10px; background-color: #0000ff;". Utility classes fix all of these things. from https://www.mikecr.it/ramblings/functional-css/ https://www.mikecr.it/ramblings/functional-css/
  - maxxscho 8y ago
    Well summarized! Uitility/Functional CSS > Inline Styles
  - josephmx 8y ago
    So what happens when your design changes and suddenly all your white buttons need to be off-grey? You change the class on 700 components?
    - jasim 8y ago
      In my experience design revamps of this magnitude has always needed fresh markup, CSS, Javascript - aka an entirely new front-end. But in case it is just the color of all buttons, then you'd change them in the components. 700 components is quite a stretch - for example there are at most 50 components in Morning Star's design system - http://designsystem.morningstar.com/ http://designsystem.morningstar.com/. But let's say there are 700 components, what's the alternative if we were using BEM? You'd have to change all the 700 CSS classes, breaking things everywhere thanks to cascades, inheritance, multiple selectors, and specificity. With Functional CSS, all you have to do is go to the markup, and change "bg-white" to "bg-offgrey", and nothing breaks.
    - ImpressiveCat 8y ago
      In tailwind, you have a config file. You can just change the variable in the config file to the colour you need to change it to and it changes globally.
      - josephmx 8y ago
        "white-bg" then becomes a blue background that's called white...
        jetti 8y ago
        To be fair, you can do that with SASS variables too and is not unique to Tailwind.
adamwathan 8y ago
Author of Tailwind here! If you have the time, I wrote a big article about this a while ago and would be curious to know what you think: https://adamwathan.me/css-utility-classes-and-separation-of-concerns/ https://adamwathan.me/css-utility-classes-and-separation-of-...
- ben85ts 8y ago
  In the post you mention extending the first class, author-bio, to the article class. When you introduced the idea of the media-card wouldn't it make sense to have both the author-bio and article classes extend from it, maintaining the semantic naming but also making it easy to override or change some style for one in particular?
  - jasim 8y ago
    Overrides are special cases. Usually you start with one, but before you know the CSS file has bloated to thousands of lines with hundreds of overrides depending on context. With enough of them you can't comprehend the CSS anymore, which means you can't change any existing classes, and so the CSS becomes write-only. Adam Morse, who wrote Tachyons a highly influential Functional CSS library, has written about this nicely with concrete data: http://mrmrs.github.io/writing/2016/03/24/scalable-css/ http://mrmrs.github.io/writing/2016/03/24/scalable-css/

cimmanom 8y ago

Yup. Call me old-school, but seeing markup like that makes me wince.

badestrand 8y ago

Yes, the problem is that this library just replaced typing <div style="background: white"> with <div class="bg-white"> without realizing that the first is considered a bad practice for a reason and that the second is equivalent.

aloisdg 8y ago
Isn't that basically the same thing as inline styles? Not quite, for a few reasons: Inline styles don't respect media queries, which basically rules out responsive design Inline styles aren't limited to pre-defined options, meaning you can still end up with 90 different shades of blue) Inline styles cause specificity issues, since they trump separate stylesheets. Inline styles don't support print-specific styles. Inline styles can't address pseudo-elements (such as ::before and ::after) Inline styles can't apply to multiple elements. Utility classes can define .bg-blue once and have it apply to many things, which leads to shorter markup and quicker rendering speed. Inline styles are a pain to type. Compare class="f-sm bg-blue" to style="font-size: 10px; background-color: #0000ff;". Utility classes fix all of these things. from https://www.mikecr.it/ramblings/functional-css/ https://www.mikecr.it/ramblings/functional-css/
- maxxscho 8y ago
  Well summarized! Uitility/Functional CSS > Inline Styles
- josephmx 8y ago
  So what happens when your design changes and suddenly all your white buttons need to be off-grey? You change the class on 700 components?
  - jasim 8y ago
    In my experience design revamps of this magnitude has always needed fresh markup, CSS, Javascript - aka an entirely new front-end. But in case it is just the color of all buttons, then you'd change them in the components. 700 components is quite a stretch - for example there are at most 50 components in Morning Star's design system - http://designsystem.morningstar.com/ http://designsystem.morningstar.com/. But let's say there are 700 components, what's the alternative if we were using BEM? You'd have to change all the 700 CSS classes, breaking things everywhere thanks to cascades, inheritance, multiple selectors, and specificity. With Functional CSS, all you have to do is go to the markup, and change "bg-white" to "bg-offgrey", and nothing breaks.
  - ImpressiveCat 8y ago
    In tailwind, you have a config file. You can just change the variable in the config file to the colour you need to change it to and it changes globally.
    - josephmx 8y ago
      "white-bg" then becomes a blue background that's called white...
      - jetti 8y ago
        To be fair, you can do that with SASS variables too and is not unique to Tailwind.

adamwathan 8y ago

Author of Tailwind here! If you have the time, I wrote a big article about this a while ago and would be curious to know what you think: https://adamwathan.me/css-utility-classes-and-separation-of-concerns/ https://adamwathan.me/css-utility-classes-and-separation-of-...

ben85ts 8y ago
In the post you mention extending the first class, author-bio, to the article class. When you introduced the idea of the media-card wouldn't it make sense to have both the author-bio and article classes extend from it, maintaining the semantic naming but also making it easy to override or change some style for one in particular?
- jasim 8y ago
  Overrides are special cases. Usually you start with one, but before you know the CSS file has bloated to thousands of lines with hundreds of overrides depending on context. With enough of them you can't comprehend the CSS anymore, which means you can't change any existing classes, and so the CSS becomes write-only. Adam Morse, who wrote Tachyons a highly influential Functional CSS library, has written about this nicely with concrete data: http://mrmrs.github.io/writing/2016/03/24/scalable-css/ http://mrmrs.github.io/writing/2016/03/24/scalable-css/