4 ms·

>To each their own, but I personally learned to hate this approach. In my experience, it leads to a CSS spaghetti full of overrides and `!important` just to get

>To each their own, but I personally learned to hate this approach. In my experience, it leads to a CSS spaghetti full of overrides and `!important` just to get all the utility classes to play nicely across a site. And of course the markup becomes less readable. The entire point of utility CSS frameworks is that you barely mess with the css, the css is already baked in, you just pick from it within html. >What I describe becomes even more practical if you separate your CSS concerns into concepts like "layout" and "component" or "design". That way the styles that handle your page layout and responsiveness don't get tangled with the styles that handle the appearance of elements. Frameworks like tachyons or tailwind have basically inverted the specificity/explicity/reach pyramid that is known from soft CSS frameworks like ITCSS. Their css file is quite similar.

harimau777 7y ago
I could see that working if the designers commit to limiting themselves to what is in the CSS. However, in my experience they generally want pixel perfect implementation of any design they come up with. As soon as that happens, I think that utility CSS becomes a major liability.
- deltron3030 7y ago
  Design systems that UI designers come up with can be baked into the utility css stylesheet in advance, before devs or other designers access it through html. Kinda like a living style guide, but in code. That's really the point, the css stylesheet is basically an intermediary step and single source of truth for the styles in the design. Then when stuff is being built devs don't have to think about styling, only layout and applying the correct values that are predefined in the css. That said, if you're on your own, have your own boilerplate and design skills that you can apply in real time and know css/html, you might be better off with regular css.
  - dsego 7y ago
    Design systems that UI designers come up with... and then break them later every chance they get, because unlike what developers believe, design is not always lego blocks and styles will be tweaked to fit the context. A developer sees the sum of all UI components on a page, but the designer sees missing accents or not enough spacing and will adjust those to fix issues or achieve a particular look... the result being new styles for that page.
    - csande17 7y ago
      +1. A lot of design systems assume that, for instance, there are only a few amounts of vertical padding you'll ever want to have on an element. But sometimes, the designer really will tell you that something needs 10 pixels of padding, your 8-pixel "p-2" value is too small, and your 12-pixel "p-3" value is too large.
      - rudiv 7y ago
        This is why I really like tailwinds, because for all the dynamically generated classes (90% of their utility classes) you can choose to use their scale (1unit=0.25rem) or just switch them all wholesale to a smaller increment so that when you need more specificity it's there.
      - harimau777 7y ago
        The problem that I see is that by making the decision that something needs to be pixel perfect the designer is often "volunteering" the engineer for an hour or more of fighting with CSS. In my experience the engineer is then expected to spend that time in addition to their normal workload. The only ways I can see it working are either: - Designers are obligated to follow the DLS. - Any divergence from the DLS is pointed and therefore takes away from the number of points the engineer commits to for other tasks during a sprint.
      - deleted 7y ago
        [deleted]
    - deltron3030 7y ago
      That's the designers fault then. Most alignment issues are caused by fonts and their bounding boxes that are based on line height (fonts have a default line height they ship with). One of the errors I often see is that designers define font sizes based on the letter sizes, not based on their bounding boxes or how well they fit into the bounding boxes that should match the defined component sizes within their design system. Design systems have spacing scales, and fonts (and their bounding boxes) should be part of it.

harimau777 7y ago

I could see that working if the designers commit to limiting themselves to what is in the CSS. However, in my experience they generally want pixel perfect implementation of any design they come up with. As soon as that happens, I think that utility CSS becomes a major liability.

deltron3030 7y ago
Design systems that UI designers come up with can be baked into the utility css stylesheet in advance, before devs or other designers access it through html. Kinda like a living style guide, but in code. That's really the point, the css stylesheet is basically an intermediary step and single source of truth for the styles in the design. Then when stuff is being built devs don't have to think about styling, only layout and applying the correct values that are predefined in the css. That said, if you're on your own, have your own boilerplate and design skills that you can apply in real time and know css/html, you might be better off with regular css.
- dsego 7y ago
  Design systems that UI designers come up with... and then break them later every chance they get, because unlike what developers believe, design is not always lego blocks and styles will be tweaked to fit the context. A developer sees the sum of all UI components on a page, but the designer sees missing accents or not enough spacing and will adjust those to fix issues or achieve a particular look... the result being new styles for that page.
  - csande17 7y ago
    +1. A lot of design systems assume that, for instance, there are only a few amounts of vertical padding you'll ever want to have on an element. But sometimes, the designer really will tell you that something needs 10 pixels of padding, your 8-pixel "p-2" value is too small, and your 12-pixel "p-3" value is too large.
    - rudiv 7y ago
      This is why I really like tailwinds, because for all the dynamically generated classes (90% of their utility classes) you can choose to use their scale (1unit=0.25rem) or just switch them all wholesale to a smaller increment so that when you need more specificity it's there.
    - harimau777 7y ago
      The problem that I see is that by making the decision that something needs to be pixel perfect the designer is often "volunteering" the engineer for an hour or more of fighting with CSS. In my experience the engineer is then expected to spend that time in addition to their normal workload. The only ways I can see it working are either: - Designers are obligated to follow the DLS. - Any divergence from the DLS is pointed and therefore takes away from the number of points the engineer commits to for other tasks during a sprint.
    - deleted 7y ago
      [deleted]
  - deltron3030 7y ago
    That's the designers fault then. Most alignment issues are caused by fonts and their bounding boxes that are based on line height (fonts have a default line height they ship with). One of the errors I often see is that designers define font sizes based on the letter sizes, not based on their bounding boxes or how well they fit into the bounding boxes that should match the defined component sizes within their design system. Design systems have spacing scales, and fonts (and their bounding boxes) should be part of it.