Global stylesheet vs component level stylesheets? Which one do you currently use and why?
Discussion started by someone anonymous
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!
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
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 😉
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.
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
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).