Last active
June 5, 2018 20:29
-
-
Save luislobo14rap/6297febd81a864ef840b0326259cbee8 to your computer and use it in GitHub Desktop.
Blocks, Elements and Modifiers
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- BEM-example.html v1 --> | |
| <!doctype html> | |
| <html lang="pt-br"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> | |
| <title>bootstrap starter template</title> | |
| </head> | |
| <body> | |
| <div BEM class="mc-header"> | |
| <div class="__full-container container-fluid"> | |
| <div class="row"> | |
| <div class="col-4">A</div> | |
| <div class="col-4">B</div> | |
| <div class="__text-box col-4"> | |
| <div class="__block"> | |
| <div class="__element"> | |
| <div class="__title">C</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> | |
| <script src="js/BEM.js"></script> | |
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // BEM.js v1.0.2 | |
| function BEM(element, patchBEM) { | |
| if (element == undefined) { | |
| element = $('[bem]'); | |
| }; | |
| if (patchBEM == undefined) { | |
| patchBEM = getPatchBEM(element); | |
| }; | |
| element.each(function() { | |
| if( typeof $(this).attr('bem') != 'undefined' ){ | |
| patchBEM = getPatchBEM( $(this) ); | |
| $(this).removeAttr('bem'); | |
| }; | |
| let thisChildrens = $(this).children(); | |
| // loop em cada elemento filho, independente de qualquer coisa | |
| thisChildrens.each(function() { | |
| // se o filho contiver o atributo class | |
| let thisClass = $(this).attr('class'); | |
| if (typeof thisClass != 'undefined') { | |
| // se o filho contiver dois underscores no início do atributo class | |
| if (!!thisClass.match(/^__/)) { | |
| // então faz um loop identificando até onde devemos guardar a seleção | |
| let thisBEMName = ''; | |
| for (i = 0; i < thisClass.length; i++) { | |
| thisLetter = thisClass[i]; | |
| if (!thisLetter.match(/\s/)) { | |
| thisBEMName += thisLetter; | |
| } else { | |
| break; | |
| }; | |
| }; | |
| $(this).attr('class', thisClass.replace(thisBEMName, patchBEM + thisBEMName)); | |
| let newPatchBEM = patchBEM + thisBEMName; | |
| BEM($(this), newPatchBEM); | |
| return true; | |
| }; | |
| }; | |
| BEM($(this), patchBEM); | |
| }); | |
| }); | |
| }; | |
| function getPatchBEM(element){ | |
| let thisClass = element.attr('class'); | |
| let thisBEMName = ''; | |
| for (i = 0; i < thisClass.length; i++) { | |
| thisLetter = thisClass[i]; | |
| if (!!!thisLetter.match(/\s/)) { | |
| thisBEMName += thisLetter; | |
| } else { | |
| break; | |
| }; | |
| }; | |
| patchBEM = thisBEMName; | |
| return patchBEM; | |
| }; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // BEM.min.js v1.0.2 | |
| function BEM(element,patchBEM){if(element==undefined){element=$('[bem]')};if(patchBEM==undefined){patchBEM=getPatchBEM(element)};element.each(function(){if(typeof $(this).attr('bem')!='undefined'){patchBEM=getPatchBEM($(this));$(this).removeAttr('bem')};let thisChildrens=$(this).children();thisChildrens.each(function(){let thisClass=$(this).attr('class');if(typeof thisClass!='undefined'){if(!!thisClass.match(/^__/)){let thisBEMName='';for(i=0;i<thisClass.length;i++){thisLetter=thisClass[i];if(!thisLetter.match(/\s/)){thisBEMName+=thisLetter}else{break}};$(this).attr('class',thisClass.replace(thisBEMName,patchBEM+thisBEMName));let newPatchBEM=patchBEM+thisBEMName;BEM($(this),newPatchBEM);return!0}};BEM($(this),patchBEM)})})};function getPatchBEM(element){let thisClass=element.attr('class');let thisBEMName='';for(i=0;i<thisClass.length;i++){thisLetter=thisClass[i];if(!!!thisLetter.match(/\s/)){thisBEMName+=thisLetter}else{break}};patchBEM=thisBEMName;return patchBEM} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment