Bem

HTML

묵인

div.formItem
  dl.formItem__contents
    dt.formItem__heading
      span.formItem-label 必須
      br
      span お名前
    dd.formItem__input
      input(type="text" name="firstName" placeholder="例：進学")
    dd.formItem__input
      input(type="text" name="lastName" placeholder="例：花子")

잘못

div.formItem
  dl.formItem__contents
    dt.formItem__heading
      span.formItem-label 必須
      br
      span お名前
    dd.formItem__input--error
      input(type="text" name="firstName" placeholder="例：進学")
    dd.formItem__input--error
      input(type="text" name="lastName" placeholder="例：花子")

CSS

.formItem
  .formItem__input
    border 1px solid #666
    border-radius 5px
    background #fff

  .formItem__input--error
    @extend .formItem__input
    background #fdd