[thundermuffin]

All of the CSS grid syntax craziness is one of the biggest reasons I was completely OK when our dev team adopted Tailwind. I am one of those devs who couldn't implement all of the CSS spec like @OJFord mentioned... but probably because I always forget what in the world all the options mean/are, haha!

[Culonavirus]

> but probably because I always forget what in the world all the options mean/are, haha!

CSS is so big, and only getting bigger all the time (just read the Chrome release highlights over the last few years, your head is going to spin just from the CSS additions alone), yet at the same time it's not a language (where you can typically get by with just learning the basics and start to write useful stuff real fast by relying on general algorithmization skill and programmer intuition), just a massive set of directives you can combine together, I really feel like at the point where it is all in your head and ready to go (i.e. you know what you're about to do, you do it and it does what you intended... without you having to go through a 10 minute Chrome dev tools & Stack Overflow intermezzo), you have to have such a good memory, that you would do much better as a lawyer or a doctor than "mastering css".

Is there some better universal styling solution than CSS? Probably not. Is CSS way, way too big nowadays? Hell yes.

[manuelmoreale]

I personally don’t understand the argument of CSS being too big.

You don’t have to use all the bells and whistles, you can just use a subset useful to you and be done with it.

[Culonavirus]

I disagree. While you can absolutely just pick and choose when using css as "salt & pepper" for an internal app ("admin" kind of part of a system), once you get into coding for a reasonably big frontend (of, say, an ecommerce site), suddenly you need all the bells and whistles for all the different media query versions of the site, mobile first is now a real requirement (most ecommerce visits are from mobile platforms and google uses mobile view to index and rate your site with Web Vitals) and so you have to know about flex, grid, typography, sizing, animations, scrolling, interactions, layout shifts, performance, browser support etc. etc. as otherwise you have an ugly, buggy, jumpy, unmaintainable mess on your hands.

There's a reason there are dedicated jobs for just front end development. It's a big task, and often for a different (not worse, just different) kind of person than your typical programmer who enjoys algorithmization. It's more about a person's crisp memory and good visual design ability.

For some of us who work as "full stack" devs sometimes, it's a lot of additional crap that you need to know... and so I can see why things like Tailwind (and its paid and free components) are popular.

[zarzavat]

As someone who started when CSS was so underpowered that layout was still done with <table>… I remember the introduction of every new CSS feature, and I will cherish them all forever.

The introduction of flexbox was like Christmas to me, and CSS grid was all my birthdays and Christmases at once.

It’s definitely much easier when you learn all of these features as a drip drip drip over decades.

I can’t imagine picking up CSS from scratch as a new dev in 2023. It must be extremely intimidating.

Although on balance, I’d say that despite the extra features, CSS is a lot simpler now than it was in the 00s and early 10s. The rendering engines are much better and agree almost all the time, in the past you’d spend a most of your time debugging your layout in different browsers, or fighting CSS to get it to get it to make the layout that you want (and eventually giving up and using a table)

[manuelmoreale]

I don’t disagree with you. But you also don’t disagree with me either.

You said it yourself “once you get into the coding for a reasonably big frontend”. That’s a specific task and the web is not made of only big projects.

CSS is vast but also allows you to ease into it. You don’t have to master it from day one in order to use it.

And that’s the beauty of it imo. I personally enjoy working with CSS and one of the reasons why I like it it’s because after 10 years and hundreds of sites coded I still learn new things about it.

[runarberg]

I feel like the frontend gets an unfair treatment by many here on HN. I doubt people complain that the standard library of python is too vast, and you cannot master it. I feel like there is a lack of respect for professionalism on the front end stack and a lack of understanding that we front end developers actually spend a lot of time mastering this craft so we can use it skillfully at our jobs.

The only way I can make sense of this sentiment is that people feel like CSS is something to hack with, it is a toy, for hackers to play with, not a tool for professionals who spend years mastering the skill. I wonder why this is.

[manuelmoreale]

My sense of this (and I might be entirely wrong) is that CSS is a tool that is geared towards the presentation/design layer and that is somewhat removed from what most developers do or want to do or are happy doing.

