CSS utility class - violation of separation of concerns

Consider this, when using CSS preprocessing:

.pull-right {
    float: right;
}

<div class="pull-right"><span>My content being pulled to the right</span></div>

Or

.pull-right {
    float: right;
}

.login {
    .pull-right;
}

<div class="login">My login form</div>

Dogmatically, I don't like that the utility class is bleeding style concerns into my document markup.

Pragmatically, I like the ease of the utility class and the fact I don't need an individual class to target each element I need pulled to the right.

Has anyone ever been burned by using utility classes in a big project, where the structure has to change and thus meaning changes to both the HTML markup and the styles?

If I'm embarking on a very large UI project, should I avoid utility classes that let style concerns into my markup?

This is a somewhat subjective question, which are not the best fit for Stack Overflow. But let me try to answer it this way.

1. "Has anyone ever been burned using utility classes in a big project." I have no doubt some people have been at some time. Any time you mix overt appearance classes into the html, a burning can follow if the appearance must change.

2. Utility classes have a third use than what you described. JavaScript can be used to add a class dynamically at some point that allows that class to influence the HTML content. This, of course, would be related to your first example but not hard coded into the html, and so avoid the issue you are asking about.

3. Finally, how to use it really depends on your needs and expectations. With your particular example, it is just as easy to add float: right to the .logo class than to use the utility mixin on it, because there is just one line of CSS code in that mixin. If there were ten lines, then using the mixin for .logo would make more sense. I assume bootstrap has that mixin defined as a straight class so that you have the flexibility to use it as you would like, either adding the class directly or as a mixin. If they intended it purely as a mixin their definition would have been .pull-right() (with the parenthesis) so that it did not create the option to add pull-right as a class on an element.

So whether you should avoid using it as a straight class all depends on what risk you are willing to take regarding the scenario you describe. You can be burned, but perhaps not. It all depends on the likelihood of something changing, how many times you introduce it into the HTML, and probably a few other factors I am not thinking of. Only you can evaluate the risk level to the reward level of whether to use it or not.