Skip to content

Instantly share code, notes, and snippets.

.btn{
background: #ccc;
color: #000;
width: 100px;
padding: 10px 20px;
font-size: 16px;
text-align: center;
}
.btn--color-red{
color: #f00;
@allanferreira
allanferreira / style.css
Created May 9, 2016 19:06
Minha versão do BEM
.btn{
background: #ccc;
color: #000;
width: 100px;
padding: 10px 20px;
font-size: 16px;
text-align: center;
}
.btn--color-red{
background: #ccc;
<div class="btn">button</div>
<div class="btn btn--color-red">button</div>
<div class="btn btn--size-large">button</div>
<div class="btn btn--color-red btn--size-large">button</div>
@allanferreira
allanferreira / index.html
Created May 9, 2016 19:47
Minha versão do BEM HTML
<div class="btn">button</div>
<div class="btn--color-red">button</div>
<div class="btn--size-large">button</div>
<div class="btn--color-red--size-large">button</div>
@allanferreira
allanferreira / style.styl
Created May 9, 2016 19:54
BEM escrito com stylus
.btn
background #ccc
color #000
width 100px
padding 10px 20px
font-size 16px
text-align center
&--color-red
color #f00
&--size-large
@allanferreira
allanferreira / style.styl
Created May 9, 2016 21:45
Minha versão do BEM com stylus
.btn
background #ccc
color #000
width 100px
padding 10px 20px
font-size 16px
text-align center
/[class*="--color-red"]
@extend .btn
color red
@allanferreira
allanferreira / index.html
Last active May 9, 2016 22:04
BEM HTML na versão de Jordan Lewis
<div class="btn">button</div>
<div class="btn -color-red">button</div>
<div class="btn -size-large">button</div>
<div class="btn -color-red -size-large">button</div>
@allanferreira
allanferreira / style.styl
Created May 9, 2016 22:01
BEM na versão de Jordan Lewis com stylus
.btn
background #ccc
color #000
width 100px
padding 10px 20px
font-size 16px
text-align center
.-color-red
color red
.-size-large
@allanferreira
allanferreira / index.html
Created May 9, 2016 22:07
BEM HTML na versão de Jordan Lewis com outras classes na estrutura
<div class="btn clear -fix">button</div>
<div class="btn -color-red float -left">button</div>
<div class="btn -size-large text -center">button</div>
<div class="btn -color-red -size-large is -enable">button</div>
@allanferreira
allanferreira / index.html
Created May 9, 2016 22:11
Minha versão do BEM HTML com outras classes na estrutura
<div class="btn clear--fix">button</div>
<div class="btn--color-red float--left">button</div>
<div class="btn--size-large text--center">button</div>
<div class="btn--color-red--size-large is--enable">button</div>