Organizing Design System Component Patterns With CSS Cascade Layers - Related to component, handwriting, organizing, scroll, cascade

Handwriting an SVG Heart, With Our Hearts

, it’s the Valentine’s Day season again, and what advanced way to express our love than with the symbol of love: a heart. A while back on CSS-Tricks, we shared several ways to draw hearts, and the response was dreamy. Check out all these amazing, heart-filled submissions in this collection on CodePen:

Temani Afif’s CSS Shapes site offers a super modern heart using only CSS:

Now, to show my love, I wanted to do something personal, something crafty, something with a mild amount of effort.

Handwriting a love note is a classic romantic gesture, but have you considered handwriting an SVG? We won’t need some fancy vector drawing tool to express our love. Instead, we can open a blank HTML document and add an tag:

We’ll need a way to see what we are doing inside the “SVG realm” (as I like to call it), which is what the viewBox attribute provides. The 2D plane upon which vector graphics render is as infinite as our love, quite literally, complete with an x- and y-axis and all (like from math class).

We’ll set the start coordinates as 0 0 and end coordinates as 10 10 to make a handsome, square viewBox . Oh, and by the way, we don’t concern ourselves over pixels, rem values, or any other unit types; this is vector graphics, and we play by our own rules.

We add in these coordinates to the viewBox as a string of values:

Now we can begin drawing our heart, with our heart. Let’s make a line. To do that, we’ll need to know a lot more about coordinates, and where to stick ’em. We’re able to draw a line with many points using the element, which defines paths using the d attribute. SVG path commands are difficult to memorize, but the effort means you care. The path commands are:

, , , , , Cubic Bézier curve: C , c , S , s.

, , , Quadratic Bézier Curve: Q , q , T , t.

We’re only interested in drawing line segments for now, so together we’ll explore the first two: MoveTo and LineTo . MDN romantically describes MoveTo as picking up a drawing instrument, such as a pen or pencil: we aren’t yet drawing anything, just moving our pen to the point where we want to begin our confession of love.

We’ll MoveTo (M) the coordinates of (2,2) represented in the d attribute as M2,2 :

Not surprising then to find that LineTo is akin to putting pen to paper and drawing from one point to another. Let’s draw the first segment of our heart by drawing a LineTo (L) with coordinates (4,4) , represented as L2,2 next in the d attribute:

We’ll add a final line segment as another LineTo L with coordinates (6,2) , again appended to the d attribute as L6,2 :

If you stop to preview what we’ve accomplished so far, you may be confused as it renders an upside-down triangle; that’s not quite a heart yet, Let’s fix that.

SVG shapes apply a fill by default, which we can remove with fill="none" :

Rather than filling in the shape, instead, let’s display our line path by adding a stroke , adding color to our heart.

Next, add some weight to the stroke by increasing the stroke-width :

Finally, apply a stroke-linecap of round (sorry, no time for butt jokes) to round off the start and end points of our line path, giving us that classic symbol of love:

Perfection. Now all that’s left to do is send it to that special someone.

The first release of the year is packed with attributes to make your knowledge-sharing community enhanced.

As we step into 2025, we’re kicking things off......

The Perceptron Algorithm is one of the earliest and most influential machine learning models, forming the foundation for modern neural networks and su......

The latest release of the Go language, Go [website], introduces several critical aspects, including generic type aliases, weak pointers, improved cleanup......

Scroll Driven Animations Notebook

Adam’s such a mad scientist with CSS. He’s been putting together a series of “notebooks” that make it easy for him to demo code. He’s got one for gradient text, one for a comparison slider, another for accordions, and the list goes on.

One of his latest is a notebook of scroll-driven animations. They’re all impressive as heck, as you’d expect from Adam. But it’s the simplicity of the first few examples that I love most. Here I am recreating two of the effects in a CodePen, which you’ll want to view in the latest version of Chrome for support.

