6 ms·

Is this really the way forward? I'm pretty sure implementing CSS from scratch (just looking at the specs) would take the average developer at least 10,000 hours

by dvt 3y ago

Is this really the way forward? I'm pretty sure implementing CSS from scratch (just looking at the specs) would take the average developer at least 10,000 hours. But in any case, why doesn't the container query bind to a class? Having to name your container is so weird (we already have names: they're called classes; and IDs; and DOM elements; and pseudo-classes; and aria labels; we need more!?). .special-wrapper { --theme: dark; container-name: stats; } @container stats style(--theme: dark) { .stat { /* Add the dark styles. */ } } Not to mention that half the problems in the blog post are completely manufactured: > That works fine, but if there is a space character within the <figcaption> element, it will fail. Uh, yeah, that's how :empty works (it's not "empty"). If that's such a pain point, I'd propose a :no-children-but-maybe-empty pseudo-class before you add a completely new feature to the language, :but-maybe-that's-just-me. /* Instead of.. */ html[dir="rtl"] .button-icon { transform: scaleX(-1); } /* We do this */ @container state(dir: rtl) { .button-icon { transform: scaleX(-1); } } Insert "they're exactly the same" meme. (Except for more curly braces: fun.)

silverwind 3y ago
> why doesn't the container query bind to a class Agree, a `@container <complex-selector-list> <container-condition> {}` would be so much more ergonomic.
OJFord 3y ago
> implementing CSS from scratch (just looking at the specs) would take the average developer at least 10,000 hours. You're way too generous: the average developer couldn't do it.
- pier25 3y ago
  Or maybe they could but with terrible performance.
tambourine_man 3y ago
I had the same feeling reading the article. This is getting out of hand. No radical new way of doing things, just more ways of doing the same things.
Izkata 3y ago
> (we already have names: they're called classes; and IDs; and DOM elements; and pseudo-classes; and aria labels; we need more!?). You forgot grid areas.
- thundermuffin 3y ago
  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!
  - runarberg 3y ago
    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 3y ago
      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"
ly3xqhl8g9 3y ago
"Is this really the way forward?" No. The way forward for scale-free systems which implement a hierarchy of competence is to have "the factory smaller than the product" [1]. Instead of the Chrome Canary team and the various Working Groups dictating from above what passes as valid, let the rules be sent at the same time with the interpretation of the rules [2]. In the same manner DNA encodes proteins with no mention of the underlying morphology, but once the RNA starts building the morphology arises. [1] Jim Keller talking about DNA Origami at 19:18, https://www.youtube.com/watch?v=gzgyksS5pX8 https://www.youtube.com/watch?v=gzgyksS5pX8 [2] Not even such a new idea, "Building a Better Web Browser - James Mickens - Harvard CS Colloquium 2015", on rendering at 04:20, https://www.youtube.com/watch?v=1uflg7LDmzI https://www.youtube.com/watch?v=1uflg7LDmzI
- codethief 3y ago
  I've been thinking about this lately: Writing a rendering engine for WASM or something, which then draws to a canvas. The rendering engine can then be shipped along with the actual UI. Sure, the rendering engine will take some time to load. However, compiling styling etc. to WebGL instructions at build time might also speed things up considerably. (The actual reason, however, I'd be interested in this is not performance but improving upon the developer experience and replacing CSS with something better.)
  - ly3xqhl8g9 3y ago
    To keep in mind, à la longue, the best CSS is probably no CSS. Does a user really need all these buttons and dropdowns, modals and scrollable containers, or do they need only an input and a container rendering a few paragraphs, an image, a video/audio, possibly a 3D model. I see no problem if instead of using all these web sites/applications with such a plethora of visual and experience spam, I just have a single input box connected to an agent through which I interact with them all, letting the APIs settle in the background. Furthermore, concepts such as file systems, operating systems, networking protocols, and so on, are probably terrible abstractions, just the fact that a 10 year old printer is pretty much unusable with a "modern" operating system or that a VFD shipped yesterday from the factory can be rendered useless due to a single byte error in the Modbus connection ought to give second thoughts to anyone daring to call themselves an engineer.
patates 3y ago
> Insert "they're exactly the same" meme. (Except for more curly braces: fun.) But the dir can also be auto (especially on inline/quoted content, forms, or multi-language sites), so the browser decides what the dir state is. The example in the article could perhaps be clearer, so I think it's normal for one to think they are the same. Please see: https://www.w3.org/International/articles/inline-bidi-markup/ https://www.w3.org/International/articles/inline-bidi-markup... Especially when you only have the container (perhaps you are designing a component library), reacting to state is much more secure, even though the browser support will haunt this feature for at least a year, or a couple of years to be more realistic.
deleted 3y ago
[deleted]
9dev 3y ago
> I'd propose a :no-children-but-maybe-empty pseudo-class Can we make this a vote? My candidate is :emptyish
asddubs 3y ago
there are already plans to change the behavior of :empty to ignore spaces

by dvt 3y ago

silverwind 3y ago

> why doesn't the container query bind to a class Agree, a `@container <complex-selector-list> <container-condition> {}` would be so much more ergonomic.

OJFord 3y ago

> implementing CSS from scratch (just looking at the specs) would take the average developer at least 10,000 hours. You're way too generous: the average developer couldn't do it.

pier25 3y ago
Or maybe they could but with terrible performance.

tambourine_man 3y ago

I had the same feeling reading the article. This is getting out of hand. No radical new way of doing things, just more ways of doing the same things.

Izkata 3y ago

> (we already have names: they're called classes; and IDs; and DOM elements; and pseudo-classes; and aria labels; we need more!?). You forgot grid areas.

thundermuffin 3y ago
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!
- runarberg 3y ago
  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 3y ago
    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"

ly3xqhl8g9 3y ago

"Is this really the way forward?" No. The way forward for scale-free systems which implement a hierarchy of competence is to have "the factory smaller than the product" [1]. Instead of the Chrome Canary team and the various Working Groups dictating from above what passes as valid, let the rules be sent at the same time with the interpretation of the rules [2]. In the same manner DNA encodes proteins with no mention of the underlying morphology, but once the RNA starts building the morphology arises. [1] Jim Keller talking about DNA Origami at 19:18, https://www.youtube.com/watch?v=gzgyksS5pX8 https://www.youtube.com/watch?v=gzgyksS5pX8 [2] Not even such a new idea, "Building a Better Web Browser - James Mickens - Harvard CS Colloquium 2015", on rendering at 04:20, https://www.youtube.com/watch?v=1uflg7LDmzI https://www.youtube.com/watch?v=1uflg7LDmzI

codethief 3y ago
I've been thinking about this lately: Writing a rendering engine for WASM or something, which then draws to a canvas. The rendering engine can then be shipped along with the actual UI. Sure, the rendering engine will take some time to load. However, compiling styling etc. to WebGL instructions at build time might also speed things up considerably. (The actual reason, however, I'd be interested in this is not performance but improving upon the developer experience and replacing CSS with something better.)
- ly3xqhl8g9 3y ago
  To keep in mind, à la longue, the best CSS is probably no CSS. Does a user really need all these buttons and dropdowns, modals and scrollable containers, or do they need only an input and a container rendering a few paragraphs, an image, a video/audio, possibly a 3D model. I see no problem if instead of using all these web sites/applications with such a plethora of visual and experience spam, I just have a single input box connected to an agent through which I interact with them all, letting the APIs settle in the background. Furthermore, concepts such as file systems, operating systems, networking protocols, and so on, are probably terrible abstractions, just the fact that a 10 year old printer is pretty much unusable with a "modern" operating system or that a VFD shipped yesterday from the factory can be rendered useless due to a single byte error in the Modbus connection ought to give second thoughts to anyone daring to call themselves an engineer.

patates 3y ago

> Insert "they're exactly the same" meme. (Except for more curly braces: fun.) But the dir can also be auto (especially on inline/quoted content, forms, or multi-language sites), so the browser decides what the dir state is. The example in the article could perhaps be clearer, so I think it's normal for one to think they are the same. Please see: https://www.w3.org/International/articles/inline-bidi-markup/ https://www.w3.org/International/articles/inline-bidi-markup... Especially when you only have the container (perhaps you are designing a component library), reacting to state is much more secure, even though the browser support will haunt this feature for at least a year, or a couple of years to be more realistic.

deleted 3y ago

[deleted]

9dev 3y ago

> I'd propose a :no-children-but-maybe-empty pseudo-class Can we make this a vote? My candidate is :emptyish

asddubs 3y ago

there are already plans to change the behavior of :empty to ignore spaces