6 ms·

> content:class="bg-amber-300 border-solid border-4 border-black rounded-md m-auto mt-32 px-8 pt-8 pb-32 w-3/5" Is this inline CSS reimagined?

mplewis 3y ago
This is how Tailwind works. This sort of comment comes up every time Tailwind is mentioned. Here's a recent piece on the popularity of the framework: https://matt-rickard.com/why-tailwind-css-won https://matt-rickard.com/why-tailwind-css-won
- lenkite 3y ago
  Considering that low-level atomic CSS lib like https://open-props.style https://open-props.style are now up-ticking in popularity, it is too early to say that Tailwind CSS "won".
mvkel 3y ago
If you use tailwind, you're rarely, if ever, coding CSS. you live in HTML world exclusively.
- bonzini 3y ago
  It is the same as inline css though.
  - throwaway77384 3y ago
    Not from a CSP (content security policy) perspective. Which can sometimes make all the difference.
    - deleted 3y ago
      [deleted]
  - ssijak 3y ago
    It is not. Tailwind is popular long enough that this argument should die already
    - _heimdall 3y ago
      Tailwind can be popular and function effectively as inline styles.
      - ssijak 3y ago
        but the statement is not correct
  - rvense 3y ago
    A) There are some important differences. For instances: sizes, spacings and colors are picked from a scale, not set in pixel values (although you can do that now if you need it.) B) There are many ways to "reinvent inline styles", this one is good, actually. I used to work with a fairly mature codebase. We enforced BEM-style names, but otherwise the CSS was extremely ad hoc (which, it is my impression, is quite normal). I ran some queries on our existing code, and found that most of our CSS classes were only used once, and most elements had only one style. They quite often had generic names, though, and when working with them you were always afraid to change a class because you didn't know if it'd been recruited elsewhere. And you certainly didn't delete anything. The growth in the size of the CSS was also quite extreme - it doubled over a year as far as I can remember. Probably because nobody ever deleted a class, even when they stopped using it, because then you would've had to check for sure that it was now unused and.. meh. I starting referring to all this as "might as well be inline"-styles, because really, all we did was move the inline information to a different file, which... has no benefits when you think about it[0]. A thoughtful application of atomic CSS would have been a massive ergonomic improvement IMO, and I've since used Tailwind on a big project and found it much, much easier to work with over time than the other system. [0] Yes, I know about the CSS Zen Garden. I don't think the principles apply to web applications - and, if anything, the approach to colors and font sizes in Tailwind makes theming much easier than in a messy codebase like what I used to work with.
  - naasking 3y ago
    It is inline css with all of the warts removed, eg. media queries are available, it exports a coherent design system rather than allowing any CSS, etc.
- beanjuiceII 3y ago
  yea between tailwind doing all my css as a string in an attribute, and htmx doing all my coding as a string in an attribute feels great! who says i need types in programming, who says i even need symbols, i can just do everything in strings! and then if i imagine the strings aren't there, then its like i'm programming for realzies. good times ahead!
zilti 3y ago
It is, and devs fall for it, as usual
- cqqxo4zV46cp 3y ago
  You are not smarter than everyone else.
mhitza 3y ago
Yes. But you also get to use states (hover, focus) and media queries within a class attribute.
doubleorseven 3y ago
At first glance, yes. But if you'll look closely, You will see the difference between hardcoding a style(inlining) and defining by reference(classes).
- ghusbands 3y ago
  But how is class="border-solid border-black" better than style="border:solid black"? It's hard to imagine that you'll change the border-black or border-solid classes to do something else, so some is clearly just a different inline style.
  - tesdinger 3y ago
    You can change the class to be white and then say it's for historical reasons later.
  - ponderings 3y ago
    People do that (not me) because you can easily change all elements that have that specific border type. You might change the radius or thickness, could add an outline or at least see what it looks like applied to everything. border-solid wont change but it follows the same approach for consistency.
  - doubleorseven 3y ago
    Border-solid can indeed be inlined but black is a color i think not all agreed on. I like #252325 but some will go for #030303. Also, it's like building your new and shiny app with i18n in mind. Do you really need translations when you are the only user? Probably not, but development is also about trying to predict what will happen next. classes helps you to grow.
    - throwaway167 3y ago
      'black' is a named web colour, no? In 1999. #000000 [1] Or aside from re-writing standards, I don't get the point about translations. I go for classes on elements, like <h1> h1: var(--c0-b); That means colours can be swapped around like an i18n language, by changing the palette that sits in the CSS file. Putting 'black' inline be it in actual inline css. or pseudo inline css that seems to be the case with the library here, is the exact opposite of an analogy to i18n in mind and seems a great step back, back to pre stylesheet days, in the power of abstraction. [1] https://www.w3.org/TR/REC-html40/types.html#h-6.5 https://www.w3.org/TR/REC-html40/types.html#h-6.5