This is a perfect example of how a scroll-driven animation is simply a normal CSS animation, just tied to scrolling instead of the document’s default timeline, which starts on render. We’re talking about the same set of keyframes:

@keyframes slide-in-from-left { from { transform: translateX(-100%); } }.

All we have to do to trigger scrolling is call the animation and assign it to the timeline:

li { animation: var(--animation) linear both; animation-timeline: view(); }.

Notice how there’s no duration set on the animation. There’s no need to since we’re dealing with a scroll-based timeline instead of the document’s timeline. We’re using the view() function instead of the scroll() function, which acts sort of like JavsScript’s Intersection Observer where scrolling is based on where the element comes into view and intersects the scrollable area.

It’s easy to drop your jaw and ooo and ahh all over Adam’s demos, especially as they get more advanced. But just remember that we’re still working with plain ol’ CSS animations. The difference is the timeline they’re on.

This week we did a revision of the previous class, talking about why web and cloud, HTML, CSS, JavaScript and so on… You can go through the previous c......

Ben and Ryan chat with Babak Behzad, senior engineering manager at Verkada, about running a pipeline that vectorizes 25,000 images per second into a c......

User interface (UI) design has evolved significantly over the years, focusing on efficiency, accessibility, and user experience. One emerging principl......

Organizing Design System Component Patterns With CSS Cascade Layers

I’m trying to come up with ways to make components more customizable, more efficient, and easier to use and understand, and I want to describe a pattern I’ve been leaning into using CSS Cascade Layers.

I enjoy organizing code and find cascade layers a fantastic way to organize code explicitly as the cascade looks at it. The neat part is, that as much as it helps with “top-level” organization, cascade layers can be nested, which allows us to author more precise styles based on the cascade.

The only downside here is your imagination, nothing stops us from over-engineering CSS. And to be clear, you may very well consider what I’m about to show you as a form of over-engineering. I think I’ve found a balance though, keeping things simple yet organized, and I’d like to share my findings.

Let’s explore a pattern for writing components in CSS using a button as an example. Buttons are one of the more popular components found in just about every component library. There’s good reason for that popularity because buttons can be used for a variety of use cases, including:

performing actions, like opening a drawer,.

navigating to different sections of the UI, and.

holding some form of state, such as focus or hover .

And buttons come in several different flavors of markup, like , input[type="button"] , and . There are even more ways to make buttons than that, if you can believe it.

On top of that, different buttons perform different functions and are often styled accordingly so that a button for one type of action is distinguished from another. Buttons also respond to state changes, such as when they are hovered, active, and focused. If you have ever written CSS with the BEM syntax, we can sort of think along those lines within the context of cascade layers.

.button {} .button-primary {} .button-secondary {} .button-warning {} /* etc. */.

Okay, now, let’s write some code. Specifically, let’s create a few different types of buttons. We’ll start with a .button class that we can set on any element that we want to be styled as, well, a button! We already know that buttons come in different flavors of markup, so a generic .button class is the most reusable and extensible way to select one or all of them.

.button { /* Styles common to all buttons */ }.

This is where we can insert our very first cascade layer! Remember, the reason we want a cascade layer in the first place is that it allows us to set the CSS Cascade’s reading order when evaluating our styles. We can tell CSS to evaluate one layer first, followed by another layer, then another — all . This is an incredible feature that grants us superpower control over which styles “win” when applied by the browser.

We’ll call this layer components because, well, buttons are a type of component. What I like about this naming is that it is generic enough to support other components in the future as we decide to expand our design system. It scales with us while maintaining a nice separation of concerns with other styles we write down the road that maybe aren’t specific to components.

/* Components top-level layer */ @layer components { .button { /* Styles common to all buttons */ } }.

Here is where things get a little weird. Did you know you can nest cascade layers inside classes? That’s totally a thing. So, check this out, we can introduce a new layer inside the .button class that’s already inside its own layer. Here’s what I mean:

/* Components top-level layer */ @layer components { .button { /* Component elements layer */ @layer elements { /* Styles */ } } }.

