This package takes a more functional CSS approach to Scss. Using a Scss mixin allows for easy configuration of your base styles to ensure that your helpers will match the look and feel of your project.
Since helpers should only be added using a Scss mixin you won't have to jump through extra hoops to add configuration. You can also pick and choose which helpers to add based on the needs of your project.
Which style you choose can depend a lot on your project and your needs. A functional CSS approach is beneficial in situations where you have a lot of control over your HTML/JSX/Pug... whatever you're using to write markup that eventually becomes HTML. Especially if you are using a component based framework.
Keep in mind that adding non-semantic classes to your HTML will result in tightly coupled markup. If your product manager tells you that now all headlines should be green instead of blue using style classes could make these updates tedious and time consuming. Its for this reason that I will not include classes that apply hard coded color styles.
Using a more stylesheet based approach is useful when you don't necessarily have control over your HTML. Like when you're working with a CMS where HTML structure is set in stone or dictated by your content team.
Its also beneficial to use a more stylesheet based approach when you are creating traditional HTML/CSS based applications without a framework. If you are not creating reusable components you likely have a lot of HTML that repeats throughout your site. Using a stylesheet based approach with a BEM or similar CSS methodology will be much easier to maintain down the road.
Sometimes when you are working with a CMS you need to update styles quickly and don't have time to update stylesheets. Functional CSS classes can allow you to make changes in a few seconds without having to update stylesheets and run the build process.
I usually find myself using more of a hybrid of these 2 approaches. Though I'm leaning towards a more functional approach these days in my React and Vue applications.
Keep in mind that each project will have its own set of constraints and all development tools come with some trade offs. Think about the pros and cons of each tool when you are deciding method to use.
I have added namespacing to avoid clashes with other frameworks. If you don't like the 'elr' prefix you are free to change it.