CSS concept comparison

0-1-1 Tode (SCSS)

.button {
  // Parent styles
  // -------------------------------
  display: inline-block;
  padding: 5px 10px;
  background-color: blue;
  border-radius: 5px;
  vertical-align: middle;

  // Child element styles
  // -------------------------------
  .button-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: middle;
  }

  .button-text {
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    color: black;
  }

  // States
  // -------------------------------
  &.is-disabled {
    background-color: gray;

    .button-icon {
      opacity: 0.5;
    }

    .button-text {
      color: white;
    }
  }

  // Modifiers
  // -------------------------------
  &.is-red {
    background-color: red;
  }

  &.is-icon-large {
    .button-icon {
      width: 32px;
      height: 32px;
    }
  }

  &.is-text-large {
    .button-text {
      font-size: 24px;
    }
  }
}

0-1-2 Tode (CSS)

.button {
  display: inline-block;
  padding: 5px 10px;
  background-color: blue;
  border-radius: 5px;
  vertical-align: middle;
}

.button .button-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: middle;
}

.button .button-text {
  display: inline-block;
  vertical-align: middle;
  font-size: 14px;
  color: black;
}

.button.is-disabled {
  background-color: gray;
}

.button.is-disabled .button-icon {
  opacity: 0.5;
}

.button.is-disabled .button-text {
  color: white;
}

.button.is-red {
  background-color: red;
}

.button.is-icon-large .button-icon {
  width: 32px;
  height: 32px;
}

.button.is-text-large .button-text {
  font-size: 24px;
}

1-1 BEM (SCSS)

.button {
  // Parent styles
  // -------------------------------
  display: inline-block;
  padding: 5px 10px;
  background-color: blue;
  border-radius: 5px;
  vertical-align: middle;

  // Child element styles
  // -------------------------------
  .button__icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: middle;

    &.button__icon--large {
      width: 32px;
      height: 32px;
    }
  }

  .button__text {
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    color: black;

    &.button__text--large {
      font-size: 24px;
    }
  }

  // States
  // -------------------------------
  &.button--disabled {
    background-color: gray;

    .button__icon {
      opacity: 0.5;
    }

    .button__text {
      color: white;
    }
  }

  // Modifiers
  // -------------------------------
  &.button--red {
    background-color: red;
  }
}

1-2 BEM (CSS)

.button {
  display: inline-block;
  padding: 5px 10px;
  background-color: blue;
  border-radius: 5px;
  vertical-align: middle;
}

.button .button__icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: middle;
}

.button .button__icon.button__icon--large {
  width: 32px;
  height: 32px;
}

.button .button__text {
  display: inline-block;
  vertical-align: middle;
  font-size: 14px;
  color: black;
}

.button .button__text.button__text--large {
  font-size: 24px;
}

.button.button--disabled {
  background-color: gray;
}

.button.button--disabled .button__icon {
  opacity: 0.5;
}

.button.button--disabled .button__text {
  color: white;
}

.button.button--red {
  background-color: red;
}

2-1 rscss (SCSS)

.button {
  // Parent styles
  // -------------------------------
  display: inline-block;
  padding: 5px 10px;
  background-color: blue;
  border-radius: 5px;
  vertical-align: middle;

  // Child element styles
  // -------------------------------
  .icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: middle;

    &.-large {
      width: 32px;
      height: 32px;
    }
  }

  .text {
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    color: black;

    &.-large {
      font-size: 24px;
    }
  }

  // States
  // -------------------------------
  &.-disabled {
    background-color: gray;

    .icon {
      opacity: 0.5;
    }

    .text {
      color: white;
    }
  }

  // Modifiers
  // -------------------------------
  &.-red {
    background-color: red;
  }
}

2-2 rscss (CSS)

.button {
  display: inline-block;
  padding: 5px 10px;
  background-color: blue;
  border-radius: 5px;
  vertical-align: middle;
}

.button .icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: middle;
}

.button .icon.-large {
  width: 32px;
  height: 32px;
}

