binyamin
commented
2 years ago This sounds like a wise idea. I've been using CUBE CSS recently, but I don't know how OOCSS works.
Here's a rough system. Open to changes.
- Abstract the colors, font families, font sizes and spacing. Maybe put them in a JSON data file, and use nunjucks to create CSS custom properties for them.
- Combine similar sets of selectors into reusable classes. According to CSS Stats, a third of the CSS declarations are written more then once.
- Experiment with replacing some of the media queries with "intrinsic layouts". In other words, layouts which adapt to the content, rather than to hard-coded breakpoints. Think gridless design, or "Flexible Layouts" from Andy Bell's https://buildexcellentwebsit.es/.
@zachleat Do you have a preference as to tooling? PostCSS could prove useful, since it would allow for advanced optimizations.
@zachleat,
Picking up the conversation from #407 with @Ryuno-Ki about refactoring the CSS for performance and long-term maintenance. I have no idea if and/or how you might like to move forward with a project of this scale, but Pandora’s Box is now ajar if you’d like to finish opening it.
If you’re open to suggestions, I would recommend adopting an OOCSS pattern in the templates and CSS, at least for the inline critical assets. I think it would drastically shrink the number of style rules (right now ~232 inline and and other 100ish async). I follow a pattern like this on my site.