6 ms·
If css had a strong opinion and better syntax for responsiveness by screen width, css frameworks were way less popular. Tailwind, bootstrap and co. aren't used
by sod 3y ago
If css had a strong opinion and better syntax for responsiveness by screen width, css frameworks were way less popular. Tailwind, bootstrap and co. aren't used to avoid writing css. It's used because writing
`class="my-4 mb-sm-5 mb-lg-6"` is so much faster and easier then doing this with a bunch of media queries and a class name, that has to be unique, because css is a global scope nightmare.
I mean, just look at it. You have to write all this crap in css just to achieve `class="my-4 mb-sm-5 mb-lg-6"`:
:root {
--breakpoint-sm: 500px;
--breakpoint-lg: 800px;
}
.foo {
padding: 1rem 0;
}
@media (min-width: var(--breakpoint-sm)) {
.foo {
padding-bottom: 1.5rem;
}
}
@media (min-width: var(--breakpoint-lg)) {
.foo {
padding-bottom: 2rem;
}
}
- xigoi 3y ago> class="my-4 mb-sm-5 mb-lg-6" I've seen Perl code that was more readable than this.
- conradfr 3y agoIf you know the convention it's quite easy. I don't know Tailwind but with Bootstrap it would be m = margin, y = y axis, b = bottom, sm/lg = screen size, 4/5/6 = size
- xigoi 3y ago4/5/6 what? Bananas? And what exactly is “screen size”? Does it refer to physical size, or number of pixels? Does it count width, height, or both?
- conradfr 3y agoThese refer to customizable variables and breakpoints that everyone using the library and having done css would know and you can probably click on your IDE to get to their definition. Personally I think that's way better than putting padding & margin in your own css classes. It actually cuts down a lot on the custom css you need to write and also helps having a uniform design.
- deprecative 3y agoYou're just using someone else's padding and margin classes. At least when you write your own it makes sense instead of Tailwind's alphabet soup bloat.
- ajanuary 3y agoNot really. Tailwind lets you configure your own spacing and breakpoints. You get to pick what those numbers mean.
- deprecative 3y agoThat's just a CSS variable. You don't need Tailwind for that.
- ajanuary 3y agoNever said you did. I was just explaining that you aren't "using someone else's padding and margin classes".
- cantSpellSober 3y agoThey are CJS modules or (ideally) Typescript. CSS custom properties (variables) are slightly different. import type { Config } from 'tailwindcss' export default { content: [], theme: { extend: {}, }, plugins: [], } satisfies Config (not arguing for or against TW here)
- dalmo3 3y agoYou don't need 5 question marks to tell us you don't know what breakpoints are.
- xigoi 3y agoI know what breakpoints are. As far as I'm aware, there are no standard values for them.
- arrowsmith 3y agoHere, here are Tailwind's standard breakpoints: 'sm': '640px', // => @media (min-width: 640px) { ... } 'md': '768px', // => @media (min-width: 768px) { ... } 'lg': '1024px', // => @media (min-width: 1024px) { ... } 'xl': '1280px', // => @media (min-width: 1280px) { ... } '2xl': '1536px', // => @media (min-width: 1536px) { ... } That's from the docs. https://tailwindcss.com/docs/screens https://tailwindcss.com/docs/screens If you don't want those specific breakpoints in your project, you can override the defaults in `tailwind.config.js`.
- deleted 3y ago[deleted]
- deliriumchn 3y ago> If you know the convention it's quite easy. This is exactly the problem. Humans write code for humans, not for tailwind specialists and bots. It should be clear and easy to read unless there is a valid reason for weird code (optimisations, hacks that don't work otherwise etc). Tailwind introduces yet another convention where it is absolutely pointless to do so.
- zztop44 3y agoBut isn’t BEM or a custom system of CSS variables strictly worse in this regard? Instead of knowing what class=“mb-4” means in Tailwind, they now need to know what class=“news-button” means in your specific application.
- xigoi 3y agoclass="news-button" means that it's a news button and will be styled the way that news buttons are styled. What's difficult about that?
- cantSpellSober 3y agoI already know CSS, I don't want to learn another convention. I've learned Bootstrap, Tailwind, Foundation, Tachyons, Chakra, Bourbon...at each moment in time they were to be the "last" new CSS library we'd ever use.
- jjdeveloper 3y agoThat’s not tailwind code. Would be class="my-4 sm:mb-5 lg:mb-6"
- wingspan 3y agoIt’s worse than that, since you can’t use CSS variables inside a media query!
- Sesse__ 3y agoOr, much shorter: .foo { padding: 1rem 0; @media (min-width: 500px) { padding-bottom: 1.5rem; } @media (min-width: 800px) { padding-bottom: 2rem; } }
- progx 3y agoAnd you write this crap `class="my-4 mb-sm-5 mb-lg-6"`hundreds of times in complex applications or `class="foo"`?
- yurishimo 3y agoHow many components in your application actually need the exact same layout tweaks in every use instance? There are some properties of CSS that are more static across screen sizes. Colors, borders, backgrounds, font-size (debatable!), animations, and maybe even some high level layouts (12 column grid, etc). The rest of CSS is minute positioning via padding, margins, and widths. Often you need to customize those details to use slightly different values dependent on context within the application itself. This is where utility classes shine.
- dmak 3y agoDo you practice atomic design? It shouldn't be an issue for you if you do
- quickthrower2 3y agoI love tech’s endless fixes for self-induced problems.
- emmacharp 3y agoYou absolutely don't have to name everything in CSS. Naming components is sufficient. And you already need to do that. Using good HTML markup provides you with 80% of the styling hooks you need in a component. Specificity management and flexibility can be baked in too. As for the media queries being hard/tiresome to write, don't we have IDE auto-completion for this exact purpose?