Sass @extend vs adding class to component

Question

I have a project generated via create-react-app with sass-compilation (doc) and foundation-sites framework.

Let's say I have a component that renders something like this:

<div class='mycomp grid-x'>
  <div class='mycomp__element cell small-6'>1</div>
  <div class='mycomp__element cell small-6'>2</div>
</div>

I thought maybe it would be cleaner if I moved markup foundation classes to sass like this:

.mycomp
  @extend .grid-x
  &__element
    @extend .cell
    @extend .small-6

It's not really pretty but at least I don't have to think about markup classes in js-code. And if I want to change css-framework mostly I will need to edit .sass files.

So my question is "Is it a good thought?". And if it is how do I approach this? Since sass compiles each file into corresponding .css I will have to compile them all together in one big .css and remove all import './Mycomp.css' from js-files I guess

Answer 1

The two main benefits of @extend are:

1. using inheritance like features in CSS/sass
2. keeping the HTML markup clean and writing all messy styling things only in styling files

Refer: this article https://www.sitepoint.com/the-benefits-of-inheritance-via-extend-in-sass/