QR Code Component using CUBE CSS, Every Layout & BEM

What are you most proud of, and what would you do differently next time?

I’m most proud of building this project using a scalable CSS architecture based on CUBE CSS, Every Layout, and BEM principles.

Instead of writing isolated styles, I focused on creating reusable layout patterns, design tokens, and well-structured components. This helped me keep the codebase clean, maintainable, and easy to extend.

I’m also proud of improving accessibility and performance by addressing Lighthouse warnings and optimizing font and stylesheet loading.

Next time, I would start performance and accessibility testing earlier in the process, rather than optimizing them near the end. I would also explore automating CSS bundling to remove render-blocking resources in a more efficient way.

What challenges did you encounter, and how did you overcome them?

One of the main challenges I faced was debugging CSS issues related to class naming, cascade, and file organization while working with a modular architecture.

At one point, some component styles were not being applied because of small inconsistencies in class names between the HTML and CSS files. I solved this by using browser DevTools more systematically and checking selector matching and file loading.

Another challenge was optimizing performance and accessibility based on Lighthouse feedback, especially related to render-blocking resources and link visibility. I addressed this by reorganizing my stylesheets, improving font loading, and updating link styles to meet WCAG guidelines.

Overall, these challenges helped me improve my debugging workflow and better understand how CSS architecture, cascade, and performance optimization work together in real projects.

What specific areas of your project would you like help with?

I’d appreciate feedback on my CSS architecture and overall project structure, especially regarding my use of CUBE CSS, Every Layout patterns, and BEM.

I’m also interested in suggestions for improving performance optimization, particularly around stylesheet bundling and font loading strategies.

Additionally, I’d welcome any advice on further improving accessibility, including keyboard navigation, focus management, and color contrast.

Any general feedback on code readability and maintainability would also be very helpful.