<section class="oocss"> <h1>OOCSS(Object Oriented CSS)</h1> <ul class="menu"> <li class="item item-large">link</li> <li class="item item-active">active</li> </ul> </section> <section class="bem"> <h1>BEM(Block__Element--Modifier)</h1> <ul class="menu"> <li class="menu__item--large">link</li> <li class="menu__item--active">active</li> </ul> </section> <section class="smacss"> <h1>SMACSS(Scalable and Modular Architecture for CSS)</h1> <div class="l-container"> <ul class="menu"> <li class="menu-item is-large">link</li> <li class="menu-item is-active">active</li> </ul> </div> </section> <section class="flocss"> <h1>FLOCSS</h1> <div id="container"> <ul class="o-menu"> <li class="c-item c-item--large">link</li> <li class="c-item c-item--active">active</li> </ul> </div> </section> <section class="rscss"> <h1>RSCSS(Reasonable System for CSS Stylesheet Structure)</h1> <ul class="menu-list"> <li class="item -large">link</li> <li class="item -active">active</li> </ul> </section>
body { background-color: white; color: #555555; } h1::before { content: '\2713\0020'; } /* OOCSS */ .oocss { .menu { list-style-type: none; } .item { width: 80px; margin-bottom: 5px; color: #4486F7; border: 1px solid #4486F7; text-align: center; } .item-large { width: 100px; } .item-active { color: #fff; background-color: #4486F7; } } /* BEM */ .bem { .menu { list-style-type: none; } .menu__item { width: 80px; margin-bottom: 5px; color: #4486F7; border: 1px solid #4486F7; text-align: center; } .menu__item--large { @extend .menu__item; width: 100px; } .menu__item--active { @extend .menu__item; color: #fff; background-color: #4486F7; } } /* SMACSS */ .smacss { .l-container { /***/ } .menu { list-style-type: none; } .menu-item { width: 80px; margin-bottom: 5px; color: #4486F7; border: 1px solid #4486F7; text-align: center; } .is-large { width: 100px; } .is-active { color: #fff; background-color: #4486F7; } } /* FLOCSS */ .flocss { #container { /***/ } .o-menu { list-style-type: none; } .c-item { width: 80px; margin-bottom: 5px; color: #4486F7; border: 1px solid #4486F7; text-align: center; } .c-item--large { width: 100px; } .c-item--active { color: #fff; background-color: #4486F7; } } /* RSCSS */ .rscss { .menu-list { & { list-style-type: none; } > .item { width: 80px; margin-bottom: 5px; color: #4486F7; border: 1px solid #4486F7; text-align: center; } > .item.-large { width: 100px; } > .item.-active { color: #fff; background-color: #4486F7; } } }