[psychometry]

This is just absurd:

    div#alpha {
      @include span-columns(1);
    }

    div#beta {
      @include span-columns(11);
    }

    div#gamma {
      @include span-columns(2);
    }

    ...

How is this any better than col-xs-2, col-xs-4, etc.? I see absolutely no reason to obsess over semantic markup anymore. We all have work to do and grid frameworks help us actually get things done.

[framp]

In this way the HTML is static and when you have to change a presentation detail (like the width of the columns) you just have to edit the CSS - as it's meant to be.

[steveax]

Until you have a ton of automated tests. Then a markup (class) change breaks all the selectors used in the tests - not fun. I prefer to abstract the styling so I don't have to fix the tests if the styling needs to change.

[psychometry]

An HTML element can have both a class and an ID or multiple classes. Your tests should not have any knowledge of your framework's classes.

[steveax]

So your saying that tests should always rely only on the id attribute? Tell me how you target elements that have id attributes auto-generated by a framework either on the front end, Ember for instance, or the back end?

It's a nice idea, but falls over pretty spectacularly in the real world when you have a complicated web application.

[psychometry]

Read my comment again. You can select elements using whatever CSS/XPATH selectors you want. Whether those elements have additional presentational CSS classes on them is completely irrelevant since the selectors will still work.