inarocket.com
Learn at rocket speed
BEMCSS NAMING CONVENTION
Learn front-end development at rocket speed
inarocket.com
by miguelsanchez.com
in a
ROCKET
BEM FUNDAMENTALS
Understanding BEM in just 2 minutes
LEARN BEM: Block - Element - Modifier
B E M
Is a naming convention
for classes in HTML and CSS
Developed by the team at Ya...
LEARN BEM: Block - Element - Modifier
B E MBLOCK: Encapsulates a standalone entity that is meaningful on its own.
While bl...
LEARN BEM: Block - Element - Modifier
BLOCK
LEARN BEM: Block - Element - Modifier
B E MELEMENT: Parts of a block and have no standalone meaning. Any element is
semant...
LEARN BEM: Block - Element - Modifier
BLOCK BLOCK
ELEMENT
ELEMENT
ELEMENT
ELEMENT
LEARN BEM: Block - Element - Modifier
B E MMODIFIER: Flags on blocks or elements. Use them to change appearance,
behavior ...
LEARN BEM: Block - Element - Modifier
BLOCK BLOCK
ELEMENT
ELEMENT
ELEMENT
ELEMENT
BLOCK+ MODIFIER
ELEMENT
ELEMENT
ELEMENT
...
LEARN BEM: Block - Element - Modifier
BLOCK BLOCK
ELEMENT
ELEMENT
ELEMENT
ELEMENT
BLOCK+ MODIFIER
ELEMENT
ELEMENT
ELEMENT
...
in a
ROCKET
QUICK EXAMPLE
How it works with a real example
LEARN BEM: Block - Element - Modifier
$150 SUBSCRIBE NOW
LEARN BEM: Block - Element - Modifier
BLOCK: btn
LEARN BEM: Block - Element - Modifier
BLOCK: btn BLOCK: btn
$150 SUBSCRIBE NOW
ELEMENT: price ELEMENT: text
LEARN BEM: Block - Element - Modifier
BLOCK: btn BLOCK: btn
$150 SUBSCRIBE NOW
ELEMENT: price ELEMENT: text
BLOCK: btn + M...
LEARN BEM: Block - Element - Modifier
BLOCK: btn BLOCK: btn
$150 SUBSCRIBE NOW
ELEMENT: price ELEMENT: text
BLOCK: btn + M...
in a
ROCKET
LET'S CODE
BEM syntax you can start using right now
BEM SYNTAX
$150 SUBSCRIBE NOW
LEARN BEM: Block - Element - Modifier
.block
Examples: .btn or .login-form
.block__element
E...
LEARN BEM: Block - Element - Modifier
BLOCK: btn
styles.css
/* Block */
.btn { styles here }
CSS
index.html
<a href="#" cl...
LEARN BEM: Block - Element - Modifier
BLOCK: btn
$150 SUBSCRIBE NOW
ELEMENT: price ELEMENT: text
styles.css
/* Block */
.b...
LEARN BEM: Block - Element - Modifier
BLOCK: btn
$150 SUBSCRIBE NOW
styles.css
/* Block */
.btn { styles here }
/* Element...
LEARN BEM: Block - Element - Modifier
BLOCK: btn
$150 SUBSCRIBE NOW
styles.css
/* Block */
.btn { styles here }
/* Element...
USEFUL REFERENCES
LEARN BEM: Block - Element - Modifier
BEM METHODOLOGY: NAMING CONVENTION
The BEM methodology provides an...
Are you also interested in learning
BOOTSTRAP 4
POSTCSS?
+
http://inarocket.teachable.com/courses/css-postcss
Please visit:
Learn front-end development at rocket speed
inarocket.com
by miguelsanchez.com
inarocket.com
Learn at rocket speed
BEMCSS NAMING CONVENTION
Prochain SlideShare
Chargement dans…5
×

Learn BEM: CSS Naming Convention

254 901 vues

Publié le

http://inarocket.com

Learn BEM fundamentals as fast as possible. What is BEM (Block, element, modifier), BEM syntax, how it works with a real example, etc.

Publié dans : Internet

Learn BEM: CSS Naming Convention

  1. inarocket.com Learn at rocket speed BEMCSS NAMING CONVENTION
  2. Learn front-end development at rocket speed inarocket.com by miguelsanchez.com
  3. in a ROCKET BEM FUNDAMENTALS Understanding BEM in just 2 minutes
  4. LEARN BEM: Block - Element - Modifier B E M Is a naming convention for classes in HTML and CSS Developed by the team at Yandex. Block Element Modifier
  5. 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.
  6. LEARN BEM: Block - Element - Modifier BLOCK
  7. 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.
  8. LEARN BEM: Block - Element - Modifier BLOCK BLOCK ELEMENT ELEMENT ELEMENT ELEMENT
  9. LEARN BEM: Block - Element - Modifier B E MMODIFIER: Flags on blocks or elements. Use them to change appearance, behavior or state.
  10. LEARN BEM: Block - Element - Modifier BLOCK BLOCK ELEMENT ELEMENT ELEMENT ELEMENT BLOCK+ MODIFIER ELEMENT ELEMENT ELEMENT ELEMENT
  11. LEARN BEM: Block - Element - Modifier BLOCK BLOCK ELEMENT ELEMENT ELEMENT ELEMENT BLOCK+ MODIFIER ELEMENT ELEMENT ELEMENT ELEMENT BLOCK ELEMENT ELEMENT ELEMENT ELEMENT + MODIFIER
  12. in a ROCKET QUICK EXAMPLE How it works with a real example
  13. LEARN BEM: Block - Element - Modifier $150 SUBSCRIBE NOW
  14. LEARN BEM: Block - Element - Modifier BLOCK: btn
  15. LEARN BEM: Block - Element - Modifier BLOCK: btn BLOCK: btn $150 SUBSCRIBE NOW ELEMENT: price ELEMENT: text
  16. LEARN BEM: Block - Element - Modifier BLOCK: btn BLOCK: btn $150 SUBSCRIBE NOW ELEMENT: price ELEMENT: text BLOCK: btn + MODIFIER $150 SUBSCRIBE NOW
  17. 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
  18. in a ROCKET LET'S CODE BEM syntax you can start using right now
  19. BEM SYNTAX $150 SUBSCRIBE NOW LEARN BEM: Block - Element - Modifier .block Examples: .btn or .login-form .block__element Examples: .btn__price or .btn__text .block--modifier
 Examples: .btn--important
 .block__element--modifier Examples: .btn__text--important $150 SUBSCRIBE NOW BLOCKS ELEMENTS MODIFIERS
  20. LEARN BEM: Block - Element - Modifier BLOCK: btn styles.css /* Block */ .btn { styles here } CSS index.html <a href="#" class="btn"></a> HTML
  21. 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
  22. 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
  23. 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
  24. 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
  25. Are you also interested in learning BOOTSTRAP 4 POSTCSS? + http://inarocket.teachable.com/courses/css-postcss Please visit:
  26. Learn front-end development at rocket speed inarocket.com by miguelsanchez.com
  27. inarocket.com Learn at rocket speed BEMCSS NAMING CONVENTION

×