Guest Instructor · CSS · SASS · BEM
CSS and SASS —
OpenClassrooms Student Webinar
Invited to lead a live student webinar for OpenClassrooms covering CSS architecture, SASS fundamentals, and the BEM naming convention — giving learners practical, real-world context for the concepts in their course.
The Webinar
Bridging course content and real-world practice
On September 23, 2020, I delivered a live student webinar for OpenClassrooms as part of their Produce Maintainable CSS with SASS course — a session designed to extend the course content with hands-on explanation, live demos, and direct student Q&A.
The session ran simultaneously for US learners (8:30AM PST) and European learners (17:30 CEST), reflecting OpenClassrooms' global student base.
My role was to provide the practitioner perspective — not just explaining what SASS features do, but demonstrating how working developers actually use them to write cleaner, more maintainable stylesheets on real projects.
The Content
What I covered
A structured walkthrough of CSS architecture and SASS features grounded in real-world development practice.
CSS Structure & the Cascade
Reviewed how stylesheets cascade from top to bottom, how specificity affects which rules win, and how to think about organizing CSS before introducing a preprocessor.
The 7-1 Pattern
Introduced the 7-1 architecture pattern for organizing SASS with partials — a widely-used approach for keeping large codebases manageable and scalable.
BEM Naming Convention
Taught Block, Element, Modifier naming with live code examples — showing how BEM creates readable, self-documenting class names that scale across a codebase.
Variables
Demonstrated how SASS variables eliminate magic numbers and hard-coded values — making stylesheets easier to update and maintain over time.
Nesting
Covered SASS nesting — the most widely-used SASS feature — showing how it groups related styles and establishes visual hierarchy that mirrors the HTML structure.
Mixins & Functions
Explained mixins as reusable property bundles and introduced SASS built-in functions for color manipulation, math, and generating consistent design values.
Live Demo
BEM in action
One of the session's core topics was placing SASS in context — explaining why CSS preprocessors exist, how SASS compares to Less and Stylus, and why SASS became the industry standard.
From there, I walked through BEM naming live in the editor — building out a real example with blocks, elements,
and modifiers so learners could see how abstract naming rules translate into actual class names like .proj-prev__heading and .proj-prev--mint.
Seeing the naming pattern applied to real code — rather than explained in the abstract — is what makes it click for most learners.
Webinar Recording
Watch the Session
Sample recording of the live CSS and SASS student webinar, September 23, 2020.
Reflection
Teaching SASS as a design decision, not just syntax
The most important thing I tried to convey in this session wasn't SASS syntax — it was the why behind it. Any learner can look up how to declare a variable. What's harder to convey is why consistent naming, modular file structure, and reusable patterns matter at the scale of a real project.
That's the gap live instruction fills. It's where a practitioner can say: here's a real codebase, here's the problem we had before BEM, and here's why the team adopted it.
Live student webinar delivered for OpenClassrooms, September 23, 2020.
2020
OpenClassrooms
Live Student Webinar
CSS & SASS · BEM · 7-1 Pattern
Global Audience — US & Europe
Keep Exploring
More OpenClassrooms webinars
Interested in working together?
I'm open to remote opportunities in instructional design and technical learning experience design.