It lives in this weird in between land where it's not really a programming language but it's complex enough to be hard to use by designers who are not really into programming.

I agree with you that mastering frontend requires a lot of time and practice, especially because it's a constantly moving target with new features, new tools and browsers that are constantly evolving.

I personally like it, I love the flexibility and I love that it's constantly changing and I have new tools I can use. It's also funny how there seems to be always something missing.

[pas]

Isn't the critique that CSS is not at the right level? It's a collection of very specific pragmatic APIs? At least during the big Houdini effort it seemed like browser vendors want to offer something lower level, that allows more and better control of the whole layout and rendering pipeline. Please correct and extend my comment if possible, because I'm admittedly now up to date with even the status of that aforementioned project.

[easyThrowaway]

But once you get into a pre-existing project, you have to be aware how every part of the language interact with each other. Grid vs Flex vs Tables vs Queries vs Components You have to know the language pretty well to avoid visual glitches.

Corner and general cases are usually documented on the MDN, but they're not very intuitive, and often very, very subtle. Did you know that just by using an apple magic mouse vs a magic trackpad you could change the behavior of the "overflow" property?

[manuelmoreale]

This is a fair point and one I’d agree with when it comes to working on pre-existing projects.

I was commenting on CSS in general. That said, CSS is easy to understand in general IMO so even if you’re not familiar with a specific property or tool within CSS it shouldn’t take a ton of time to understand how to use it.

But that’s my experience with it and I understand that I worked with CSS daily for the past 10+ years so I might have a skewed perspective.

[runarberg]

How would you have done differently in the grid spec?

You don't have to use named grid areas if you don't like. But honestly, why wouldn't you. grid-template-areas makes working with grid a walk in the park imo.

Also very few of us web devs know all of CSS by heart. We use tools and reference manuals all the time as we are working. I suspect no python developer knows all of python either and are constantly looking at documentation or hints from their language server/IDE. The real skill is knowing where to look, not what to write.

[thundermuffin]

Just want to preface this with this is all my opinion, and I know I'm not necessarily correct at all.

If I were given free reign, I would have tried to do some different naming for properties like grid-auto-rows/grid-auto-columns/grid-auto-flow. My internal way of thinking about how the first two control the height & width, respectively, don't line up with how I view the word "auto" in other places in CSS.

I also feel like there should have been a true shorthand for just creating an mxn grid. That's one of the biggest reasons I enjoy Tailwind because I can just say "grid grid-cols-3" and get a 3 column grid without me having to explicitly say I want them all even. I would have probably been naïve and made it work closer to the old column-count where giving it a unitless number and it makes it equal in the space; on top of that, I'd then layer the actual spec so you could do variable sized rows/columns.

The other thing I would have done would have been to focus time and effort on finding a way to easily reverse a grid. I know you can use the rtl/ltr hack to do it, and that grid being a 2-axis display method brings a lot of hard questions about "what does reversing a grid mean?". I know names could help here, but it just doesn't make sense in a CMS environment where editors can place as many or as few items in a grid as they want, so I can't just do "a b" -> "b a" based on media query, because there could be columns C through F, too, and I want them all reversed. Thankfully, this is mostly a mobile problem when they're stacked, so I can just switch to flexbox and column reverse, but still would've been nice to have an easier way to do this as the amount of SO posts I remember seeing for this indicated to me that folks did want this feature.

To answer why I don't use grid-template-areas often, I just don't find myself in a lot of situations where naming has made it easier. I guess I could do this kind of thing, but then everyone else is going to ask "where does a/b/c come from?", haha.

    "a a b b"
    "a a b b"
    "c c c c"

[runarberg]

Seems like you are looking for grid-template-columns: repeat(3, 1fr). I honestly don’t see a problem with the 1fr part here. I don’t know what you mean with variable sized rows/columns, because you can already do something like:

    grid-template-rows: auto var(--some-length) fit-content(30ch) minmax(12ch, auto) 1fr;

