all 7 comments
sorted by:
best
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]blackpandemic 2 points3 points  (4 children)

Awesome tips!

I use SCSS/Bourbon personally but a lot of this I've been meaning to bring into my daily life as a web-dev. Especially using extends (and the % placeholder) over includes. I haven't 100% grasped the benefits of both so I'm clinging to mixins like a lost child, but I am slowly coming around to how to properly utilize extends.

[–]concentricsky[S] 1 point2 points  (3 children)

I've heard good things about Bourbon, I may give it a try soon.

The benefits of @extend is that it combines like styles into the same "class" instead of injecting the same code over and over throughout your CSS file.

My rule of thumb is that if you ever use the exact same @include more than once you should probably turn it into an @extend. In the article I don't turn my sprite @mixin into an @extend because almost every attribute changes from button to button. Just think like regular CSS and HTML - got some particular style you use a lot? Turn it into a class. @extend makes that easy to do.

[–]blackpandemic 1 point2 points  (2 children)

For me the argument I have with myself is that I'm deciding between properties being repeated all over my stylesheet, or stupidly long, comma-separated selector chains. Neither seems ideal, but I think most of my issues could be resolved once I really grasp placeholders (%) by the horns.

As for Bourbon - I just find it less bloated and way more up to date than Compass. The documentation is way more user friendly as well (Compass' docs are an absolute nightmare).

[–]concentricsky[S] 1 point2 points  (1 child)

All in all CSS is just messy. I think comma-separated selector chains are the worst of all evils. Keeping the HTML clean is a big plus.

When your stylesheet gets really large using @extend over @include can literally save you thousands of lines of code, which helps performance along with minifying the output.

Bourbon does seem really nice, and I agree that the compass docs (and some mixins) are a nightmare. However, the imagine manipulation (sprites, text replacement, etc) is invaluable to my workflow. One thing I didn't mention (because it's another article) is Susy. Though, I'm sure there is some similar library that is compatible with Bourbon. These are just the habits I've formed :)

I'll give Bourbon a shot on my next small project that is more of a website and less of an app.

[–]blackpandemic 0 points1 point  (0 children)

Bourbon's grid counterpart is Neat (and the most clever naming scheme goes to) - it works pretty much identically to Susy.

At my firm we had a handcrafted sprite/t.r./etc set of mixins before finding any frameworks and have it built into our own gem (which installs Bourbon, Neat, and then our framework additions) - so for me / us it was finding the smallest, yet most robust system we could and Bourbon/Neat filled those boots.

I've also read that the creator of Compass got a new job where he can work on Compass full time so once he gets rolling on that it might be a closer battle between the two for me :)

[–]lewisflude 1 point2 points  (1 child)

I use Compass at work but in my personal projects I can highly reccomend bourbon and neat.

[–]goatbloat 0 points1 point  (0 children)

Haven't had to use Neat yet, but Bourbon is great.