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.

BEVM ( block__element--variation -modifier)

1,700 views

Published on

BEVM (block_element--variation-modifier)

Published in: Technology
  • Be the first to comment

BEVM ( block__element--variation -modifier)

  1. 1. http://jyaasa.comCopyright 2016. Jyaasa Technologies. BEVM Block Element Variation Modifier Block__Element--Variation -Modifier
  2. 2. Hello! I am Nikesh Suwal http://jyaasa.comCopyright 2016. Jyaasa Technologies. Front End Developer Jyaasa Technologies
  3. 3. http://jyaasa.comCopyright 2016. Jyaasa Technologies. BEM Block__Element--Modifier
  4. 4. http://jyaasa.comCopyright 2016. Jyaasa Technologies. ● Solved an issue that has been bothering us since adopting BEM ● Removed ambiguity from our code ● Build a super flexible UI Library ● Enabled those less skilled in Frontend practices to be productive
  5. 5. http://jyaasa.comCopyright 2016. Jyaasa Technologies. Bem Modifier in two different way ● Single Class ● Multiple Class /* Single Class */ <button class =”btn-primary”></button> /* Multiple Class */ <button class =”btn btn--green btn--large ”></button>
  6. 6. http://jyaasa.comCopyright 2016. Jyaasa Technologies. ● Easy to understand at a glance ● Pushes all the logic into the CSS ● Makes use of Sass’ @extend to make the modifications ● Best suited for modules that only need to make one modification at a time Benefits of a single class modifie Single Class
  7. 7. http://jyaasa.comCopyright 2016. Jyaasa Technologies. ● Logic kept in the HTML ● Configure any given module on the fly ● Best suited for modules with multiple modifiers ● that are designed to be mixed and matched. Benefits of multiple classes Multiple Class
  8. 8. http://jyaasa.comCopyright 2016. Jyaasa Technologies. What if told you 'single' and 'multiple' classes are complete different things?
  9. 9. BEVM http://jyaasa.comCopyright 2016. Jyaasa Technologies.
  10. 10. http://jyaasa.comCopyright 2016. Jyaasa Technologies. Single Class = Variation
  11. 11. http://jyaasa.comCopyright 2016. Jyaasa Technologies. Multiple Class = Modifier
  12. 12. http://jyaasa.comCopyright 2016. Jyaasa Technologies. Variation “A different or distinct form or version of something” Oxford dictionary
  13. 13. Variation Single Class approach <button class =”btn-primary”></button> Variation Rules ● Can only apply one 'variation' at a time ● No need to repeat base class ● Can use Sass @extends to build ● Or can write a custom variation (no @extends) ● Can combine with Modifiers Variation rules
  14. 14. http://jyaasa.comCopyright 2016. Jyaasa Technologies. Modifier “A ... thing that makes partial or minor changes to something” Oxford dictionary
  15. 15. Chainable Modifier Multiple Class approach <button class =”btn -color-primary -size-large”></button>
  16. 16. New Modifier Syntax -namespace-descriptor
  17. 17. Chainable Modifier Rule Chainable modifiers should never modify the same CSS property twice for a given module
  18. 18. Golden Rule: ● See ‘Golden rule' ● Use a namespace which describe the change e.g. size, color, width etc ● Use generic descriptors e.g. large, primary, dark etc
  19. 19. Combining Variations and Modifiers <button class="btn--3d -color-primary -size-large -width-full">
  20. 20. Special Mention <button class="js-hook block__element--variation -modifier h-helper is-state "> ● State Classes ● Helper/Utility ● classes JS Hooks
  21. 21. Benefits of BEVM ● Build a super flexible UI Library ● Configure modules in the HTML ● Short, concise syntax ● Reducing the amount of CSS that we need to write ● Increases development speed ● Can still use ‘variations' if you want ● Works with ‘helper' and 'state' classes
  22. 22. Resources Chainable BEM Modifier http://webuild.envato.com/blog/chainable-bem-modifiers/ Sassier (BE)Modifiers http://viget.com/extend/bem-sass-modifiers BEM modifiers: multiple classes vs @extend http://bensmithett.com/bem-modifiers-multiple-classes-vs-extend
  23. 23. Thank you! Any Queries? facebook.com/nikesh.suwal github.com/nikeshsuwal Copyright 2015. Jyaasa Technologies.Copyright 2016. Jyaasa Technologies. http://jyaasa.com

×