I've written an in-depth article proposing a new approach to CSS in JS, aiming to address scalability issues and improve integration with design systems.
Key points:
1. Introduction of 'SCALE CSS' methodology, synthesizing existing approaches like ITCSS, BEM, and OOCSS.
2. Proposal of 'StyleStack', a new strategy combining design tokens, Atomic CSS, and variants.
3. Detailed explanation of the 'mincho' project implementing these concepts.
4. Analysis of CSS-friendly syntax in JavaScript and scalable CSS in JS approaches.
5. Exploration of integration with design tools like Figma and documentation systems.
The article covers the historical context of CSS and design, analyzes current style management methods, and proposes new implementation strategies for CSS in JS. It also discusses how these approaches can be integrated with modern design systems.
While it's a long read (about 40 minutes), I believe it offers valuable insights for developers dealing with CSS management in complex web applications, as well as those interested in the intersection of development and design.
I'm particularly interested in hearing thoughts from the HN community on the viability of this approach, potential pitfalls, and how it might be improved or extended.
Key points:
1. Introduction of 'SCALE CSS' methodology, synthesizing existing approaches like ITCSS, BEM, and OOCSS. 2. Proposal of 'StyleStack', a new strategy combining design tokens, Atomic CSS, and variants. 3. Detailed explanation of the 'mincho' project implementing these concepts. 4. Analysis of CSS-friendly syntax in JavaScript and scalable CSS in JS approaches. 5. Exploration of integration with design tools like Figma and documentation systems.
The article covers the historical context of CSS and design, analyzes current style management methods, and proposes new implementation strategies for CSS in JS. It also discusses how these approaches can be integrated with modern design systems.
While it's a long read (about 40 minutes), I believe it offers valuable insights for developers dealing with CSS management in complex web applications, as well as those interested in the intersection of development and design.
I'm particularly interested in hearing thoughts from the HN community on the viability of this approach, potential pitfalls, and how it might be improved or extended.
Project: https://github.com/mincho-js/mincho