Show HN: Vanilla CSS Tailwind alternative in 18 lines
1–10 of 15 posts
Re: Show HN: Vanilla CSS Tailwind alternative in 18 lines
#2Very creative! Would have to try this to see how much sense it makes - there must be a slight performance degradation because the content of the style tags can't be applied and parsed immediately, no?
So that's a fundamental difference, no build step, tiny JS runtime instead that hooks into the page rendering.
The concept is interesting.
Has the benefit of staying close to vanilla CSS syntax.
I'm curious why you chose 'me' or 'this' instead of '&'?
OTOH, it might be useful for the browser to consider the style tags as valid but with unknown element names (that are also forbidden for custom elements as they don't have a dash). Don't know if this would be possible using '&' and it also collides with the CSS nesting proposal.
So.. after all, nice idea!
Being a bit more cynical though, I'm not sure if the JS dependeny and performance implications would be worth it for me to use in actual projects.
Tailwind has the benefit of producing lean CSS files with 0% dead CSS.
This approach would be more prone to the usual issues with CSS I guess, but addding custom syntax anyway. I'm also sceptical of transpiling to CSS using JS on the client.
Re: Show HN: Vanilla CSS Tailwind alternative in 18 lines
#3I know that here on HN we're supposed to just upvote things instead of writing comments like "this is amazing" but this is so amazing it deserves more than just an upvote.
So cool - can't wait to start using this!
Re: Show HN: Vanilla CSS Tailwind alternative in 18 lines
#4Very creative! Would have to try this to see how much sense it makes - there must be a slight performance degradation because the content of the style tags can't be applied and parsed immediately, no? So that's a fundamental difference, no build step, tiny JS runtime instead that hooks into the page rendering. The concept is interesting. Has the benefit of staying close to vanilla CSS syntax. I'm curious why you chos…
> I'm curious why [the author] chose 'me' or 'this' instead of '&'?
Looking at the source, the parser is written to let you use any of "me", "this", or "self" (I'm guessing you spotted that).
If I have one quibble with this project it's that line. The multiplicity of "this" designators is going to make client code written for this library harder to read not easier.
IMO the author should just pick one and stick with it, and do it now before there are too many pages using it. This is a false "flexibility" that feels like the bad old days when people thought "browsers should be flexible in what they accept", which did not serve us well in the long run.
That said, this is brilliant work.
Re: Show HN: Vanilla CSS Tailwind alternative in 18 lines
#5Why not just use the style attribute of elements? Polyfill support available here: http://vanilla-js.com/, but if you have a modern browser, like IE5+ you should be OK.
Re: Show HN: Vanilla CSS Tailwind alternative in 18 lines
#6Why not just use the style attribute of elements? Polyfill support available here: http://vanilla-js.com/ , but if you have a modern browser, like IE5+ you should be OK.
Media queries?
Re: Show HN: Vanilla CSS Tailwind alternative in 18 lines
#7Why not just use the style attribute of elements? Polyfill support available here: http://vanilla-js.com/ , but if you have a modern browser, like IE5+ you should be OK.
Media queries?
Good point, but that only applies to some things. Nav burgers, containers. Flexbox and grid can also help here (i was joking about IE of course!). Media query is the exception not the rule.
Re: Show HN: Vanilla CSS Tailwind alternative in 18 lines
#8This is very creative, I love out of the box thinking like this. Well done!
Re: Show HN: Vanilla CSS Tailwind alternative in 18 lines
#9Earlier quoted context omitted.
Media queries?
Good point, but that only applies to some things. Nav burgers, containers. Flexbox and grid can also help here (i was joking about IE of course!). Media query is the exception not the rule.
Yes, grid and flex can help to avoid some media queries, but for an actually responsive design this is far from enough. There are pages that don't need this much because they basically consist of one column with one main component (e.g. HN). And yes, you can have a responsive multi column layout without media queries, good point.
Still, almost all pages (at least most web applications) need media queries for their layout as well as for their individual components.
I think the author of this little 10LOC script is well aware of the style attribute so I fail to see what you want to say with your original comment.
Especially the link - you do realize that this script is written in simple "vanilla js", right?
Re: Show HN: Vanilla CSS Tailwind alternative in 18 lines
#10Earlier quoted context omitted.
Good point, but that only applies to some things. Nav burgers, containers. Flexbox and grid can also help here (i was joking about IE of course!). Media query is the exception not the rule.
Yes, grid and flex can help to avoid some media queries, but for an actually responsive design this is far from enough. There are pages that don't need this much because they basically consist of one column with one main component (e.g. HN). And yes, you can have a responsive multi column layout without media queries, good point. Still, almost all pages (at least most web applications) need media queries for their la…
Just that forgoing tailwind it seems to me style attributes are the natural choice. But media queries indeed may make it less practical to do that for everything: