Some thoughts on components

I just came off of the launch of my first big project at work and as I’ve been implementing the designs for a new customer I’ve been thinking a lot about systems and how they function. Maybe I should say how I’d like them to function.

I’m currently working in a system where the components I’m building have to work for many different designs and sites. They need to work for a site that is talking about gaming, one that talks about tech, a news and policy site, and so on and so forth. And I’m on the team that’s bringing new customers on to the platform, this means that I’m in the weeds with these components making design updates and changes to ensure the accurate rendering of the designs.

On top of getting the designs implemented properly, I also strive to make things accessible for folks. This means that these components, which may be used in different ways by the various sites, also need to flex and flow into the document outline of the layouts in which they’re used. I know, it’s a lot, it’s a lot to ask of a component, but it’s what we’re asking of our components.

This has led me to think very differently about large scale systems of components. I think most components in a large system that has to function for multiple networks/designs/sites should be minimally styled, the absolute bare minimum they need. And in some cases they should be without style and allow for the markup to change if at all possible.

I can hear you in my head right now, you’re sitting there reading this and thinking, “but wait, how can it be a design system if things aren’t styled, where is the design part?” And to be honest, a few months ago I would’ve said the same thing if I read what I just wrote above.

But if that component is going to do its job well, it needs to be as flexible as possible. And in the case of a component that may be used for a local news site, or a site about real estate, or a site about national news, it’s fairly hard to make it flexible if it’s heavily styled right from the get go.

But then there’s also the question of if you aren’t doing that work, if the component isn’t styled, how does this make things more efficient for implementation? Here’s another thing I’m thinking about: maybe it’s the component’s job to pull in the right data in a structured format. That’s it. That’s the whole job. So when we talk about the component we’re talking about what data it’s pulling in and then we add on the layer of styles for each site.

We do a lot of our styling with theming and variables, so the base styles for many things are taken care of when we set the theme settings. But beyond the theme settings, we also do things to change parts of a component all on their own, through overriding styles for specific sites. It works, but it can be tedious, and right now we’re spending too much time overriding the styles that are set in the base component.

Building on this, I’m starting to believe that the base components can then be set up to work within the design portion of each site’s system. Since each site is unique, it’s pulling in the data from the platform and we’re free to style each component in the best way for that site. Instead of styling things based on the component, we’re styling them based on the context in which the component is used.

All of this thinking is a radical departure for me and how I think about systems. But I’ve never worked on a system this large and complex before. I can’t work on something that needs to scale in the way it does and not be willing to take things back down to basics, so that they can be built back up into a better functioning system. And I’m still struggling with this, I’m spending a lot of time thinking about what a component truly is, what’s its core? Where I land on that definition is going to shape how I think the system should be built.