Thinking modularly in CSS allows us to create more reusable CSS.
- List group: vertical & horizontal
- Buttons: small, medium, large, alternative, buttons + modular typography
- Icons: different sizes, stacked, inline, image replacement
- Media object: flexible image size, embeddable, with list group, stacked, reversed
- Embed containers: for flexible images and videos, with specific aspect ratios—to prevent layout reflow after the image loads
The common.css file used in the examples and videos could be replaced by your modular typography typography.css file for better results.
Videos
- Modules: list group
- Modules: buttons
- Modules: making modular icons
- Modules: combining the icons and the list group
- Modules: icon image replacement
- Modules: media object
- Modules: combining the media object and the list group
- Modules: media object alternatives
- Modules: embed containers
- Modules: embedding videos responsively
- Modules: embed containers with figures
- Modules: combining buttons with modular typography
There are a couple major naming conventions for modular CSS that help clarify the intent of our classes and help us visualize the HTML by ust looking at the CSS classes.
Part of what we learned today comes directly from SMACSS: the icon naming conventions.
BEM takes naming a little further by using double underscores or double hyphens to represent certain ideas.
<div class="media media--highlighted">
<div class="media__img"></div>
<div class="media__body"></div>
</div>- Name your component with a descriptive phrase, e.g.
media - Any classes that modify an original, base class, are separated with hyphens, e.g.
media--highlighted - Any classes that represent pieces that are inside of the original class, or sub-components, are separated with underscores, e.g.
media__body
I find it helpful to remember that when using underscores the element is under the original component.
Videos