Page 136 - CSS

Chapter 17: CSS design patterns

Introduction

These examples are for documenting CSS-specific design patterns like BEM, OOCSS and
SMACSS.

These examples are NOT for documenting CSS frameworks like Bootstrap or Foundation.

Remarks

These examples are for documenting CSS-specific methodologies / design patterns.

These methodologies include but are not exclusive to the following:

• BEM
• OOCSS
• SMACSS

These examples are NOT for documenting CSS frameworks like Bootstrap or Foundation. While
you may include examples of how to apply one or more CSS methodology / design pattern with a
CSS framework, those examples are to focus on the methodologies / design patterns with that
particular framework and on the use of the framework itself.

Examples

BEM

BEM stands for Blocks, Elements and Modifiers. It's a methodology initially conceived by Russian
tech company Yandex, but which gained quite some traction among American & Western-
European web developers as well.

As the same implies, BEM metholology is all about componentization of your HTML and CSS code
into three types of components:

• Blocks: standalone entities that are meaningful on their own

Examples are header, container, menu, checkbox & textbox

• Elements: Part of blocks that have no standalone meaning and are semantically tied to their
blocks.

Examples are menu item, list item, checkbox caption & header title

• Modifiers: Flags on a block or element, used to change appearance or behavior

https://riptutorial.com/ 114