Agreed. Too many hyphens, too much thinking.

Compare "span4" vs "pure-u-1-3"

It seems right to point out that in Bootstrap 3, "span4" will become "col-sm-4".

Speaking of class-naming, has anybody come up with a good naming-scheme for classes used to add padding (or margins) to elements?

Sometimes I've create things like this: .pad_10_5_20_10 to avoid having to declare each one separately, but I'm sure there's a more-elegant way to do it. Of course, I can always define that padding directly in a more-generic class-name like .sidebar .... but there are cases where a pad class is more-desirable.

I've adopted the 'BEM' way of naming my css classes and so on. It's pretty convenient, and it grows on you pretty quickly. I hope this helps - http://csswizardry.com/2013/01/mindbemding-getting-your-head...

Try the OOCSS classes:

/spacing.css/ /* spacing helpers p,m = padding,margin a,t,r,b,l,h,v = all,top,right,bottom,left,horizontal,vertical s,m,l,n = small(5px),medium(10px),large(20px),none(0px) */

https://gist.github.com/cloudchen/5626174

Pretty good approach. Thanks for the link.

What irks you about it?

There is too much options [0] and it's more flexible than it should be. I know , it sounds weird but with bootstrap all you have is 12 columns and when you have less options it's easy to plan.

Maybe the other problem is : Units are not in multiplies of 5 and that forces you unnecessarily to think. If it would be in fixed units like bootstrap or in multiplies of 5 ( pure-u-3-25 etc.) i would be less thinking while deciding the length of some div.

[0] : http://yuilibrary.com/yui/docs/cssgrids/#unit-sizes

It just seems a tad unnecessary.

Why not use something like "2-cols/2-columns/pure-2"?

The idea is that you can combine columns of different sizes. If you want a column of 1/3 of the width and another of 2/3, then you just need to add pure-u-1-3 and pure-u-2-3. Maybe you're right and the "u" is unnecessary.

I'd prefer something more explicit, personally.

pure-row, pure-col-1-2.....