@extend or native class?

Note: Since I wrote this article I changed my mind concerning @extend. Today I would disadvise using @extend at all anywhere in your CSS because of reasons.


Architecting websites in an OOCSS-manner means adding a lot more classes to elements. Trying not to add any classes and scoping them in containers is a child of the past. But which way is to choose to add all these abstract classes to the elements? Throw them all into the document as ‘native classes’ to bloat the markup or store them into the css as SASS @extends?

Here’s a list for you:

Pro native class

Contra native class

Pro @extend

Contra @extend

The question you got to answer to youself when assigning classes is whether the element/module will exist multiple times on the site, so that a deletion/changing of a involved class will cause multiple deletions/changings in the document. In the case of a stage-slider on the start page of your site, this slider will likely appear just on this page. So you can get around with something like this:

<ul class="slider big-margin--bottom page-wrap">
  <li><img src="pic1.jpg" /></li>
  <li><img src="pic2.jpg" /></li>
  <li><img src="pic3.jpg" /></li>
  <li><img src="pic4.jpg" /></li>
</ul>

But something like this isn’t that much advisable:

<div class="teaser  big-margin--bottom  brand-background">
    TEASER#1
</div>

<div class="teaser  big-margin--bottom  brand-background">
    TEASER#2
</div>

<div class="teaser  big-margin--bottom  brand-background">
    TEASER#3
</div>

Perhaps on day you’ll realize, .big-margin--bottom here is too big, so instead you want it to change to .half-margin--bottom. In this case, you’ll have to change it at three places in the document. Why don’t you go this way instead:

<div class="teaser">
    TEASER#1
</div>

<div class="teaser">
    TEASER#2
</div>

<div class="teaser">
    TEASER#3
</div>



.half-margin--bottom{
    margin-bottom: 24px;
}

.brand-background{
    background-color: #123456;
}

.teaser{
    @extend .half-margin--bottom;
    @extend .brand-background;
    padding: 12px;
}

As long as the involved classes of an element unlikey change or the element is more or less unique on your site, you can write the needed classes right into the HTML as native classes if you prefer to. But in all other cases, that is to say teasers, sidebar widgets, media-elements etc., I strictly disadvise, because of the lack of maintenance and scalability.