Twitter Bootstrap “namespacing”

Recentemente, tive alguns problemas ao usar o Twitter Bootstrap para um projeto legado.
O projeto usou alguns nomes de classe CSS muito genéricos que também foram usados ​​pelo Twitter Bootstrap.
Esses nomes de classe genéricos causaram conflitos de interface do usuário entre o estilo legado e o estilo do Twitter Bootstrap.

Uma solução para esse tipo de problema poderia ser o “namespace” dos nomes das classes do Twitter Bootstrap.
Tudo que você precisa fazer é criar um arquivo LESS (por exemplo, style.less) que cria um nome de classe pai para todos os nomes de classe do Twitter Bootstrap.

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

Quando compilado em um arquivo CSS, a saída deve ser algo como o seguinte exemplo:

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

Tudo que você precisa fazer é colocar um elemento de contêiner ao redor das coisas que devem ser estilizadas usando o Twitter Bootstrap. Este elemento recipiente deve ter um atributo de classe de acordo com o prefixo escolhido (.tb-styles no meu exemplo).

Exemplo:

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

Isso causa algum inchaço em sua saída, mas é uma maneira fácil de evitar colisões de nomes em seus nomes de classe.