Utility classes don't always overwrite other classes

[dariusrosendahl]

Example:

// project stylesheet 
.block {
    margin-bottom: 12px;
}

Now, when we have an element on the webpage:

<!-- example block -->
<div class="block mb-0">
    My .blocks always have a margin bottom, 
    This one time I want margin-bottom: 0; without creating an extra stylesheet.
</div>

What happens is that utility classes (margin, padding, etc) never overwrite the normal styling from stylesheets because they are imported after the core.

A few proposed solutions:

• Don't ever use padding / margin in blocks but only with utility classes
• Importants on utility classes
• Move utility and utility_spacers to the bottom of the main.scss

The last option has our preference, the only downside would be that a utility class always overwrite another class. If you want to change this you have to remove the utility class or deeper specify the class.

[dariusrosendahl]

Fixed in 2.0.1