Nested Components in a Design System

Building reusable and responsive front-end components, especially those with nested structures, presents significant challenges. This article explores a solution that avoids the pitfalls of excessive media queries and duplicated styling.

Consider a simple call-to-action (CTA) component. On smaller screens, we want a compact layout: [Illustrative image of compact CTA would go here]. Simple media queries can achieve this, but problems arise with nested components. For instance, if the button within the CTA already has full-width capabilities, applying a media query to the parent duplicates styling.

This issue escalates with more complex nesting, leading to substantial code duplication and maintenance headaches. Changes to full-width button styling would require updates in multiple places. A more elegant solution is needed. While container queries offer potential, they don't fully address the need for dynamically adjusting various component props based on screen size.

This article proposes a different approach: leveraging component props and JavaScript to control responsive styling.

Tracking Window Width

We begin by tracking the window width and defining breakpoints. This example uses a Vue composable:

// composables/useBreakpoints.js
import { readonly, ref } from "vue";

const bps = ref({ xs: 0, sm: 1, md: 2, lg: 3, xl: 4 });
const currentBreakpoint = ref(bps.xl);

export default () => {
  const updateBreakpoint = () => {
    const windowWidth = window.innerWidth;
    // ... (Breakpoint logic as in original article) ...
  };

  return { currentBreakpoint: readonly(currentBreakpoint), bps: readonly(bps), updateBreakpoint };
};

This composable is used in App.vue to listen for resize events:

// App.vue
import useBreakpoints from "@/composables/useBreakpoints";
import { onMounted, onUnmounted } from 'vue';

export default {
  // ...
  setup() {
    const { updateBreakpoint } = useBreakpoints();

    onMounted(() => {
      updateBreakpoint();
      window.addEventListener('resize', updateBreakpoint);
    });

    onUnmounted(() => {
      window.removeEventListener('resize', updateBreakpoint);
    });
  }
};

(Note: Debouncing would improve performance in a production environment.)

Responsive Styling

The CTA component is modified to accept a displayMode prop:

// components/CTA.vue
<template>
  <div :class="`cta ${mode}`">
    <div class="cta-content">
      <h5 id="title">title</h5>
      <p>description</p>
    </div>
    <btn :block="mode === 'compact'">Continue</btn>
  </div>
</template>

<script>
import Btn from "@/components/ui/Btn";
import { useResponsive, withResponsiveProps } from "@/composables/useResponsive";

export default {
  name: "CTA",
  components: { Btn },
  props: withResponsiveProps(['default', 'compact'], {}),
  setup(props) {
    const { mode } = useResponsive(props);
    return { mode };
  }
};
</script>

<style scoped>
.cta {
  display: flex;
  align-items: center;
  &.compact {
    flex-direction: column;
    .cta-content {
      margin-right: 0;
      margin-bottom: 2rem;
    }
  }
}
</style>

The mode is determined based on the currentBreakpoint:

<cta :display-mode="currentBreakpoint.value > bps.md ? 'default' : 'compact'"></cta>

This eliminates the need for media queries within the component.

Advanced Functionality and Reusability

The approach extends to more complex scenarios, such as reverting to a previous breakpoint or using different modes across pages. The customMode prop allows for per-breakpoint mode specification:

<cta :custom-mode="['compact', 'default', 'compact']"></cta>

Furthermore, the code can be significantly improved by extracting reusable composables for managing responsive behavior and props validation. The useResponsive and withResponsiveProps composables demonstrate this.

Conclusion

This method offers a more robust and maintainable solution for building responsive component systems. By leveraging JavaScript and CSS classes, it minimizes code duplication, enhances consistency, and provides greater flexibility for handling complex responsive layouts and nested components.

The above is the detailed content of Nested Components in a Design System. For more information, please follow other related articles on the PHP Chinese website!