5 ms·

This approach still seems nonsensical to me, and I've written tens of thousands of lines of CSS. If you're going to be doing things like .m-0 { marg

This approach still seems nonsensical to me, and I've written tens of thousands of lines of CSS. If you're going to be doing things like .m-0 { margin: 0; } Then you may as well just do <div style="margin: 0"></div>

carry_bit 5y ago
The former lets you use media queries to make it responsive, and can help impose a design system versus having a bunch of random sizes and colors.
echelon 5y ago
I suppose in theory it gives you the ability to tweak all styles of a given type together in unison. .color-primary { color: #f00; } Could easily become .color-primary { color: #00f; } But beyond this case, I don't understand it either. It feels like the gravity has moved a long way from CSS Zen Garden and that the web isn't about semantics and documents anymore since the practical usage differs. Any designers that can shed light on this tailwind trend?
- sodapopcan 5y ago
  You're not far off. What people often miss is that this is to be used for creating design systems. `m-0` doesn't necessarily mean `margin is zero`, it means the smallest margin available. You should also call it `m-xs` for example. Or if it does mean margin is 0 then it might be better suited to be called `m-none`. These utility classes play very nicely with component-based design. Just like JSX puts your markup in the same file as your code, this does the same for styling/layout. I wouldn't say it's necessarily "better for all" but it's absolutely a very viable way to work no matter how much some may cry heresy. It saves you from having to figure out what you're going to call everything upfront and let's you break things into components as you go. I haven't personally use it on a big project but I've found it a very clean way to work and have heard good things from folks using it on big projects.
- krsdcbl 5y ago
  That's the thing that speaks for tailwind with the swatch-like config, but applying this principle here would lead to utter chaos. If i need a little more spacing on alk my medium margins, i would end up with something like .m-8 { margin: 10px; } if i start editing these compiled styles
- chrisweekly 5y ago
  > "the web isn't about semantics and documents anymore" Bingo. The "documents" era of the web has given way to the "applications" era.
jdefelice 5y ago
Your approach wouldn’t work with media queries. In a system like tailwind you can do class=“m-0 md:m-4”
- cxr 5y ago
  If you're going to use something like Tailwind, please still add legible class names (e.g. "thumbnail") and don't just write things like class="m-0 md:m-4".
  - yakshaving_jgt 5y ago
    But then again, if you're going to use meaningful class names, i.e., names that suggest what the thing is rather than what it looks like, then you're not really doing the Tailwind thing.
    - cxr 5y ago
      > rather than You don't have to sacrifice semantics in order to opt in to Tailwind's cutesy approach at expressivity. class="thumbnail m-0 md:m-4" works wherever class="m-0 md:m-4" does and isn't user-hostile.
  - jdefelice 5y ago
    One could argue that `class="m-0 md:m-4"` is more legible because it describes exactly what is happening. No margin on small screen, margin of 4 units on medium breakpoints. Where the styling on thumbnail is unknown and the breakpoints are unknown, unless you look at the css, then if you need to override that css you have to worry about specificity.
    - cxr 5y ago
      You're talking about CSS. I'm talking about classes. > `class="m-0 md:m-4"` is more legible because it describes exactly what is happening If by "what is happening" you mean "how it's styled", but that's extremely presumptuous. You might as well argue that there's no difference between Flash and an equivalently styled web page since if you took a screenshot of each they'd be visually identical—as if the whole thing begins and ends with getting the "rectangle full of little lights" to change in a particular way <https://xkcd.com/722/ https://xkcd.com/722/>. It's very narrowminded. I'm not saying you have to be full on schema.org-conformant, but include something that actually makes sense instead of being as useless as the spew that CSS compilers put out.
cjpearson 5y ago
The main differences are that inline styles don't give you the ability to set responsive or pseudo-class variants and that using classes limits you to values defined in your design system.
- city41 5y ago
  Added bonus, the classes autocomplete in most editors, allowing you to style a component extremely quickly. "Tailwind" is a very apt name.
  - yakshaving_jgt 5y ago
    1. Text editors can autocomplete just about anything, including CSS styles. 2. The code you write shouldn't be compromised by the tool you use to write it.
sodapopcan 5y ago
As I addressed in another branch of this thread, you're actually missing the point and his article does a poor job communicating it off the bat with its first two examples. In your example, `.m-0` and `style="margin: 0"` aren't equivalent in this paradigm (even though they happen too be technically equivalent). `.m-0` really just means "no margin". If you look further down the article, you'll see: .m-1 { margin: 0.25 rem; } .m-2 { margin: 0.5 rem; } /* ... */ .m-10 { margin: 2.5 rem; } As you can see, the numbers don't match their values, the class names are meant to be relative to one other. A better way is to use constraint-based design and come up with a system where you would only have `.m-none`, `.m-xs`, `.m-sm`, `m-md`, `.m-lg`, `.m-xl` (for example). Libraries like Tailwind give you WAY more than you're going to need and you should only really be using a subset.
- yakshaving_jgt 5y ago
  I'm not sure I am missing the point actually. As a class name, `.m-none` is pretty terrible, because it says what the thing looks like rather than what it does. I can't see how in practice this doesn't lead to a much greater mess, and even in the best case you would end up with .m-none.br-kinda-rounded.p-a-bit.bw-pretty-thicc.bc-old-mauve The clever example in the article with using a loop to define values is not something I find particularly compelling either. The whole point with specifying relative values, e.g., percentages, ems, root ems, etc., is that they can change relative to an element they inherit from or from the root of the document. Furthermore, using class names is not the only way to achieve the effect in the example you pulled from the article. Sass (and just about any CSS superset from the past decade) can achieve the same with mixins, which would spare the resulting document from all the selector noise.
  - cjpearson 5y ago
    Atomic CSS class names have no semantic information and they are not meant to. If you need a class to describe what an element does, you're free to add one. The amount of class names is off-putting at first, but you get used to it pretty quickly. (I'd also recommend using numbers or sm, md, lg etc for your size increments, but to each their own.) Tailwind and friends aren't trying to solve the CSS Zen Garden problem. Their focus is on re-usable CSS rather than re-usable HTML. Depending on your needs that may be better or worse.
pizzeriafrida 5y ago
I feel the same way, but also understand what folks are saying in the replies to this, but I'm more coming at it from an API standpoint preferring something like https://github.com/workframers/wonka https://github.com/workframers/wonka (albeit in Clojurescript). But there I get to use inline styles with 'special' values that could mean something in my theme like `padding: my.theme/container-padding`, and it's also just data so I can merge them etc. This seems preferential over a single string with various syntax. I could be wrong in that my linked approach is not the same.

carry_bit 5y ago

The former lets you use media queries to make it responsive, and can help impose a design system versus having a bunch of random sizes and colors.

echelon 5y ago

I suppose in theory it gives you the ability to tweak all styles of a given type together in unison. .color-primary { color: #f00; } Could easily become .color-primary { color: #00f; } But beyond this case, I don't understand it either. It feels like the gravity has moved a long way from CSS Zen Garden and that the web isn't about semantics and documents anymore since the practical usage differs. Any designers that can shed light on this tailwind trend?

sodapopcan 5y ago
You're not far off. What people often miss is that this is to be used for creating design systems. `m-0` doesn't necessarily mean `margin is zero`, it means the smallest margin available. You should also call it `m-xs` for example. Or if it does mean margin is 0 then it might be better suited to be called `m-none`. These utility classes play very nicely with component-based design. Just like JSX puts your markup in the same file as your code, this does the same for styling/layout. I wouldn't say it's necessarily "better for all" but it's absolutely a very viable way to work no matter how much some may cry heresy. It saves you from having to figure out what you're going to call everything upfront and let's you break things into components as you go. I haven't personally use it on a big project but I've found it a very clean way to work and have heard good things from folks using it on big projects.
krsdcbl 5y ago
That's the thing that speaks for tailwind with the swatch-like config, but applying this principle here would lead to utter chaos. If i need a little more spacing on alk my medium margins, i would end up with something like .m-8 { margin: 10px; } if i start editing these compiled styles
chrisweekly 5y ago
> "the web isn't about semantics and documents anymore" Bingo. The "documents" era of the web has given way to the "applications" era.

jdefelice 5y ago

Your approach wouldn’t work with media queries. In a system like tailwind you can do class=“m-0 md:m-4”

cxr 5y ago
If you're going to use something like Tailwind, please still add legible class names (e.g. "thumbnail") and don't just write things like class="m-0 md:m-4".
- yakshaving_jgt 5y ago
  But then again, if you're going to use meaningful class names, i.e., names that suggest what the thing is rather than what it looks like, then you're not really doing the Tailwind thing.
  - cxr 5y ago
    > rather than You don't have to sacrifice semantics in order to opt in to Tailwind's cutesy approach at expressivity. class="thumbnail m-0 md:m-4" works wherever class="m-0 md:m-4" does and isn't user-hostile.
- jdefelice 5y ago
  One could argue that `class="m-0 md:m-4"` is more legible because it describes exactly what is happening. No margin on small screen, margin of 4 units on medium breakpoints. Where the styling on thumbnail is unknown and the breakpoints are unknown, unless you look at the css, then if you need to override that css you have to worry about specificity.
  - cxr 5y ago
    You're talking about CSS. I'm talking about classes. > `class="m-0 md:m-4"` is more legible because it describes exactly what is happening If by "what is happening" you mean "how it's styled", but that's extremely presumptuous. You might as well argue that there's no difference between Flash and an equivalently styled web page since if you took a screenshot of each they'd be visually identical—as if the whole thing begins and ends with getting the "rectangle full of little lights" to change in a particular way <https://xkcd.com/722/ https://xkcd.com/722/>. It's very narrowminded. I'm not saying you have to be full on schema.org-conformant, but include something that actually makes sense instead of being as useless as the spew that CSS compilers put out.

cjpearson 5y ago

The main differences are that inline styles don't give you the ability to set responsive or pseudo-class variants and that using classes limits you to values defined in your design system.

city41 5y ago
Added bonus, the classes autocomplete in most editors, allowing you to style a component extremely quickly. "Tailwind" is a very apt name.
- yakshaving_jgt 5y ago
  1. Text editors can autocomplete just about anything, including CSS styles. 2. The code you write shouldn't be compromised by the tool you use to write it.

sodapopcan 5y ago

As I addressed in another branch of this thread, you're actually missing the point and his article does a poor job communicating it off the bat with its first two examples. In your example, `.m-0` and `style="margin: 0"` aren't equivalent in this paradigm (even though they happen too be technically equivalent). `.m-0` really just means "no margin". If you look further down the article, you'll see: .m-1 { margin: 0.25 rem; } .m-2 { margin: 0.5 rem; } /* ... */ .m-10 { margin: 2.5 rem; } As you can see, the numbers don't match their values, the class names are meant to be relative to one other. A better way is to use constraint-based design and come up with a system where you would only have `.m-none`, `.m-xs`, `.m-sm`, `m-md`, `.m-lg`, `.m-xl` (for example). Libraries like Tailwind give you WAY more than you're going to need and you should only really be using a subset.

yakshaving_jgt 5y ago
I'm not sure I am missing the point actually. As a class name, `.m-none` is pretty terrible, because it says what the thing looks like rather than what it does. I can't see how in practice this doesn't lead to a much greater mess, and even in the best case you would end up with .m-none.br-kinda-rounded.p-a-bit.bw-pretty-thicc.bc-old-mauve The clever example in the article with using a loop to define values is not something I find particularly compelling either. The whole point with specifying relative values, e.g., percentages, ems, root ems, etc., is that they can change relative to an element they inherit from or from the root of the document. Furthermore, using class names is not the only way to achieve the effect in the example you pulled from the article. Sass (and just about any CSS superset from the past decade) can achieve the same with mixins, which would spare the resulting document from all the selector noise.
- cjpearson 5y ago
  Atomic CSS class names have no semantic information and they are not meant to. If you need a class to describe what an element does, you're free to add one. The amount of class names is off-putting at first, but you get used to it pretty quickly. (I'd also recommend using numbers or sm, md, lg etc for your size increments, but to each their own.) Tailwind and friends aren't trying to solve the CSS Zen Garden problem. Their focus is on re-usable CSS rather than re-usable HTML. Depending on your needs that may be better or worse.

pizzeriafrida 5y ago

I feel the same way, but also understand what folks are saying in the replies to this, but I'm more coming at it from an API standpoint preferring something like https://github.com/workframers/wonka https://github.com/workframers/wonka (albeit in Clojurescript). But there I get to use inline styles with 'special' values that could mean something in my theme like `padding: my.theme/container-padding`, and it's also just data so I can merge them etc. This seems preferential over a single string with various syntax. I could be wrong in that my linked approach is not the same.