Personal opinion - it's easy to go crazy overarchitecting CSS. If it's under a couple thousand lines, just basic SCSS with nested selectors broken down by module, I think is more than enough.
Over 5k–10k lines is where I start to see the ROI of adopting a more formal CSS methodology (or refactor and embrace meta tools like variables and vendor prefix polyfill generators more). In my opinion too many sites out there today are the FizzBuzzEnterpriseEdition of CSS from going overkill with patterns premature to their scale. You know what they say about premature optimization…
As someone who started in CSS 10–12 years ago before tools like it existed, at first I was really turned off by React's approach to "inline styles". I think they're labeling them something different now to avoid conflation with inline CSS and its various pros and cons. Even the React approach has grown on me more over time though. You get pretty nice isolation which is really the most important part of scaling CSS anyway. In this sense, React components basically became what everyone wanted web components to be. And with components, we can solve a much smaller problem in CSS architecture.
Personal opinion - it's easy to go crazy overarchitecting CSS. If it's under a couple thousand lines, just basic SCSS with nested selectors broken down by module, I think is more than enough.
Over 5k–10k lines is where I start to see the ROI of adopting a more formal CSS methodology (or refactor and embrace meta tools like variables and vendor prefix polyfill generators more). In my opinion too many sites out there today are the FizzBuzzEnterpriseEdition of CSS from going overkill with patterns premature to their scale. You know what they say about premature optimization…
As someone who started in CSS 10–12 years ago before tools like it existed, at first I was really turned off by React's approach to "inline styles". I think they're labeling them something different now to avoid conflation with inline CSS and its various pros and cons. Even the React approach has grown on me more over time though. You get pretty nice isolation which is really the most important part of scaling CSS anyway. In this sense, React components basically became what everyone wanted web components to be. And with components, we can solve a much smaller problem in CSS architecture.
Yes, this was the general reason for not going nuts with CSS rules early on, but I feel like it's worth creating some rules or exploring options.
Can you define more specifically what you mean by "nested selectors broken down by module"?