Comments on: Avoiding the Pitfalls of Nested Components in a Design System

By: Jade

Jade — Fri, 29 Apr 2022 11:50:15 +0000

I echo the above about preferring to use CSS, media queries and container queries for this use case.

Something else to consider when using a JS first approach like this for anything that is statically rendered is that if the window width needs to be known then the styles will not be computed for the server side render so you could see layout shift or flashes of changing styles if the window width does not fall into whatever the default style you’ve set for the component is.

By: Niels

Niels — Fri, 29 Apr 2022 10:19:07 +0000

This strikes me as rather complex and a JS only solution for something that could be done in CSS. What I would do (and am currently doing in a huge Angular project) is use CSS custom properties (the name says it all: these are props for CSS) in the child component <Button /> and define these in the parent component <CTA />. This is also one of the few ways to style web components from the outside its shadow dom.

Button {
  width: var(--button-width, auto);
  ...
}

CTA {
  --button-width: 100%;
  ...
}

By: Steve

Steve — Thu, 28 Apr 2022 21:38:17 +0000

I don’t find much usefulness from this method. It’s convoluted and messy to me. I’d rather use container queries which have a solid polyfill already.

By: Mike Mai

Mike Mai — Thu, 28 Apr 2022 13:40:20 +0000

You might have used an example that's too simple, making your method seem over engineered.

<card>
  <layout template="cta">
    <div>heading and paragraph</div>
    <cta-button>...</cta-button>
  </layout>
<card>

Modern CSS alone can make this work without media queries. Why do you need JS?

By: Alexey Stepanov

Alexey Stepanov — Thu, 28 Apr 2022 12:29:06 +0000

It looks like not a good idea to resolve CSS-tasks using JS. I think it could couse perfomance issues and some strange bugs/behavior in future.

By: Romeo K

Romeo K — Thu, 28 Apr 2022 06:08:29 +0000

Isn’t this easier by using grid with grid areas maped for different media queries?

I’m just asking.

By: JamCow

JamCow — Wed, 27 Apr 2022 16:39:27 +0000

Echoing others here, use intrinsic CSS sizes and container queries: Use cq-prolyfill to gain container queries for all CSS properties: height, colour, text alignment, etc, not just container width. And can work with data attributes if you don't want to use a pre-processor. [https://ausi.github.io/cq-prolyfill/demo/] Use latest polyfill for newer browsers CSS-Tricks: container query polyfill that just works CQfill was mentioned in CSS-Tricks article, but I found CQ-prolyfill was a much better solution, and works for all old browsers (IE9+, Safari7+).

By: Michael H

Michael H — Wed, 27 Apr 2022 16:06:05 +0000

Was hoping for more here when I heard “in a Design System”. Design System to me is more expansive than just the vue/react/angular implementation. That’s just a slice of the system. A pattern is not a design system.

At the same time even as a pattern it’s not clear to me what specific advantages switching back to using JS from CSS is for these things, aside from maybe some small reduction of CSS output that would likely be negated when the output is gzipped.

By: Christian

Christian — Wed, 27 Apr 2022 12:23:48 +0000

I suggest, using ResizeObserver API for that–at least until fullsupport of ContainerQueries. Main benefit is, that you can listen to the direct parent container instead of window. :)

By: Jarbas

Jarbas — Wed, 27 Apr 2022 10:11:23 +0000

I need this in Angular2 please someone help me?

By: tomyo

tomyo — Wed, 27 Apr 2022 08:01:53 +0000

Another way of achieving something similar is to use css variables in the components to set the “displayMode”, and use media queries on the top level component to set those in descendants children…

By: Joe

Joe — Wed, 27 Apr 2022 07:37:06 +0000

Good article. I think this approach will make most sense to people who have dealt with large applications with hundreds of variants of the same component. Yes – on a smaller projects it may be easier to make use of media queries, but when components are reused over and over inside other components in different ways, this to me seems like good approach and turns a load of messy media queries into nice, clean and reusable code.

By: Jeremy Keith

Jeremy Keith — Wed, 27 Apr 2022 07:12:26 +0000

I don’t get it. Surely the JavaScript should be measuring the width of the containing element, not the width of the whole viewport?

If this were polyfilling container queries, it would make sense. But right now, it’s a polyfill for media queries …which we have already.

What am I missing?

By: Daisy Maclennan

Daisy Maclennan — Tue, 26 Apr 2022 16:55:41 +0000

I love this, I think the example in question isn’t the greatest. But I get the jist and can see this being extremely useful in cases where designers give you drastically different designs for each breakpoint and the props for each component all need to completely change. Or where the UI splits into pages/tabs on smaller screens.

Clean DRY CSS for the win :)

By: Bob

Bob — Tue, 26 Apr 2022 15:28:57 +0000

Modern CSS can help with most of these issues. Container queries are coming soon and until then we have a solid polyfill for them. Clamp() is also extremely useful. As are minmax(), :where(), :is(), and :has() (only in Safari atm but soon to be adopted by Chrome and Firefox. Personally I'd rather use these methods along with some smart/brief media queries if needed rather than adding more JavaScript (particularly for styles.)