mplewis 3y ago

This is how Tailwind works. This sort of comment comes up every time Tailwind is mentioned. Here's a recent piece on the popularity of the framework: https://matt-rickard.com/why-tailwind-css-won https://matt-rickard.com/why-tailwind-css-won

lenkite 3y ago
Considering that low-level atomic CSS lib like https://open-props.style https://open-props.style are now up-ticking in popularity, it is too early to say that Tailwind CSS "won".

mvkel 3y ago

If you use tailwind, you're rarely, if ever, coding CSS. you live in HTML world exclusively.

bonzini 3y ago
It is the same as inline css though.
- throwaway77384 3y ago
  Not from a CSP (content security policy) perspective. Which can sometimes make all the difference.
  - deleted 3y ago
    [deleted]
- ssijak 3y ago
  It is not. Tailwind is popular long enough that this argument should die already
  - _heimdall 3y ago
    Tailwind can be popular and function effectively as inline styles.
    - ssijak 3y ago
      but the statement is not correct
- rvense 3y ago
  A) There are some important differences. For instances: sizes, spacings and colors are picked from a scale, not set in pixel values (although you can do that now if you need it.) B) There are many ways to "reinvent inline styles", this one is good, actually. I used to work with a fairly mature codebase. We enforced BEM-style names, but otherwise the CSS was extremely ad hoc (which, it is my impression, is quite normal). I ran some queries on our existing code, and found that most of our CSS classes were only used once, and most elements had only one style. They quite often had generic names, though, and when working with them you were always afraid to change a class because you didn't know if it'd been recruited elsewhere. And you certainly didn't delete anything. The growth in the size of the CSS was also quite extreme - it doubled over a year as far as I can remember. Probably because nobody ever deleted a class, even when they stopped using it, because then you would've had to check for sure that it was now unused and.. meh. I starting referring to all this as "might as well be inline"-styles, because really, all we did was move the inline information to a different file, which... has no benefits when you think about it[0]. A thoughtful application of atomic CSS would have been a massive ergonomic improvement IMO, and I've since used Tailwind on a big project and found it much, much easier to work with over time than the other system. [0] Yes, I know about the CSS Zen Garden. I don't think the principles apply to web applications - and, if anything, the approach to colors and font sizes in Tailwind makes theming much easier than in a messy codebase like what I used to work with.
- naasking 3y ago
  It is inline css with all of the warts removed, eg. media queries are available, it exports a coherent design system rather than allowing any CSS, etc.
beanjuiceII 3y ago
yea between tailwind doing all my css as a string in an attribute, and htmx doing all my coding as a string in an attribute feels great! who says i need types in programming, who says i even need symbols, i can just do everything in strings! and then if i imagine the strings aren't there, then its like i'm programming for realzies. good times ahead!

zilti 3y ago

It is, and devs fall for it, as usual

cqqxo4zV46cp 3y ago
You are not smarter than everyone else.

mhitza 3y ago

Yes. But you also get to use states (hover, focus) and media queries within a class attribute.

doubleorseven 3y ago

At first glance, yes. But if you'll look closely, You will see the difference between hardcoding a style(inlining) and defining by reference(classes).

ghusbands 3y ago
But how is class="border-solid border-black" better than style="border:solid black"? It's hard to imagine that you'll change the border-black or border-solid classes to do something else, so some is clearly just a different inline style.
- tesdinger 3y ago
  You can change the class to be white and then say it's for historical reasons later.
- ponderings 3y ago
  People do that (not me) because you can easily change all elements that have that specific border type. You might change the radius or thickness, could add an outline or at least see what it looks like applied to everything. border-solid wont change but it follows the same approach for consistency.
- doubleorseven 3y ago
  Border-solid can indeed be inlined but black is a color i think not all agreed on. I like #252325 but some will go for #030303. Also, it's like building your new and shiny app with i18n in mind. Do you really need translations when you are the only user? Probably not, but development is also about trying to predict what will happen next. classes helps you to grow.
  - throwaway167 3y ago
    'black' is a named web colour, no? In 1999. #000000 [1] Or aside from re-writing standards, I don't get the point about translations. I go for classes on elements, like <h1> h1: var(--c0-b); That means colours can be swapped around like an i18n language, by changing the palette that sits in the CSS file. Putting 'black' inline be it in actual inline css. or pseudo inline css that seems to be the case with the library here, is the exact opposite of an analogy to i18n in mind and seems a great step back, back to pre stylesheet days, in the power of abstraction. [1] https://www.w3.org/TR/REC-html40/types.html#h-6.5 https://www.w3.org/TR/REC-html40/types.html#h-6.5