This is how the browser interprets that layer within a layer at the end of the day:

@layer components { @layer elements { .button { /* button styles... */ } } }.

This isn’t a post just on nesting styles, so I’ll just say that your mileage may vary when you do it. Check out Andy Bell’s recent article about using caution with nested styles.

So far, we’ve established a .button class inside of a cascade layer that’s designed to hold any type of component in our design system. Inside that .button is another cascade layer, this one for selecting the different types of buttons we might encounter in the markup. We talked earlier about buttons being , , or and this is how we can individually select style each type.

We can use the :is() pseudo-selector function as that is akin to saying, “If this .button is an element, then apply these styles.”.

/* Components top-level layer */ @layer components { .button { /* Component elements layer */ @layer elements { /* styles common to all buttons */ &:is(a) { /* specific styles */ } &:is(button) { /* specific styles */ } /* etc. */ } } }.

I’m going to fill in our code with the common styles that apply to all buttons. These styles sit at the top of the elements layer so that they are applied to any and all buttons, regardless of the markup. Consider them default button styles, so to speak.

/* Components top-level layer */ @layer components { .button { /* Component elements layer */ @layer elements { background-color: darkslateblue; border: 0; color: white; cursor: pointer; display: grid; font-size: 1rem; font-family: inherit; line-height: 1; margin: 0; padding-block: [website]; padding-inline: 1rem; place-content: center; width: fit-content; } } }.

I’m going to create a new cascade sub-layer directly under the elements sub-layer called, creatively, states :

/* Components top-level layer */ @layer components { .button { /* Component elements layer */ @layer elements { /* Styles common to all buttons */ } /* Component states layer */ @layer states { /* Styles for specific button states */ } } }.

Pause and reflect here. What states should we target? What do we want to change for each of these states?

Some states may share similar property changes, such as :hover and :focus having the same background color. Luckily, CSS gives us the tools we need to tackle such problems, using the :where() function to group property changes based on the state. Why :where() instead of :is() ? :where() comes with zero specificity, meaning it’s a lot easier to override than :is() , which takes the specificity of the element with the highest specificity score in its arguments. Maintaining low specificity is a virtue when it comes to writing scalable, maintainable CSS.

/* Component states layer */ @layer states { &:where(:hover, :focus-visible) { /* button hover and focus state styles */ } }.

But how do we modification the button’s styles in a meaningful way? What I mean by that is how do we make sure that the button looks like it’s hovered or in focus? We could just slap a new background color on it, but ideally, the color should be related to the background-color set in the elements layer.

So, let’s refactor things a bit. Earlier, I set the .button element’s background-color to darkslateblue . I want to reuse that color, so it behooves us to make that into a CSS variable so we can enhancement it once and have it apply everywhere. Relying on variables is yet another virtue of writing scalable and maintainable CSS.

I’ll create a new variable called --button-background-color that is initially set to darkslateblue and then set it on the default button styles:

/* Component elements layer */ @layer elements { --button-background-color: darkslateblue; background-color: var(--button-background-color); border: 0; color: white; cursor: pointer; display: grid; font-size: 1rem; font-family: inherit; line-height: 1; margin: 0; padding-block: [website]; padding-inline: 1rem; place-content: center; width: fit-content; }.

Now that we have a color stored in a variable, we can set that same variable on the button’s hovered and focused states in our other layer, using the relatively new color-mix() function to convert darkslateblue to a lighter color when the button is hovered or in focus.

Back to our states layer! We’ll first mix the color in a new CSS variable called --state-background-color :

/* Component states layer */ @layer states { &:where(:hover, :focus-visible) { /* custom property only used in state */ --state-background-color: color-mix( in srgb, var(--button-background-color), white 10% ); } }.

We can then apply that color as the background color by updating the background-color property.

/* Component states layer */ @layer states { &:where(:hover, :focus-visible) { /* custom property only used in state */ --state-background-color: color-mix( in srgb, var(--button-background-color), white 10% ); /* applying the state background-color */ background-color: var(--state-background-color); } }.