While I admit reversing the flow of grid items is a bit more verbose than flex items, it is still a pretty trivial thing to do, if you have named areas, you simply change the order of the area names, if you have explicit columns/rows you can just use negative indices for your grid-column/grid-row. If you have implicit columns/rows, you should probably be using flex (as—unlike grid—flex-direction: row-reverse also adjusts the scroll position) and a subgrid (though I will admit, grid-auto-flow: row-reverse should probably be an option; perhaps you can raise that with the CSSWG if you have a clear use case).

I can see the appeal of Tailwind for developers that don’t feel like becoming experts in CSS layout. However a lot of us frontend devs have spent quite some time studying CSS layout and do know how to work with it to get a desired layout. In my opinion, CSS grid is a resounding success story. I use it all the time in my job without any major issues. Did it take time to learn? Yes it did, I even ordered a whole book on the subject as I was studying it (https://abookapart.com/products/the-new-css-layout). Me personally, I would get insulted if my team decided to go with tailwind, as I would feel left out from my area of expertise. And that now instead of using what I know about CSS, I’m forced to learn a whole new system, and consult new documentation that I’m not familiar with.

[thundermuffin]

It isn't necessarily a "problem", but I personally am a fan of keeping simple use cases as simple as possible. In my eyes, bringing the syntax to barebones makes it easier to read and more maintainable for these ultra simple use cases (for instance this 3x3 equally sized grid).

    grid-rows: 3;
    grid-columns: 3;

Is it an excruciating pain to need to currently type repeat(3, 1fr)? Nope, not at all, and I'd gladly do it if my team wanted to plain CSS or SASS, but to me that statement doesn't feel nearly as succinct or (dare I say) elegant as other areas of CSS, such as:

    margin: 2rem;
    padding: 1rem 0.5rem;

What I meant by variable sized rows & columns was to keep the rest of the spec as close as possible to what it is now, but layered on top of my suggested simpler syntax from above. That way if I wanted to do something that isn't just n equal-sized columns, I could just write out

    grid-template-columns: 1fr 2fr 1fr;

and it would work as CSS grid currently does. It's the best of both worlds!

I'm also a frontend developer who has spent a pretty significant chunk of time studying CSS. Maybe I gave off the impression that I'm too incompetent to learn the latest features of the language and write them in plain CSS, but that wasn't what I meant. It is way more that I find little pleasure in writing CSS compared to other frontend responsibilities.

Am I happy and grateful that grid, container queries, and the rest of the new features exist? Yes, I am, and grid is one of the tools I reach for the most. In the end, I only had tiny things I wish could have been different about it after using it and realizing "rats, that syntax could have been made a tiny bit simpler for how I use it a lot of the time," or wishes for features that would just make life easier even if the current way of doing things is trivial.

Haha, you know what they say, different strokes for different folks! I didn't feel insulted in the slightest when our lead frontend developer suggested we give Tailwind a trial run. As a group, we were searching for a way to have consistency and a friendlier developer experience[0] throughout our many different projects & internal tools, but without having to bike shed with 10 different frontend developers or saddle someone with the responsibility of adding new CSS helpers as features rolled out (and the inevitable bike shedding that would happen every time). Some of my coworkers were upset about it because they prefer CSS and styling over JS and other frontend bits, but I think even the most fervent "vanilla CSS/SASS or nothing" holdout came around when she had to cover a project while someone was on vacation, and she found a level of consistency and naming that hadn't existed in our codebases.

--

[0] A couple of very old projects in a siloed team had a CSS guru building his own framework in SASS, but it's utility left a lot to be desired. In my opinion, you can't even place all of the blame on him, because his project was extremely standalone (and therefore had lulls when waiting for approvals and this was a way to pass the time and learn) and the company had very little guard rails to prevent this sort of thing. The combination of a small development team splintered between many different projects (no guidelines stating "this is how we are going to do this as a group" existed), everyone being overworked and burned out, and larger projects "winning" eyes of senior developers who held them to higher standards left him in a spot where I think he believed wholeheartedly that he was making a maintainable masterpiece that would end up being used in the rest of the projects when he finally finished it. Sadly, the framework never reached anything resembling a production-ready v1.0, but it did showcase some of his impressive knowledge of CSS.