Global stylesheet vs component level stylesheets? Which one do you currently use and why?

I am planning to switch to component level stylesheets. Have you done it already? What are your findings? What are the advantages and disadvantages?

Write your answer…

5 answers

In the past

I used to think about CSS stylesheets as stylesheets that might contain the styles for an entire website, including every layout, every 'component', and all of the base styles like what color a link is or the font used for the text.

In the present

For the past ~10 years, responsive web design has become important and the nature of what gets put inside a CSS stylesheet has changed. I think it makes a lot of sense to split apart the structural page layout styles from the styles for the individual components that go into them - especially if the components use element queries for their breakpoints. By having all of one component's styles (including responsive breakpoints) grouped together in a way that can be copy/paste into other websites we can make the parts and pieces of our layout very modular and portable, while keeping our layouts simple to work with as well.

In the future

As websites get larger and more dynamic, the CSS stylesheets you have will get less and less important, and being able to generate the CSS you need to style the elements you have at any given moment will become more important. In the future we may only need 1 CSS stylesheet containing just enough styles to get you to "first paint" and displaying the website, and from there JavaScript may be used to template and generate the CSS you need. This also reduces the total overall CSS that has to be parsed and exist in CSSOM at any given time as well. In this situation, though we're still outputting CSS to actually get the styles onto the elements, because we're using JavaScript to help us that means how and where we express those styles doesn't necessarily need to look like a CSS stylesheet, it can be any way we chose to express those design intentions and styling.

Reply to this…

Share your programming knowledge and learn from the best developers on Hashnode

Get started

Imho, both types are useful for different situations. Lately, I am working a lot with Custom Components, and I'd say it's the same for any other component type (Angular, React, etc.). I am in the process of converting them from a centralized CSS style sheet to component-level files, which can pull-in certain global definitions via SCSS mixins. Having the style close to the component code is a boon, because I don't have to search around as much anymore. Also, it opens up whole new features, like only pulling in the component style and wrapping it in a Shadow DOM. Since I use a bundler anyway, there is no real overhead for the build pipeline.

A global stylesheet is very useful for the general site structure, CSS resets and anything which you don't want to put into a component, so I definitely keep that 😉

Reply to this…

I am speaking from React.js perspective. Component level, absolute.

  • Global is hard maintaining. It always grows up. There is no way for testing and easy visual documenting (at least I have not found yet)
  • A component should be an independent unit. Then you can reuse it, document it and test it.

Reply to this…

Both, really. Global for stuff like typography and CSS vars; component for stuff that's scoped to a specific component.

Reply to this…

Generally both approaches.

Global styling goes as a global stylesheet and that will include resets, general typography, variables etc

The rest would be done on a component level

I am still using the global stylesheet. But using some convention. The folder structure in my SASS folder mirrors the folder structure of React components. For now, I am not moving to component level style sheets. CSS modules, especially, adds unnecessary hashes into the class names. Also, I find it irritating to mix both JS and CSS together. No matter how you modularise, there is no escaping the reality that both are different. I have separate bundles for JS and CSS. I don't have SSR or dynamic imports. So whatever I am doing (global styles) makes sense in my project. Right now, I am a solo UI developer. When we have more team members, we may want to move to CSS modules (if the second team member is not comfortable with global styles).

Reply to this…