.button .text {
  display: inline-block;
  vertical-align: middle;
  font-size: 14px;
  color: black;
}

.button .text.-large {
  font-size: 24px;
}

.button.-disabled {
  background-color: gray;
}

.button.-disabled .icon {
  opacity: 0.5;
}

.button.-disabled .text {
  color: white;
}

.button.-red {
  background-color: red;
}

3-1 Bootstrap (SCSS)

.btn {
  // Parent styles
  // -------------------------------
  display: inline-block;
  padding: 5px 10px;
  background-color: blue;
  border-radius: 5px;
  vertical-align: middle;

  // Child element styles
  // -------------------------------
  .btn-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: middle;

    &.btn-icon-lg {
      width: 32px;
      height: 32px;
    }
  }

  .btn-text {
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    color: black;

    &.btn-text-lg {
      font-size: 24px;
    }
  }

  // States
  // -------------------------------
  &.btn-disabled {
    background-color: gray;

    .btn-icon {
      opacity: 0.5;
    }

    .btn-text {
      color: white;
    }
  }

  // Modifiers
  // -------------------------------
  &.btn-red {
    background-color: red;
  }
}

3-2 Bootstrap (CSS)

.btn {
  display: inline-block;
  padding: 5px 10px;
  background-color: blue;
  border-radius: 5px;
  vertical-align: middle;
}

.btn .btn-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: middle;
}

.btn .btn-icon.btn-icon-lg {
  width: 32px;
  height: 32px;
}

.btn .btn-text {
  display: inline-block;
  vertical-align: middle;
  font-size: 14px;
  color: black;
}

.btn .btn-text.btn-text-lg {
  font-size: 24px;
}

.btn.btn-disabled {
  background-color: gray;
}

.btn.btn-disabled .btn-icon {
  opacity: 0.5;
}

.btn.btn-disabled .btn-text {
  color: white;
}

.btn.btn-red {
  background-color: red;
}

4-1 Bulma (SCSS)

.button {
  // Parent styles
  // -------------------------------
  display: inline-block;
  padding: 5px 10px;
  background-color: blue;
  border-radius: 5px;
  vertical-align: middle;

  // Child element styles
  // -------------------------------
  .icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: middle;

    &.is-large {
      width: 32px;
      height: 32px;
    }
  }

  .text {
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    color: black;

    &.is-large {
      font-size: 24px;
    }
  }

  // States
  // -------------------------------
  &.is-disabled {
    background-color: gray;

    .icon {
      opacity: 0.5;
    }

    .text {
      color: white;
    }
  }

  // Modifiers
  // -------------------------------
  &.is-red {
    background-color: red;
  }
}

4-2 Bulma (CSS)

.button {
  display: inline-block;
  padding: 5px 10px;
  background-color: blue;
  border-radius: 5px;
  vertical-align: middle;
}

.button .icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: middle;
}

.button .icon.is-large {
  width: 32px;
  height: 32px;
}

.button .text {
  display: inline-block;
  vertical-align: middle;
  font-size: 14px;
  color: black;
}

.button .text.is-large {
  font-size: 24px;
}

.button.is-disabled {
  background-color: gray;
}

.button.is-disabled .icon {
  opacity: 0.5;
}

.button.is-disabled .text {
  color: white;
}

.button.is-red {
  background-color: red;
}

5-1 Semantic UI (SCSS)

.ui {
  &.button {
    // Parent styles
    // -------------------------------
    display: inline-block;
    padding: 5px 10px;
    background-color: blue;
    border-radius: 5px;
    vertical-align: middle;

    // Child element styles
    // -------------------------------
    .icon {
      display: inline-block;
      width: 16px;
      height: 16px;
      vertical-align: middle;

      &.is-large {
        width: 32px;
        height: 32px;
      }
    }

    .text {
      display: inline-block;
      vertical-align: middle;
      font-size: 14px;
      color: black;

      &.large {
        font-size: 24px;
      }
    }

    // States
    // -------------------------------
    &.disabled {
      background-color: gray;

      .icon {
        opacity: 0.5;
      }

      .text {
        color: white;
      }
    }

    // Modifiers
    // -------------------------------
    &.red {
      background-color: red;
    }
  }
}

