CSS Structure and Rules

各種CSS設計

by bc_rikko

HTML

<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>

SCSS

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;   
    }
  }
}