title.scss

.User {
    width: 50%;
    background: #fcf;

    s {
        color: #999;
        font-style: italic;
    }

    h3 {
        text-align: left;
        text-indent: 2em;
    }

    .description {
        vertical-align: top;
        color: #333;
    }

    .phone {
        text-align: right;
        padding-right: 2em;
    }
}


<ul>
<li class="User">
<h3>Albert</h3>
<p class="description">Det här är en av våra <s>medarbetare</s></p>
<span class="phone">0123-45 67 89</span>
</li>
</ul>

För HTML markup som du har där, jag kommer att skriva SCSS, typ här. Med denna struktur som jag har, .user blir en element som jag kan använda var som helst. Allt jag behöver göra är att justera .user element enligt scope som det är i. Till exempel, om User-ruta ska vara narrow eller wide i storlek, då kan jag använda .user--narrow eller .user--wide modifiers att anpassa det.

.user {
    width: 50%;
    background: #fcf;

    .user__name {
        text-align: left;
        text-indent: 2em;
    }

    .user__description {
        vertical-align: top;
        color: #333;
    }

    .user__phone {
        text-align: right;
        padding-right: 2em;
    }

    // Modifiers
    &.user--narrow {}
    &.user--wide {}
    &.user--modifier {}

}

.user {
  width: 50%;
  background: #fcf;

  &__strikethrough {
    color: #999;
    font-style: italic;
  }

  &__name {
    text-align: left;
    text-indent: 2em;
  }

  &__description {
    vertical-align: top;
    color: #333;
  }

  &__phone {
    text-align: right;
    padding-right: 2em;
  }
}

<ul>
  <li class="user">
    <h3 class="user__name">Albert</h3>
    <p class="user__description">
      Det här är en av våra
      <s class="user__strikethrough">medarbetare</s>
    </p>
    <span class="user__phone">0123-45 67 89</span>
  </li>
</ul>