Organizing Your CSS: Prep

This session will cover common strategies to implement design systems and organizational conventions in CSS code, with a look forward to component-based development.

Learning outcomes

By the end of this session, you will be able to:

• Create a CSS organization strategy based on design needs
• Discuss the pros and cons of common CSS authoring conventions like BEM and ITCSS
• Avoid unnecessary repetition of CSS code through the use of variables and settings
• Organize CSS code into multiple files
• Work with the cascade to make a CSS codebase more maintainable and usable over time

Pre-sessional activities

Priority

Dave Gray, CSS Custom Variables & Dark Mode, YouTube, 28m 14s, 14 Jun 2022.

Dave Gray, “How to Organize CSS | Beginners BEM Tutorial, YouTube, 20m 32s, 5 Jul 2022.

Lubos Kmetko, “ITCSS: Scalable and Maintainable CSS Architecture,” xfive, Nov 2021.

Maxim Shirsin, “BEM methodology for small projects,” Smashing Magazine, 17 Jul 2014.

Andy Bell, “A (more) modern CSS reset, Piccalilli, Set Studio, 18 Sept 2023.

Also recommended

“Using CSS custom properties,” MDN Web Docs, last modified 21 Nov 2024,

“Functions,” Learn CSS, Google web.dev, 4 April 2021.

“@import,” MDN Web Docs, modified 13 Nov 2024.

Browse the outline of Learn CSS at from Google’s web.dev website to identify CSS concepts and patterns that you are still unsure about.