If we think about the order of the cascade — always flowing from top to bottom — we don’t want the modified styles to affect the styles in the states layer we just made. So, let’s add a new modifiers layer in between elements and states :

/* Components top-level layer */ @layer components { .button { /* Component elements layer */ @layer elements { /* etc. */ } /* Component modifiers layer */ @layer modifiers { /* new layer! */ } /* Component states layer */ @layer states { /* etc. */ } }.

Similar to how we handled states , we can now modification the --button-background-color variable for each button modifier. We could modify the styles further, of course, but we’re keeping things fairly straightforward to demonstrate how this system works.

We’ll create a new class that modifies the background-color of the default button from darkslateblue to darkgreen . Again, we can rely on the :is() selector because we want the added specificity in this case. That way, we override the default button style with the modifier class. We’ll call this class .success (green is a “successful” color) and feed it to :is() :

/* Component modifiers layer */ @layer modifiers { &:is(.success) { --button-background-color: darkgreen; } }.

If we add the .success class to one of our buttons, it becomes darkgreen instead darkslateblue which is exactly what we want. And since we already do some color-mix() -ing in the states layer, we’ll automatically inherit those hover and focus styles, meaning darkgreen is lightened in those states.

/* Components top-level layer */ @layer components { .button { /* Component elements layer */ @layer elements { --button-background-color: darkslateblue; background-color: var(--button-background-color); /* etc. */ /* Component modifiers layer */ @layer modifiers { &:is(.success) { --button-background-color: darkgreen; } } /* Component states layer */ @layer states { &:where(:hover, :focus) { --state-background-color: color-mix( in srgb, var(--button-background-color), white 10% ); background-color: var(--state-background-color); } } } }.

We can refactor any CSS property we need to modify into a CSS custom property, which gives us a lot of room for customization.

/* Components top-level layer */ @layer components { .button { /* Component elements layer */ @layer elements { --button-background-color: darkslateblue; --button-border-width: 1px; --button-border-style: solid; --button-border-color: transparent; --button-border-radius: [website]; --button-text-color: white; --button-padding-inline: 1rem; --button-padding-block: [website]; background-color: var(--button-background-color); border: var(--button-border-width) var(--button-border-style) var(--button-border-color); border-radius: var(--button-border-radius); color: var(--button-text-color); cursor: pointer; display: grid; font-size: 1rem; font-family: inherit; line-height: 1; margin: 0; padding-block: var(--button-padding-block); padding-inline: var(--button-padding-inline); place-content: center; width: fit-content; } /* Component modifiers layer */ @layer modifiers { &:is(.success) { --button-background-color: darkgreen; } &:is(.ghost) { --button-background-color: transparent; --button-text-color: black; --button-border-color: darkslategray; --button-border-width: 3px; } } /* Component states layer */ @layer states { &:where(:hover, :focus) { --state-background-color: color-mix( in srgb, var(--button-background-color), white 10% ); background-color: var(--state-background-color); } } } }.

[website] Look closer at that demo and check out how I’m adjusting the button’s background using light-dark() — then go read Sara Joy’s “Come to the light-dark() Side” for a thorough rundown of how that works!

What do you think? Is this something you would use to organize your styles? I can see how creating a system of cascade layers could be overkill for a small project with few components. But even a little toe-dipping into things like we just did illustrates how much power we have when it comes to managing — and even taming — the CSS Cascade. Buttons are deceptively complex but we saw how few styles it takes to handle everything from the default styles to writing the styles for their states and modified versions.

Picture this: You’ve built an incredible piece of software that has the potential to revolutionize how businesses operate, but there’s a catch: Distri......

While everyone likes flowers and chocolates, why not show your love for your favorite open source projects this Valentine’s and give appreciation to t......

The first release of the year is packed with aspects to make your knowledge-sharing community more effective.

As we step into 2025, we’re kicking things off......