Michael G
@g12n.de
UI-Designer, using Code to create in CSS, SVG and JS. Technology enthusiast, fan of Smart Home, Humanist and dweller in the marvelous city of Cologne.
I would like to extend svg <path> with generator attributes. Like <path star-radius="10" star-count="5" /> to generate a start shape in the d attribute. Or a boolean operation attribute for a <g> to emulate the behaviour we know from Figma and Sketch.
December 2, 2025 at 8:47 AM
I would like to extend svg <path> with generator attributes. Like <path star-radius="10" star-count="5" /> to generate a start shape in the d attribute. Or a boolean operation attribute for a <g> to emulate the behaviour we know from Figma and Sketch.
(2/2) In the example above the button has no information wether the panel is opened or closed and therefor it has to show a triangle up or down.
The scroll example is even more complicated cause the button was to find out if it should be disabled or even if it should be shown at all.
The scroll example is even more complicated cause the button was to find out if it should be disabled or even if it should be shown at all.
December 1, 2025 at 2:50 PM
(2/2) In the example above the button has no information wether the panel is opened or closed and therefor it has to show a triangle up or down.
The scroll example is even more complicated cause the button was to find out if it should be disabled or even if it should be shown at all.
The scroll example is even more complicated cause the button was to find out if it should be disabled or even if it should be shown at all.
I tried to create a scroll button component. I was actually contemplating the use of invoker commands. However, there is an architectural hurdle: the element cannot communicate with the button to tell it about its internal state. Let's deconstruct the details element, for example: (1/2)
December 1, 2025 at 2:46 PM
I tried to create a scroll button component. I was actually contemplating the use of invoker commands. However, there is an architectural hurdle: the element cannot communicate with the button to tell it about its internal state. Let's deconstruct the details element, for example: (1/2)
CSS modules tied CSS to DOM generation. Basically shooting separation of concerns into the foot. And as described by in the article introduced possible discrepancies between front and backend generated DOM. And relied heavily on class names. Basically removing 99% of selector power.
December 1, 2025 at 8:29 AM
CSS modules tied CSS to DOM generation. Basically shooting separation of concerns into the foot. And as described by in the article introduced possible discrepancies between front and backend generated DOM. And relied heavily on class names. Basically removing 99% of selector power.
And browsers and operating system point do really, really, really … bad job at this. The existence and visibility of a scroll bar and scroll button is dependent on OS and user settings and browser version. The proposed standard tries to remedy this unpredictability. (2/2)
December 1, 2025 at 7:27 AM
And browsers and operating system point do really, really, really … bad job at this. The existence and visibility of a scroll bar and scroll button is dependent on OS and user settings and browser version. The proposed standard tries to remedy this unpredictability. (2/2)
Pseudo-elements are a CSS way of accessing browser-provided elements. If we start questioning this now, we can essentially ditch CSS form control styling and things like '::details-content'. Scroll bars and scroll buttons are provided by the browser when needed. (1/2)
www.w3.org/TR/css-forms...
www.w3.org/TR/css-forms...
CSS Form Control Styling Level 1
www.w3.org
December 1, 2025 at 7:23 AM
Pseudo-elements are a CSS way of accessing browser-provided elements. If we start questioning this now, we can essentially ditch CSS form control styling and things like '::details-content'. Scroll bars and scroll buttons are provided by the browser when needed. (1/2)
www.w3.org/TR/css-forms...
www.w3.org/TR/css-forms...
And nobody actually did. In over a decade if friendly speaking disastrous results. Form the slightly annoying to the ludicrously stupid (see screenshot, that we already talked about)
Maybe it's time to meet css on its terms.
Maybe it's time to meet css on its terms.
December 1, 2025 at 7:14 AM
And nobody actually did. In over a decade if friendly speaking disastrous results. Form the slightly annoying to the ludicrously stupid (see screenshot, that we already talked about)
Maybe it's time to meet css on its terms.
Maybe it's time to meet css on its terms.
The ability to work additive is the strong point if CSS.
You declare it a bug.
And every framework that and solution that tried to solve this supposed bug inevitably lead into disaster. And broke the whole concept of the separation of concerns.
So maybe it's really not a bug. Just a solution.
You declare it a bug.
And every framework that and solution that tried to solve this supposed bug inevitably lead into disaster. And broke the whole concept of the separation of concerns.
So maybe it's really not a bug. Just a solution.
December 1, 2025 at 6:58 AM
The ability to work additive is the strong point if CSS.
You declare it a bug.
And every framework that and solution that tried to solve this supposed bug inevitably lead into disaster. And broke the whole concept of the separation of concerns.
So maybe it's really not a bug. Just a solution.
You declare it a bug.
And every framework that and solution that tried to solve this supposed bug inevitably lead into disaster. And broke the whole concept of the separation of concerns.
So maybe it's really not a bug. Just a solution.
But the trad off into the other direction would lead to ridiculous results. The current implementations of that are the living proof. The classname and selector soup and inline-style chunks resulting are not bugs. They are the logical and inevitable result of ditching and fighting a useful concept.
December 1, 2025 at 6:40 AM
But the trad off into the other direction would lead to ridiculous results. The current implementations of that are the living proof. The classname and selector soup and inline-style chunks resulting are not bugs. They are the logical and inevitable result of ditching and fighting a useful concept.
Yes. And it's working from the lowest to the specificity.
Exactly as I said. Working from the defaults to the specifics.
a{}
.ProductCard-Link{}
.ProductCard-ConfigurableOptions-VariantLink{}
.ProductCard-DeliveryPrice a{}
And all iterations of the cards are the same.
Exactly as I said. Working from the defaults to the specifics.
a{}
.ProductCard-Link{}
.ProductCard-ConfigurableOptions-VariantLink{}
.ProductCard-DeliveryPrice a{}
And all iterations of the cards are the same.
November 30, 2025 at 10:00 PM
Yes. And it's working from the lowest to the specificity.
Exactly as I said. Working from the defaults to the specifics.
a{}
.ProductCard-Link{}
.ProductCard-ConfigurableOptions-VariantLink{}
.ProductCard-DeliveryPrice a{}
And all iterations of the cards are the same.
Exactly as I said. Working from the defaults to the specifics.
a{}
.ProductCard-Link{}
.ProductCard-ConfigurableOptions-VariantLink{}
.ProductCard-DeliveryPrice a{}
And all iterations of the cards are the same.
What do you mean? There's one type of procuct card. Repeated a lot of times. All served from the same stylesheet. No artefacts of inline-style-frameworks or css components.
November 30, 2025 at 9:47 PM
What do you mean? There's one type of procuct card. Repeated a lot of times. All served from the same stylesheet. No artefacts of inline-style-frameworks or css components.
It doesn’t matter if there is 30, 300 or 3000 instances of your page layer list item. If they are identical, they are identical. Same goes for your dialogs.
Do you suppose we don’t organize our styles? We do. An we do as much as possible with as little as possible.
Do you suppose we don’t organize our styles? We do. An we do as much as possible with as little as possible.
November 30, 2025 at 9:30 PM
It doesn’t matter if there is 30, 300 or 3000 instances of your page layer list item. If they are identical, they are identical. Same goes for your dialogs.
Do you suppose we don’t organize our styles? We do. An we do as much as possible with as little as possible.
Do you suppose we don’t organize our styles? We do. An we do as much as possible with as little as possible.
Treating every item as a special case by default is extremely wasteful. No matter the size of project. Design systems typically have similar amounts of individual solutions (call them components if you like). If you have 12 different table styles and 36 button shaped you typically have a problem.
November 30, 2025 at 9:19 PM
Treating every item as a special case by default is extremely wasteful. No matter the size of project. Design systems typically have similar amounts of individual solutions (call them components if you like). If you have 12 different table styles and 36 button shaped you typically have a problem.
The workflow with CSS to first style the defaults and work yourself up to the special cases. And yes, in a product list generally als items will look the similar. After this you add the featured classes, hover states and so on. From low to high specificity.
November 30, 2025 at 9:15 PM
The workflow with CSS to first style the defaults and work yourself up to the special cases. And yes, in a product list generally als items will look the similar. After this you add the featured classes, hover states and so on. From low to high specificity.
When was the last time you saw a layout with over 300 elements were in need of individual styled control that was not a world map?
There was really no excuse. The original code before react was an unsorted list and 35 lines of CSS. It’s a product listing for heaven sake. Not dark magic.
There was really no excuse. The original code before react was an unsorted list and 35 lines of CSS. It’s a product listing for heaven sake. Not dark magic.
November 30, 2025 at 9:00 PM
When was the last time you saw a layout with over 300 elements were in need of individual styled control that was not a world map?
There was really no excuse. The original code before react was an unsorted list and 35 lines of CSS. It’s a product listing for heaven sake. Not dark magic.
There was really no excuse. The original code before react was an unsorted list and 35 lines of CSS. It’s a product listing for heaven sake. Not dark magic.
CSS is optimized for effectiveness, not for the safety.
That’s in my book a good thing.
You get with a selector a lot of bang for a buck. You handle a lot with little code.
Of course this is intimidating sometimes. You have to care about the markup. Which alarmingly few JavaScript devs do.
That’s in my book a good thing.
You get with a selector a lot of bang for a buck. You handle a lot with little code.
Of course this is intimidating sometimes. You have to care about the markup. Which alarmingly few JavaScript devs do.
November 30, 2025 at 7:56 PM
CSS is optimized for effectiveness, not for the safety.
That’s in my book a good thing.
You get with a selector a lot of bang for a buck. You handle a lot with little code.
Of course this is intimidating sometimes. You have to care about the markup. Which alarmingly few JavaScript devs do.
That’s in my book a good thing.
You get with a selector a lot of bang for a buck. You handle a lot with little code.
Of course this is intimidating sometimes. You have to care about the markup. Which alarmingly few JavaScript devs do.
And now take into consideration the div soup many frameworks cook up. You do not want to attack this with child selectors. Trust me: you don’t. Been there, done that. That’s why am a grumpy old man.
November 30, 2025 at 7:32 PM
And now take into consideration the div soup many frameworks cook up. You do not want to attack this with child selectors. Trust me: you don’t. Been there, done that. That’s why am a grumpy old man.
All descendants (of a type). Which is actually pretty useful especially in cases when the detailed structure of the descendants can vary.
With child selectors you often end up with spaghetti selectors.
`ul.cards>li>a,ul.cards>li>span>a{}` instead of
`ul.cards a{}`
With child selectors you often end up with spaghetti selectors.
`ul.cards>li>a,ul.cards>li>span>a{}` instead of
`ul.cards a{}`
November 30, 2025 at 7:29 PM
All descendants (of a type). Which is actually pretty useful especially in cases when the detailed structure of the descendants can vary.
With child selectors you often end up with spaghetti selectors.
`ul.cards>li>a,ul.cards>li>span>a{}` instead of
`ul.cards a{}`
With child selectors you often end up with spaghetti selectors.
`ul.cards>li>a,ul.cards>li>span>a{}` instead of
`ul.cards a{}`
And then or course comes the point of "Oh, we need these for the second brand here. Let's just change the font family and make it a bit bigger."
Answer in CSS: "Three declarations in the :root selector"
Answer because of CSSinJS: "Oh, that's a project of three months. Need to change all components."
Answer in CSS: "Three declarations in the :root selector"
Answer because of CSSinJS: "Oh, that's a project of three months. Need to change all components."
November 30, 2025 at 7:05 PM
And then or course comes the point of "Oh, we need these for the second brand here. Let's just change the font family and make it a bit bigger."
Answer in CSS: "Three declarations in the :root selector"
Answer because of CSSinJS: "Oh, that's a project of three months. Need to change all components."
Answer in CSS: "Three declarations in the :root selector"
Answer because of CSSinJS: "Oh, that's a project of three months. Need to change all components."