- Less HTML clutter (caused by all those fragmented class names).
<button class="btn btn-primary btn-large btn-outline">Buy!</button>
- Descriptive classes (or no classes at all) in the HTML results in cleaner and easier to read HTML.
<button class="btn-call-to-action">Buy!</button>
- Easier to determine the look of the element by reading the
@include
name instead of deriving the info from all the individual properties.
@mixin button-style-ghost {
display: inline-block;
padding: .5rem;
border: 2px solid #333;
color: #333;
font-weight:bold;
background: transparent;
}
-
Make dependencies visible by moving the patterns to separate files and only
@import
them when required. -
Use composition to build complex patterns by combining simple ones.
@mixin box-float {
@include box-rounded;
@include box-padded;
background: #fff;
box-shadow: 0 .25rem .5rem rgba(0,0,0,.25);
}
-
Keep style complexity in your CSS instead of your HTML, no need to edit the HTML when changing looks.
-
Impact of duplication in generated CSS is minimized by gzip. Also Mixins vs. Extends.
-
When old style patterns are no longer referenced they automatically stop taking up space in the CSS output.
-
The use of descriptive classes in your HTML instead of OO classes can work to enforce a more concise style. Having to name each element helps in determining if there might be too many similarly looking elements being used to achieve the same UX goal (10 different call to action button styles).
Honestly, this is how I code. All those class names for a single element drives me crazy, looks ugly as hell, and sure isn't easy to comprehend when troubleshooting.
Your method is dope.