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?

Learn Something New Everyday,
Connect With The Best Developers!

Sign Up Now!

& 500k+ others use Hashnode actively.

Tommy Hodgins's photo

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.

Marco Alka's photo

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 😉

Petar Borovcanin's photo

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.
Ben Buchanan (200ok)'s photo

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

Anthony's photo

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

Vijay Thirugnanam's photo

Professional Freelance Developer (React | React Native | Node | Firebase)

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).

Want to read more?

Browse featured discussions

© 2020 · Hashnode