Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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
Upcoming SlideShare
Loading in …5
×

Learn BEM: CSS Naming Convention

840,628 views

Published on

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.

Published in: Internet
no profile picture user
  • I like this service ⇒ www.HelpWriting.net ⇐ from Academic Writers. I don't have enough time write it by myself.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • I pasted a website that might be helpful to you: ⇒ www.HelpWriting.net ⇐ Good luck!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • If you’re struggling with your assignments like me, check out ⇒ www.HelpWriting.net ⇐.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • There is a useful site for you that will help you to write a perfect and valuable essay and so on. Check out, please ⇒ www.HelpWriting.net ⇐
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • I pasted a website that might be helpful to you: ⇒ www.HelpWriting.net ⇐ Good luck!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
Show More
Show More

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

×