How to include mixins correctly?

[jyggiz]

I noticed when checking several pull requests that there are cases when mixins are inserted not at the beginning of the selector:

.caption {
  font-weight: bold;
  @include copy-1;
}

I think it's best practice to include mixins at the very top so that you do not accidentally overwrite the styles you wrote earlier. We also need to add a new line after the mixin to improve the reading of the code. Example:

.caption {
  @include copy-1;

  font-weight: bold;
}

I think it would be nice to add this to the coding standards if it really is best practice. I noticed that we do not have a section with rules for CSS or is it better to add this rule somewhere else?

[nswaldman]

In agreement there -it is best practice to place mixins first and separate your mixin(s) and regular declarations with a newline for legibility.

Input on CSS was requested last week and this particular example should definitely live under a SCSS sub-chapter.

[larsvanbraam]

While on the topic of adding this to the coding standards, maybe we should also include a section about excessive parenthesis on mixins that do not require any arguments as well?

.caption {
  @include copy-1; // Using this notation

   font-weight: bold;
}

.caption { 
  @include copy-1(); // In favor of this

   font-weight: bold;
}

[nswaldman]

I never enforce that concept because it doesn't really help make code more legible or the output smaller.

• When skimming through scss, @xxxxxxx xxxxx(); sticks out way more than @xxxxxxx xxxxx;
• Those parentheses have no effect on the output's size, so it's not like we're breaking the bank leaving them in.