This has me pumped up. Will be trying it immediately
Show HN: Vanilla CSS Tailwind alternative in 18 lines
11–15 of 15 posts
Re: Show HN: Vanilla CSS Tailwind alternative in 18 lines
#12Earlier quoted context omitted.
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:
I agree insofar that I would consider it misguided to consider using the style attribute or the CSSOM .style property "bad" in general.
But soon grows into a mess. Legitimate use cases exist, but there are many obvious reasons to avoid using it as the main driver of page css.
Re: Show HN: Vanilla CSS Tailwind alternative in 18 lines
#13Earlier quoted context omitted.
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:
I agree insofar that I would consider it misguided to consider using the style attribute or the CSSOM .style property "bad" in general. But soon grows into a mess. Legitimate use cases exist, but there are many obvious reasons to avoid using it as the main driver of page css.
CSS Scope Inline enables you to do something awesome not possible in Tailwind...
@media lg { /* As many lg properties you like instead of adding lg: to everything. */ }
https://developer.chrome.com/articles/css-nesting/#nesting-m...
Re: Show HN: Vanilla CSS Tailwind alternative in 18 lines
#14Why 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.
1. Element styles cause specificity issues. Probably not an issue in most cases you'd use this, but still a relevant consideration.
2. Element styles don't allow you to style child elements, pseudo-selectors, pseudo-elements, etc. They can only style a single element, directly, with no regard for anything else.
Re: Show HN: Vanilla CSS Tailwind alternative in 18 lines
#15Earlier quoted context omitted.
I agree insofar that I would consider it misguided to consider using the style attribute or the CSSOM .style property "bad" in general. But soon grows into a mess. Legitimate use cases exist, but there are many obvious reasons to avoid using it as the main driver of page css.
CSS Scope Inline enables you to do something awesome not possible in Tailwind... @media lg { /* As many lg properties you like instead of adding lg: to everything. */ } https://developer.chrome.com/articles/css-nesting/#nesting-m...
Yes, I love this and I'd love for the nesting proposal and custom media queries to gain broad browser support.
(edit: just realized I'm living in the past already! ^^)
Tailwind has a similar directive in external CSS files. Pun: it's not called @media. But the DSL again has some benefits here.
@apply + @screen is more powerful than what's possible in vanilla CSS. Especially regarding nesting and enforcing the design system breakpoints. Tailwind is pretty closely related to PostCSS in this regard, and keeps its syntax extensions close to proposals that might one day become standards (nesting, custom media queries etc)
But using Tailwind and focusing on external CSS files seems like the worst of both worlds.
I have to say, in a React context I prefer styled components or simple external CSS, but in my previous job Tailwind was a godsend. Having to churn out large amounts of CSS in a quick yet precise manner, involving other team members who might have different habits and knowledge levels, this is where Tailwind shines for me.