5-2 Semantic UI (CSS)

.ui.button {
  display: inline-block;
  padding: 5px 10px;
  background-color: blue;
  border-radius: 5px;
  vertical-align: middle;
}

.ui.icon.button .icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: middle;
}

.ui.icon.button .icon.large {
  width: 32px;
  height: 32px;
}

.ui.text.button .text {
  display: inline-block;
  vertical-align: middle;
  font-size: 14px;
  color: black;
}

.ui.text.button .text.large {
  font-size: 24px;
}

.ui.disabled.button {
  background-color: gray;
}

.ui.disabled.icon.button .icon {
  opacity: 0.5;
}

.ui.disabled.text.button .text {
  color: white;
}

.ui.red.button {
  background-color: red;
}

6-1 Foundation (SCSS)

.button {
  // Parent styles
  // -------------------------------
  display: inline-block;
  padding: 5px 10px;
  background-color: blue;
  border-radius: 5px;
  vertical-align: middle;

  // Child element styles
  // -------------------------------
  .icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: middle;

    &.large {
      width: 32px;
      height: 32px;
    }
  }

  .text {
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    color: black;

    &.large {
      font-size: 24px;
    }
  }

  // States
  // -------------------------------
  &.disabled {
    background-color: gray;

    .icon {
      opacity: 0.5;
    }

    .text {
      color: white;
    }
  }

  // Modifiers
  // -------------------------------
  &.red {
    background-color: red;
  }
}

6-2 Foundation (CSS)

.button {
  display: inline-block;
  padding: 5px 10px;
  background-color: blue;
  border-radius: 5px;
  vertical-align: middle;
}

.button .icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: middle;
}

.button .icon.large {
  width: 32px;
  height: 32px;
}

.button .text {
  display: inline-block;
  vertical-align: middle;
  font-size: 14px;
  color: black;
}

.button .text.large {
  font-size: 24px;
}

.button.disabled {
  background-color: gray;
}

.button.disabled .icon {
  opacity: 0.5;
}

.button.disabled .text {
  color: white;
}

.button.red {
  background-color: red;
}

7-1 MUI (SCSS)

.mui-btn {
  // Parent styles
  // -------------------------------
  display: inline-block;
  padding: 5px 10px;
  background-color: blue;
  border-radius: 5px;
  vertical-align: middle;

  // Child element styles
  // -------------------------------
  .mui-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: middle;

    &.mui-icon--large {
      width: 32px;
      height: 32px;
    }
  }

  .mui-text {
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    color: black;

    &.mui-text--large {
      font-size: 24px;
    }
  }

  // States
  // -------------------------------
  &.mui-btn--disabled {
    background-color: gray;

    .mui-icon {
      opacity: 0.5;
    }

    .mui-text {
      color: white;
    }
  }

  // Modifiers
  // -------------------------------
  &.mui-btn--red {
    background-color: red;
  }
}

7-2 MUI (CSS)

.mui-btn {
  display: inline-block;
  padding: 5px 10px;
  background-color: blue;
  border-radius: 5px;
  vertical-align: middle;
}

.mui-btn .mui-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: middle;
}

.mui-btn .mui-icon.mui-icon--large {
  width: 32px;
  height: 32px;
}

.mui-btn .mui-text {
  display: inline-block;
  vertical-align: middle;
  font-size: 14px;
  color: black;
}

.mui-btn .mui-text.mui-text--large {
  font-size: 24px;
}

.mui-btn.mui-btn--disabled {
  background-color: gray;
}

.mui-btn.mui-btn--disabled .mui-icon {
  opacity: 0.5;
}

.mui-btn.mui-btn--disabled .mui-text {
  color: white;
}

.mui-btn.mui-btn--red {
  background-color: red;
}