Re:Inline CSS works better in a component world
by diob on Thursday August 20, 2020 @04:59AM
(#24221302)
I went from styled, to just using style as much as possible, to finally using tailwind. It's a wonderful development experience, and I hardly ever need to go beyond it. Can't recommend it enough, it makes developing quicker and simpler. And in the end, the product ends up looking way more consistent than anything else I've tried.
Re:Inline CSS works better in a component world
by j-krieger on Thursday August 20, 2020 @06:01AM
(#24221626)
I wish there was a mode to tree shake tailwind in production. Automatically extract all the class arguments into css classes for a cleaner markup
Re:Inline CSS works better in a component world
by akoutmos on Thursday August 20, 2020 @01:11PM
(#24225666)
While there is no automatic way of doing it (as far as I know), I have been using Tailwind's @apply directive for things that are used site wide and that has worked out well. Really excited to use the latest 1.7 version that makes this process even easier given you don't need to split up pseudo classes https://github.com/tailwindlabs/tailwindcss/pull/2159.
Re:Inline CSS works better in a component world
by wtf_srsly on Thursday August 20, 2020 @04:55AM
(#24221282)
> You can do these things in JavaScript: match your media queries in JavaScript and change the inline styles, and reimplement :hover, :focus and the likes. But I expect (without supporting measurements) that doing this for everything will be fairly bad for performance, and it will generally be less responsive (in the performance sense of the word rather than the resolution-independence sense of the word), e.g. your state-dependent styles may apply a frame later than they should.
It's also fairly bad practice to put your CSS into JavaScript for a number of reasons (such as accessibility, disabled javascript etc.).
You can do these things in JavaScript: match your media queries in JavaScript and change the inline styles, and reimplement :hover, :focus and the likes. But I expect (without supporting measurements) that doing this for everything will be fairly bad for performance, and it will generally be less responsive (in the performance sense of the word rather than the resolution-independence sense of the word), e.g. your state-dependent styles may apply a frame later than they should. And I don’t like to depend on JavaScript without good cause.
This is where utility CSS frameworks strike the balance: by using regular class names for the effects of inline CSS, they can apply media queries and psuedoclasses. It’s an interesting approach that I haven’t used yet but I’ve steadily been coming around to the notion of for some sorts of projects.
(There are also pseudoelements; those can’t be implemented with inline CSS at all.)