Modern CSS for Dynamic Component-Based Architecture

Re:Modern CSS for Dynamic Component-Based Architecture by Guest71022 on Saturday June 17, 2023 @08:27PM (#36376151)

Comprehensive article.

I’ve long given up trying to keep up with everything added to the spec since about `display: flex`. There’s just too much stuff, and the shoehorning of features into a syntax/spec from 1996 doesn’t appear to me to be a sustainable long term strategy to facilitate increasingly complex web applications.

Maybe it’s been considered, but some use of namespaces and modules in the syntax could at least help developers opt into specific CSS modules and let other developers know what magic they can expect to find in the stylesheet.

``` @use grid @use container @use layer

@layer layout { .layout-grid { --layout-grid-min: 30ch; --layout-grid-gap: 3vw;

    display: grid;
    grid-template-columns: repeat(
      auto-fit,
      minmax(min(100%, var(--layout-grid-min)), 1fr)
    );
    gap: var(--layout-grid-gap);
  }

}

@layer layout { :is(.layout-grid, .flex-layout-grid) > * { container: var(--grid-item-container, grid-item) / inline-size; } }

```

[ Parent | on HN ]

Re:Modern CSS for Dynamic Component-Based Architecture by IceSentry on Saturday June 17, 2023 @08:57PM (#36376297)

Flex was added in 2009. Is it really too much work to update yourself every couple of years? I get that it moves fast, but that's almost 15 years.

[ Parent | on HN ]

Re:Modern CSS for Dynamic Component-Based Architecture by paddw on Saturday June 17, 2023 @09:04PM (#36376331)

I think it's not the work of updating but trying to remember.

If you are doing consistent frontend you can probably keep it all, but if you only touch it occasionally, it's just too much.

[ Parent | on HN ]

Re:Modern CSS for Dynamic Component-Based Architecture by yxre on Saturday June 17, 2023 @11:29PM (#36377037)

Flex was added in 2009, but it had bugs as late as 2017. It is one of the problems with adding features as fast as they are. There is no point in having features if they don't work or are broadly supported

[ Parent | on HN ]

Re:Modern CSS for Dynamic Component-Based Architecture by irrational on Sunday June 18, 2023 @01:57AM (#36377685)

Yes. Many years ago I had the time to devote to keeping up with changes to CSS, JS, and all the other languages and technologies I use, but now I have increased responsibilities at work, a family that needs my time, a home that needs maintenance, etc. I simply do not have a minute to spare with updating. Maybe after I retire.

[ Parent | on HN ]

Re:Modern CSS for Dynamic Component-Based Architecture by iudqnolq on Saturday June 17, 2023 @09:12PM (#36376371)

Having been in that position I found learning grid worthwhile.

I feel like what you want might be a static analyzer?

[ Parent | on HN ]

Re:Modern CSS for Dynamic Component-Based Architecture by BenLloydPearson on Saturday June 17, 2023 @11:21PM (#36377002)

Are you me? I occasionally have to touch CSS while working on technical docs and just spent more time with CSS than I have in a couple of years. Reading this article completely opened my eyes to how much has changed in this space. I thought I was cool for using flexbox last week.

[ Parent | on HN ]

Re:Modern CSS for Dynamic Component-Based Architecture by bruce511 on Sunday June 18, 2023 @01:54AM (#36377672)

I don't want to make any judgements about you specifically, so this is more of a general observation. It's not meant to be personal or pejoritive.

When the Web exploded onto us the first time (late 90s) html and css were limited, and JavaScript mostly unused, so the door opened to lots of "untrained" [1] people to make a living building Web sites.

Explosion number 2 comes the the aughts, and is characterised by the split of "front end" and "back end". FrontPage, WordPress, and other site builders lower the barrier to entry, and make Web design accessible to the common man.

If one comes up through these ranks then the train of new css, new javascript, even new html can seem daunting.

For those who came in "easy" it just seems like things are getting more and more complex. Whereas to those who are used to "programming is hard", these are fantastic additions which make so much more possible.

The good news is that you dont actually have to keep up. A flex based site is perfectly fine. A marketing company, staffed with creatives, think WordPress is perfect, and discussions about CSS are pretty shallow. They find a theme and move on. The theme-makers however love this progress in css.

So yeah, whether you're writing css or c or whatever the language-of-the-month is this week, stuff moves quickly.

[1] by untrained here, I mean people without programming training. The language of that time was c++ or c, both of which required a deep understanding of programing.

[ Parent | on HN ]

Re:Modern CSS for Dynamic Component-Based Architecture by zoul on Sunday June 18, 2023 @03:00AM (#36377980)

I’m used to programming being “pointer arithmetic, manual memory management, higher kinded types and monads” hard and still find CSS to be hard to understand and use, often going with trial and error.

[ Parent | on HN ]

Re:Modern CSS for Dynamic Component-Based Architecture by MrJohz on Sunday June 18, 2023 @03:34AM (#36378112)

I mean, I've come from the other end and find manual memory management hard. I've picked up a lot of Rust, but there's still bits around pointer manipulation and bit fiddling where I just try stuff and see what works.

Software development is a big subject. It seems pretty natural to me that if you've mainly focused on one area, you'll have to go back to the basics if you want to do stuff in another area. And that will make things like CSS feel hard for you, but really trivial for me, whereas low-level stuff will be obvious for you, and I'll struggle to get my head around it. That doesn't speak to some objective scale, just personal experiences.

[ Parent | on HN ]

Re:Modern CSS for Dynamic Component-Based Architecture by bryanrasmussen on Sunday June 18, 2023 @03:51AM (#36378174)

perhaps the problem space of display on an infinite canvas is more difficult than these other things, or, as I think, that many programmers lack a design sense and this is a necessary component of being able to envision what the effects the statements you are writing will actually have the same way you might envision what the results data manipulating code might have on the data.

[ Parent | on HN ]

Re:Modern CSS for Dynamic Component-Based Architecture by jwarren on Sunday June 18, 2023 @01:33PM (#36382356)

We have layers now: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_...

I’d recommend this article on recent CSS developments: https://developer.chrome.com/blog/whats-new-css-ui-2023/

Be aware of the support of each of them, it’s not 100%, especially depending on your use case.

[ Parent | on HN ]