Hacker Timesnew | past | comments | ask | show | jobs | submitlogin

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;
            }
        }


> class="my-4 mb-sm-5 mb-lg-6"

I've seen Perl code that was more readable than this.


If 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


> 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.


But 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.


class="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?


4/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?


These 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.


You'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.


Not really. Tailwind lets you configure your own spacing and breakpoints. You get to pick what those numbers mean.


That's just a CSS variable. You don't need Tailwind for that.


They 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)


Never said you did. I was just explaining that you aren't "using someone else's padding and margin classes".


You don't need 5 question marks to tell us you don't know what breakpoints are.


I know what breakpoints are. As far as I'm aware, there are no standard values for them.


Here, 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

If you don't want those specific breakpoints in your project, you can override the defaults in `tailwind.config.js`.


I 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.


And you write this crap `class="my-4 mb-sm-5 mb-lg-6"`hundreds of times in complex applications or `class="foo"`?


How 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.


Do you practice atomic design? It shouldn't be an issue for you if you do


I love tech’s endless fixes for self-induced problems.


That’s not tailwind code. Would be class="my-4 sm:mb-5 lg:mb-6"


Or, much shorter:

  .foo {
    padding: 1rem 0;
    @media (min-width: 500px) { padding-bottom: 1.5rem; }
    @media (min-width: 800px) { padding-bottom: 2rem; }
  }


It’s worse than that, since you can’t use CSS variables inside a media query!


You 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?




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: