Twitter Bootstrap "namespacing"

I recently ran into some trouble using Twitter Bootstrap for a legacy project.
The project used some very generic CSS class names which were also use by Twitter Bootstrap.
These generic class names caused UI clashes between the legacy styling and Twitter Bootstrap styling.

A fix to this kind of problem could be "namespacing" of the Twitter Bootstrap class names.
All you have to do is create a LESS file (e.g. style.less) which creates a parent class name for all the Twitter Bootstrap class names.

.tb-styles {
    @ import "bootstrap.less"; 
    /** remove the space between @ and import */
}

When compiled into a CSS file, the output should be something like the following example:

.tb-styles .table-condensed { /** properties */ }
/** other classes */

All you have to do is put a container element around the stuff which has to be styled using Twitter Bootstrap. This container element should have a class attribute according to the chosen prefix (.tb-styles in my example).

Example:

<div class="tb-styles">
    <table class="table-condensed">
        <!-- table body -->
    </table>
</div>

This causes some bloat in your output, but it's an easy way to avoid naming collisions in your class names.