A module is a small, reusable unit of page structure and styling. A navigation menu, notification, card, or dialog can each be a module. Its styles belong together and should work wherever the module appears—not only in one sidebar or page layout. This keeps a change to one part of the interface from unexpectedly changing another. section 8.2.5 section 9.1
Give each module a unique class on its outer element. A selector such as `.message` can style a notification anywhere; `#sidebar .message` makes it dependent on the sidebar. Keep selectors and child elements within the module’s responsibility rather than reaching into another module. Reusing the same module also avoids near-duplicate styles that gradually drift apart. section 9.1.2 section 9.5
Listing 9.3 Implementing the message module
@layer modules {
.message { #1
padding: 0.8em 1.2em;
border-radius: 0.2em;
border: 1px solid #265559;
color: #265559;
background-color: #e0f0f2;
}
}
The `.message` rule gives one reusable notification its spacing, border, and colors without specifying where it must appear. section 9.1.2
Keep modules focused as an interface grows:
- Give each module one clear responsibility. If a description combines distinct jobs, consider splitting it; the rule is a prompt to think, not an absolute test. section 9.2
- Compose larger interfaces from smaller modules. A dropdown controls whether its drawer is visible; a menu inside that drawer styles the stacked links. section 9.2.1
- Choose names for what a module represents, not a particular use or color. A name such as `media` can still fit when its image-and-text layout is reused or redesigned. section 9.2.2
Listing 9.11 Constructing a dropdown menu from two modules
<div class="dropdown">
<button class="dropdown__toggle">Main Menu</button> #1
<div class="dropdown__drawer"> #2
<ul class="menu"> #3
<li><a href="/">Home</a></li>
<li><a href="/coffees">Coffees</a></li>
<li><a href="/brewers">Brewers</a></li>
<li><a href="/specials">Specials</a></li>
<li><a href="/about">About us</a></li>
</ul>
</div>
</div>
<script type="module">
var toggle = document.querySelector('.dropdown__toggle');
toggle.addEventListener('click', function (event) { #4
event.preventDefault();
var dropdown = event.target.parentNode;
dropdown.classList.toggle('is-open');
}
);
</script>
The markup places a menu module inside a dropdown module; separate classes identify the dropdown’s toggle and drawer. section 9.2.1
A modules cascade layer can hold most component colors, spacing, and typography. Naming conventions such as double underscores for subelements and double hyphens for variants make their roles easier to recognize. `@scope` can restrict styles to an intended portion of the page, though its browser support needs checking. section 8.2.5 section 9.5
For a responsive module, consider the space its container actually provides. A viewport-based media query can switch an image-and-text module to a side-by-side layout even when it sits in a sidebar too narrow for that layout. Define containers predictably so nested modules can use container queries; making a content-holding element a container avoids adding a wrapper solely for that purpose. section 10.1 section 10.2.3
On larger projects, keep a pattern library: a separate inventory showing each module’s required markup and appearance. When assembling a page, reuse what is already there; if something is missing, develop and document the new module or variant in isolation before adding it to the page. section 9.4 section 9.4.1
