Multiple styles vs Sass extend

[CROSP]

Hi, I have one question. I am trying to make my code cleaner.

I have predefined default styles for default buttons.

But in a some of sections on my page, I need to add something specific for example padding, border. But mostly I use default buttons.

First way is to define button like this
<a class="intro-navigation__link-button button button--secondary-inverse">

Here you can see intro-navigation__link-button is specific for module/section style, button and button--secondary-inverse are styles for module and modifier according BEM methodology.

I can override default buttons styles with intro-navigation__link-button class in this case.

Another variant is to use extend and only single class like that

<button class="works-category-filter-group__button" data-filter="*">All</button>

And SCSS code is following

.works-category-filter-group {
  clear: both;
  margin-bottom: px-to-em(20px);
  &__button {
    @extend .button;
    @extend .button--secondary;
    @extend .button--small;
  }
}

What is considered as better practice to follow.
Thanks.

[giudev]

It depends on how you are building your element classes and how many modifiers do you have/you are using.
If you are following the BEM naming convention then maybe you are ‘breaking the rules’ with the @extend

But I would say just go for the solution that gives you a smaller css file once compiled.

Is yours a big project or a small website? How many devs are working of the same project now and in the future?

[CROSP]

Thank you for reply, appreciate your help.
This is my personal project.
I only the one working on this project.

My goal is to make my code cleaner. In compiled version second variant looks ugly, because of comma separated selectors.

Here is an example.

.button--primary {
  background-color: #52b3d9; }
  .button--primary:hover, .button--primary.is-selected {
    background-color: #237ea2; }
.button--secondary, .works-category-filter-group__button {
  background-color: #68c3a3; }
  .button--secondary:hover, .works-category-filter-group__button:hover, .button--secondary.is-selected, .is-selected.works-category-filter-group__button {
    background-color: #388d6f; }
.button--accent, .figure-info-mask__button {
  background-color: #FFC107; }
  .button--accent:hover, .figure-info-mask__button:hover, .button--accent.is-selected, .is-selected.figure-info-mask__button {
    background-color: #a07800; }

Please suggest what approach would you choose ?

[CROSP]

Thank you for reply, appreciate your help.
This is my personal project.
I only the one working on this project.

My goal is to make my code cleaner. In compiled version second variant looks ugly, because of comma separated selectors.

Here is an example.

.button--primary {
background-color: #52b3d9; }
.button--primary:hover, .button--primary.is-selected {
background-color: #237ea2; }
.button--secondary, .works-category-filter-group__button {
background-color: #68c3a3; }
.button--secondary:hover, .works-category-filter-group__button:hover, .button--secondary.is-selected, .is-selected.works-category-filter-group__button {
background-color: #388d6f; }
.button--accent, .figure-info-mask__button {
background-color: #FFC107; }
.button--accent:hover, .figure-info-mask__button:hover, .button--accent.is-selected, .is-selected.figure-info-mask__button {
background-color: #a07800; }
But in html it looks better with one selector.
Please suggest what approach would you choose ?

[giudev]

I am not a BEM fan.
I always try to creates as less “custom elements” as possibile, but in this case I prefer the BEM approach.

.element_button {
// your basic style
width: 100px;
color: red;
}

.element_button.button--variant {
// only new css properties or modifiers 
color: black;
}

<button class="element_button button--variant button--small">

otherwise you will end up with a CSS full of duplicates

.element_button {
width: 100px;
color: red;
}

.element_button.button--variant {
width: 100px;
color: red;
color: black;
}

And this could be worse as soon as your project get bigger :)

TL;DR
Avoid to use too many @extend(s) or importing classes otherwise your CSS will grow without any good reason

[CROSP]

Thanks for your help and reply, so you would suggest to use first approach. Personally for me it looks better.
In this case it looks more like Atomic CSS with BEM and it makes sense to give button default behavior or at least give two classes general button and specific for module class like element_button.
But in its turn element_button can extend for example @extend .button--secondary; and give some specific attributes for this button.
But avoid using more than one @extend.
Am I right, does this make sense ?

P.S. I am using BEM naming convention with SMACSS file structure.

[Alex Zaworski]

Here’s a pretty good article from Harry Roberts that talks about using @extend (as well as @mixins).

For the most part I wouldn’t worry about how the compiled output looks, at least within reason (obviously if you have tons and tons of superfluous lines that’s not good).

The other thing to keep in mind is that it’s not the end of the world if things get repeated a bit. This is something I’ve run into with @media queries— I nest them so I end up with the same query repeated a bunch of times. Since gzipping (which you absolutely should be using) is really really good at handling repeated strings, often times the impact isn’t as bad as it initially seems.

[Author]

Posts