Semantic CSS With CSStyle

Oct 20, 2014 • 1 min read

CSStyle is interesting. It’s a set of SASS mixins that basically force you to write correct CSS. There are 6 main structures in CSStyle:

Components: Groups of styles like buttons, form inputs, etc.
Options: Modifications of component styles for different uses
Parts: Children of compenents
Tweaks: Reusable “tweaks” that can be applied to any compenent
Locations: Overrides for component styles based on where the component lives

Here’s a sample of some of some basic CSStyle applied to a button:

<a class="button --success">Save</a>
<a class="button --danger">Continue Without Saving</a>

/** SCSS **/
@include component(button) {
  background: blue;
  padding: 15px;

  @include option(success) {
    background: green;
  }

  @include option(danger) {
    background: red;
  }
}

As you can see above, we have a simple button component with an --option of success (green) or danger (red). CSStyle’s use of class prefixes makes it really clear that the option classes are variations of a compenent and should not be used for any other styling purposes.

Visit the CSStyle website to download the SASS mixins and start writing better CSS.

If you enjoyed this tutorial, please consider sponsoring my work on GitHub 🤗

Recommended Posts ✍🏻