A week ago I released yet another project: Loom, an OOCSS-inspired library for Stylus. At a first glance it might seem like I’m reinventing the wheel but there’s honestly not many frameworks out there for Stylus. Instead of having to rewrite or copy-paste essentially the same code over and over again I decided to put it all together and release it as a library.

I’m a big fan of inuitcss and SUIT and really like the direction they’ve taken with decoupling structure from theming, which means that there’s no styling whatsoever. In my experience it always gets a bit messy when you have to add a dozen or so variables for adding colors to things, especially since there’s no common naming conventions…

Speaking of naming conventions, Loom uses the modified BEM notation for general class names and the is- prefix for different states, like this:

<a class="button button--primary is-disabled" href="/">...</a>

It may not be the prettiest looking code, but it works like magic.

The library’s been designed to work in Internet Explorer 8+, but the default font size and spacing unit are set in rems and there’s no included vendor prefixes. I think it’s a better to encourage the use of build tools like Pixrem and autoprefixer than having to keep track of fallbacks in the actual code. normalize.css is also a great companion to Loom since it takes care of browser inconsistencies.