CSS frameworks like Twitter's Bootstrap and Zurb's Foundation have become extremely popular over the last few years. Their popularity is well deserved. They are very well designed and fun to use. They also help speed up the development process and make it easy for non designers to build beautiful websites.
As much as I love working with Twitter Bootstrap I've decided to built my own using Sass mixins. I'm not as familiar with LESS or Stylus but you should be able to do this with your pre-processor of choice.
Here are some of the benefits of building your own reusable Sass library...
The Benefits
Establishing Your Own Look and Feel:
Every designer has a unique style. Websites built with Bootstrap and Foundation are beautiful, but each designer should establish their own unique look.
I have many styles and patterns that I use over and over in almost every project. Some of my favorite styles are semi-transparent borders on images, flat buttons, and round images. Some of these are available in Twitter Bootstrap but I find it easier to create my own styles for these effects.
Using my own styles also allows me to update my styles as trends change. Twitter just adopted a flatter aesthetic with the release of Bootstrap 3. If I decide I no longer what to use a flat design I will either need to stop using the framework or override the styles to create the feel that I want.
Using my own framework, I can update my design style as soon as I want. I could even create a specific set of mixins for various styles. For example, one set for flat styles and one set for vintage styles.
Semantic HTML:
For me, one of the biggest caveats of CSS frameworks is that they require a lot of additional HTML. To make a large alert button link in Bootstrap I may need to add three class attributes to the HTML.
I don't like to add non-semantic classes to my HTML. I find that they are hard to maintain in the long run and to me they are just as bad as inline styles.
I would rather build mixins that accept arguments for size and type so that I only need to add one class to my HTML. Or I might even be able to style the button element itself.
Lighter CSS:
With CSS frameworks we usually an additional stylesheet that contains a lot of rules that go unused. This adds unnecessary bloat to projects and can even slow down your website.
Since Sass mixins are not automatically added to your final CSS output, unused styles will not bloat your CSS. This gives you more control of your stylesheets.
Some Caveats
There are some potential issues with building your own Sass library. Obviously you will need to be very familiar with Sass or whichever pre-processor you decide to use for your library. Of course building your style library could be a great way to learn Sass.
Also, you will need to keep an eye on the CSS generated by your library. Sass generated CSS can be a little bloated especially if you are using Compass to accommodate old browsers.
I hope this article has given you some ideas for your Sass library. Here is the GitHub repository for my library https://github.com/Beth3346/drm-sass-utlilites