Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bootstrap classes prefix #1287

Closed
ghost opened this issue Jan 27, 2012 · 27 comments
Closed

Bootstrap classes prefix #1287

ghost opened this issue Jan 27, 2012 · 27 comments
Labels

Comments

@ghost
Copy link

ghost commented Jan 27, 2012

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
Copy link

rotaris commented Jan 27, 2012

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)?

@ghost
Copy link
Author

ghost commented Jan 27, 2012

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
Copy link

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

@rotaris
Copy link

rotaris commented Jan 27, 2012

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
Copy link

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

@mdo
Copy link
Member

mdo commented Jan 27, 2012

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.

@mdo mdo closed this as completed Jan 27, 2012
@jonathaningram
Copy link
Contributor

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.

@ghost
Copy link

ghost commented Jan 29, 2012

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
Copy link
Contributor

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

@ghost
Copy link

ghost commented Jan 30, 2012

nice i love it thanks!

@mcmire
Copy link

mcmire commented Feb 13, 2012

@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
Copy link

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
Copy link

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
Copy link

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.

@faucamp
Copy link

faucamp commented Sep 12, 2012

I also ran into naming conflicts, so I wrote a small Python post-processing script to prefix all Bootstrap CSS selectors with a "namespace": http://longtermcache.blogspot.com/2012/08/adding-prefix-to-bootstrap-css-classes.html

...or directly from github: https://github.com/faucamp/bootstrap_namespace_prefixer

@billyzkid
Copy link

I agree with applying a css prefix. Is Bootstrap only intended to be used in applications built from scratch with Bootstrap in mind from the start? Every button in history uses a "btn" class.

Also, shouldn't then Bootstrap also use data-* attributes with the same prefix on their controls to avoid future naming conflicts there as well? data-target and data-toggle are pretty generic...

@pamelafox-coursera
Copy link

After spending more than a month porting a Bootstrap app over to Bootstrap 2 (documented in this blog post http://blog.pamelafox.org/2012/12/a-tale-of-two-bootstraps-lessons.html), I would very much be a fan of prefixed classes. Why?

Most developers that use CSS do not use a fancy build system or a modular architecture or clean code, and so when they use Bootstrap class names, they use it in a way that the CSS class names are intertwined into the spaghetti code, and it becomes much harder for developers later to find all the instances of those class names when they're working on the code and want to change the CSS (like upgrading Bootstrap versions). If those developers were forced to use namespaced class names from the beginning, then later developers would find it much easier to maintain the codebase.

It's true that if we all had good development practices, our application logic wouldn't be dependent on CSS class names, but we live in an imperfect world.

I will look into running a script to output prefixed class names or using a pre-processor to extend them in the meantime, but I would be a fan of Bootstrap itself doing this, because I think it will ultimately result in more maintainable code in the world.

(It's like when I worked on the Google Maps API - our first API added a bunch of ugly global variables into the window object, and we made sure that in the next API revision, we namespaced everything. It's better for developers.)

@cpidx
Copy link

cpidx commented Feb 10, 2013

I'm trying to create a plug-in application (like Google Maps) that runs on top of other websites. To stop conflicts I need to prefix all the classes, etc. in CSS. It looks like I'm going to have to prefix a ton of classes myself every time Bootstrap is updated.

@mrchess
Copy link

mrchess commented Feb 17, 2013

+1. Wish this could be revisited.

@boulox
Copy link
Contributor

boulox commented Feb 17, 2013

@mrchess bootstrap use less for css compilation

Actually you can easly do it with less. wrap the import .less files inside a prefixe class and you done :

.myprefixe {

// Core variables and mixins
@import "variables.less"; // Modify this for custom colors, font-sizes, etc
@import "mixins.less";

.......

// Utility classes
@import "utilities.less"; // Has to be last to override when necessary
@import "responsive-utilities.less";

}

@AndreasHeintze
Copy link

That doesn't help me much when I download the customized and compiled version here:
http://twitter.github.com/bootstrap/customize.html

So please add the option to add a prefix to this customized download.

@NgMike
Copy link

NgMike commented Mar 13, 2013

"There have been other issues filed for this as well, but there will be no prefixing of classes." The person who closed this issue doesn't have a clue about how developers work and how real world application development is conducted.

All of the best libraries prefix to avoid conflicts- fix the problem please.

@cpidx
Copy link

cpidx commented Mar 13, 2013

I agree with NgMike, except that I think this guy has plenty of experience. I think "he" just doesn't realize this is a standard practice and there's a lot of good reason for it.

@cpidx
Copy link

cpidx commented Mar 13, 2013

Basically, he's saying Bootstrap applications will not be compatible with other Bootstrap applications... end of story.

@arturadib
Copy link

See #1235 (comment)

@sym3tri
Copy link

sym3tri commented Dec 5, 2013

+1 for prefixes

@TimothyGuo
Copy link

I've added prefix "tb-" to all the bootstrap class (for LESS) in v3.1.0. So after you compile the less files you will get something like ".tb-btn"
You can fork my project at https://github.com/TimothyGuo/tb--prefix-for-Bootstrap-v3.1.0--LESS-

@rmeschian
Copy link

+1 for prefixes

@twbs twbs locked and limited conversation to collaborators Jun 9, 2014
@cvrebert cvrebert added the css label Mar 16, 2015
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

No branches or pull requests