Bootstrap classes prefix

To prevent random mixing of styles maybe we should use prefix?

For example, .tb-span6 or .tb-row instead .span6 or .row?

.menu, .navbar is so common class names so it may a little confusing without prefix

[rotaris]

I may have misunderstood you, but CSS is contextual? As in, you can use the selector tr.foo to select a table row with class foo (i.e. <tr class="foo">) and you can use the selector div.foo to select <div class="foo">. That is, you can apply different styles to the same class depending on the what the class is attached to.

Can you please give a specific example (preferably with some code/markup)?

Yes, sure. You are right about CSS's contextual.

I meant if we have for example this block:

<div class="pagination">
  <ul>
    <li><a href="#">Prev</a></li>
    <li class="active">
      <a href="#">1</a>
    </li>
    <li><a href="#">Next</a></li>
  </ul>
</div>

It's pretty common. div block is a container, ul and li for elements.

In terms of Bootstrap it will style pagination block of Twitter Bootstrap pagination styles.

But what if we have another pagination styles and we don't want "connect" this pagination with Bootstrap pagination styles? In that case we have to create new name (for example, ".our-pagination").

What I suggest is to split Bootstrap styles from site's styles.

If we want to use our own pagination styles (or other styles) we use:
<div class="pagination"> or <div class="navbar">

But if we need to use Boostrap's styles we simply add its classes:
<div class="tb-pagination">

Also, this method visually separate what class we override or modify (site or Bootstrap) in CSS files:
.tb-btn {color:red;} /*tb - override*/
.btn {color:red;} /*no tb prefix - site's class*/
.pagination ul li {display:inline-block;} /*no tb prefix - site's class*/

[Merg1255]

I agree with Richard, there should be a prefix for classes.

[rotaris]

Ah I understand now @RichardVanStark. Prefixing Bootstrap classes not only for obviousness but also so that they don't clash with common classes that people may often use. Cool, gotcha! :)

Now that I better understand, this seems like a reasonable request to me.

P.S. I initially didn't get where the 'tb' came from — I'm guessing it stands for 'Twitter Bootstrap'?

[Merg1255]

yep :)
there should be a nickname for "twitter bootstrap" like TB2, pretty much like the H5BP.

[mdo]

There have been other issues filed for this as well, but there will be no prefixing of classes. Our components will be scoped appropriately (e.g., .table instead of generic table) in our CSS, but that's it.

[jonathaningram]

FYI, this also came up in #1235.

@markdotto your repo, your final call, but can you give further justification for your reasoning? Is it possible at the least to add a $prefix variable to the LESS files set to "" by default so that it can be customised by certain builds if needed on some sites?

Also, it seems that in #1026, @fat has said that he'll use twb for data prefixes.

i really agree with this. the names used in the bootstrap clash with my other stylesheets and mess things up. if you were to have a complex application with many pages and material on it and decide to use the bootstrap for the topnav only (for example) the bootstrap has other tags in them and will modify things that you dont want modified. I was thinking either add a prefix or split the stylesheet into peices , for example, all css for topnav as one css file, all tab css in another, all css for controls such as textbox ,buttons, etc as another file and all other generic stuff in another.

[cgunther]

If you only want specific components, create a custom build: http://markdotto.com/bs2/docs/download.html

nice i love it thanks!

[mcmire]

@markdotto Even if you don't namespace the CSS, would it be possible to update http://twitter.github.com/bootstrap/download.html so that we can add a namespace if we want to? Like others have said, it is not enough to make styling tables etc. opt-in, because it is perfectly possible for something, maybe not my CSS, but some other CSS in my application to clash with some class in Bootstrap.

[DougPuchalski]

The class names are short enough, i.e. .btn, .label and yet .table that there will be conflicts in many apps. What I don't understand is why someone would go to the effort of providing such a great library to the community but be completely averse to a basic concept that would greatly increase its ease of integration and interoperability.

There is a very valid reason for prefixing classes. I'm willing to bet there is no reason to not to.

[owenallenaz]

Since bootstrap is built using less, it makes it very simple to fix this whole namespacing issue. In my case I take the compiled .css file (bootstrap.css and bootstrap-responsive.css) and wrap the entirety of it in a single class and then run it through a less compiler again. This way I only have to modify 2 files to namespace the whole deal.

See this stackoverflow - http://stackoverflow.com/questions/8288463/wrap-a-less-css-definitions-in-a-namespace/10971228#10971228

[yosmanyga]

Sometime I have to override a lot of bootstrap css, just because of the conflicts with other libraries like jquery-visualize (label tag, etc).

+1 for adding a $prefix variable.