Designer Jonathan Snook of Shopify provides an overview of the topics in this series about a scalable and modular architecture for CSS (SMACSS).

Jonathan Snook discusses why you should categorize the various functions of the CSS code within your project (base, layout, module, state, and theme) as well as how each element works within the design.

Jonathan Snook highlights the importance of using a naming convention in all your projects to help clarify the intent of the CSS code.

To show the benefits of modularizing a large project to make it easier to test, prototype, or share among multiple designers, Jonathan Snook looks at managing smaller, more discrete pieces of a project and bundling them together for a more efficient build process.

Jonathan Snook examines how to improve your own productivity by using JavaScript to describe the state that a module exists in within your project, and using CSS to manage that state.

Follow along as Jonathan Snook describes how to implement state changes on a CSS project without the need for JavaScript by using pseudo-classes.

Jonathan Snook covers the concept of "depth of applicability," explaining the benefit of limiting the impact that the CSS has on the HTML in a project, and demonstrating how multiple selectors within the code can result in the HTML being too challenging to change or port.