27
inarocket.com Learn at rocket speed BEM CSS NAMING CONVENTION

Learn BEM: CSS Naming Convention

Embed Size (px)

Citation preview

Page 1: Learn BEM: CSS Naming Convention

inarocket.com

Learn at rocket speed

BEMCSS NAMING CONVENTION

Page 2: Learn BEM: CSS Naming Convention

Learn front-end development at rocket speed

inarocket.com

by miguelsanchez.com

Page 3: Learn BEM: CSS Naming Convention

in aROCKET

BEM FUNDAMENTALSUnderstanding BEM in just 2 minutes

Page 4: Learn BEM: CSS Naming Convention

LEARN BEM: Block - Element - Modifier

B E MIs a naming convention

for classes in HTML and CSS

Developed by the team at Yandex.

Block Element Modifier

Page 5: Learn BEM: CSS Naming Convention

LEARN BEM: Block - Element - Modifier

B E MBLOCK: Encapsulates a standalone entity that is meaningful on its own. While blocks can be nested and interact with each other, semantically they remain equal; there is no precedence or hierarchy.

Page 6: Learn BEM: CSS Naming Convention

LEARN BEM: Block - Element - Modifier

BLOCK

Page 7: Learn BEM: CSS Naming Convention

LEARN BEM: Block - Element - Modifier

B E MELEMENT: Parts of a block and have no standalone meaning. Any element is semantically tied to its block.

Page 8: Learn BEM: CSS Naming Convention

LEARN BEM: Block - Element - Modifier

BLOCK BLOCK

ELEMENT

ELEMENT

ELEMENT

ELEMENT

Page 9: Learn BEM: CSS Naming Convention

LEARN BEM: Block - Element - Modifier

B E MMODIFIER: Flags on blocks or elements. Use them to change appearance, behavior or state.

Page 10: Learn BEM: CSS Naming Convention

LEARN BEM: Block - Element - Modifier

BLOCK BLOCK

ELEMENT

ELEMENT

ELEMENT

ELEMENT

BLOCK + MODIFIER

ELEMENT

ELEMENT

ELEMENT

ELEMENT

Page 11: Learn BEM: CSS Naming Convention

LEARN BEM: Block - Element - Modifier

BLOCK BLOCK

ELEMENT

ELEMENT

ELEMENT

ELEMENT

BLOCK + MODIFIER

ELEMENT

ELEMENT

ELEMENT

ELEMENT

BLOCK

ELEMENT

ELEMENT

ELEMENT

ELEMENT + MODIFIER

Page 12: Learn BEM: CSS Naming Convention

in aROCKET

QUICK EXAMPLEHow it works with a real example

Page 13: Learn BEM: CSS Naming Convention

LEARN BEM: Block - Element - Modifier

$150 SUBSCRIBE NOW

Page 14: Learn BEM: CSS Naming Convention

LEARN BEM: Block - Element - Modifier

BLOCK: btn

Page 15: Learn BEM: CSS Naming Convention

LEARN BEM: Block - Element - Modifier

BLOCK: btn BLOCK: btn

$150 SUBSCRIBE NOW

ELEMENT: price ELEMENT: text

Page 16: Learn BEM: CSS Naming Convention

LEARN BEM: Block - Element - Modifier

BLOCK: btn BLOCK: btn

$150 SUBSCRIBE NOW

ELEMENT: price ELEMENT: text

BLOCK: btn + MODIFIER

$150 SUBSCRIBE NOW

Page 17: Learn BEM: CSS Naming Convention

LEARN BEM: Block - Element - Modifier

BLOCK: btn BLOCK: btn

$150 SUBSCRIBE NOW

ELEMENT: price ELEMENT: text

BLOCK: btn + MODIFIER

$150 SUBSCRIBE NOW

BLOCK: btn

$150 SUBSCRIBE NOW

ELEMENT + MODIFIER

Page 18: Learn BEM: CSS Naming Convention

in aROCKET

LET'S CODEBEM syntax you can start using right now

Page 19: Learn BEM: CSS Naming Convention

BEM SYNTAX

$150 SUBSCRIBE NOW

LEARN BEM: Block - Element - Modifier

.blockExamples: .btn or .login-form

.block__elementExamples: .btn__price or .btn__text

.block--modifier Examples: .btn--important

.block__element--modifierExamples: .btn__text--important

$150 SUBSCRIBE NOW

BLOCKS

ELEMENTS

MODIFIERS

Page 20: Learn BEM: CSS Naming Convention

LEARN BEM: Block - Element - Modifier

BLOCK: btnstyles.css

/* Block */.btn { styles here }

CSS

index.html

<a href="#" class="btn"></a>

HTML

Page 21: Learn BEM: CSS Naming Convention

LEARN BEM: Block - Element - Modifier

BLOCK: btn

$150 SUBSCRIBE NOW

ELEMENT: price ELEMENT: text

styles.css

/* Block */.btn { styles here }

/* Elements: depend upon the block */.btn__price { styles here }.btn__text { styles here }

CSS

index.html

<a href="#" class="btn"> <span class="btn__price">$150</span> <span class="btn__text">Subscribe now</span> </a>

HTML

Page 22: Learn BEM: CSS Naming Convention

LEARN BEM: Block - Element - Modifier

BLOCK: btn

$150 SUBSCRIBE NOW

styles.css

/* Block */.btn { styles here }

/* Elements: depend upon the block */.btn__price { styles here }.btn__text { styles here }

/* Modifier: change the style of the block */.btn--important { styles here }

CSS

index.html

<a href="#" class="btn btn--important"> <span class="btn__price">$150</span> <span class="btn__text">Subscribe now</span> </a>

HTML

Page 23: Learn BEM: CSS Naming Convention

LEARN BEM: Block - Element - Modifier

BLOCK: btn

$150 SUBSCRIBE NOW

styles.css

/* Block */.btn { styles here }

/* Elements: depend upon the block */.btn__price { styles here }.btn__text { styles here }

/* Modifier: change the style of the element */.btn__text--important { styles here }

CSS

index.html

<a href="subscribe.html" class="btn"> <span class="btn__price">$150</span> <span class="btn__text btn__text--important">Subscribe now</span> </a>

HTML

Page 24: Learn BEM: CSS Naming Convention

USEFUL REFERENCES

LEARN BEM: Block - Element - Modifier

BEM METHODOLOGY: NAMING CONVENTION

The BEM methodology provides an idea for creating naming rules and implements that idea in its canonical CSS selector naming convention. bem.info/methodology/naming-convention

CONVENTION BY HARRY ROBERTS

"BEM-like" convention of CSS Guidelines by Harry Roberts. bem.info/toolbox/sdk/bem-naming/#convention-by-harry-roberts

Page 25: Learn BEM: CSS Naming Convention

Are you also interested in learning

BOOTSTRAP 4POSTCSS?+

http://inarocket.teachable.com/courses/css-postcssPlease visit:

Page 26: Learn BEM: CSS Naming Convention

Learn front-end development at rocket speed

inarocket.com

by miguelsanchez.com

Page 27: Learn BEM: CSS Naming Convention

inarocket.com

Learn at rocket speed

BEMCSS NAMING CONVENTION