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

Comments

Projects
None yet
@ghost

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

This comment has been minimized.

Show comment
Hide comment
@rotaris

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

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

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost 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*/

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

This comment has been minimized.

Show comment
Hide comment
@Merg1255

Merg1255 Jan 27, 2012

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

Merg1255 commented Jan 27, 2012

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

@rotaris

This comment has been minimized.

Show comment
Hide comment
@rotaris

rotaris 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'?

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

This comment has been minimized.

Show comment
Hide comment
@Merg1255

Merg1255 Jan 27, 2012

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

Merg1255 commented Jan 27, 2012

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

@mdo

This comment has been minimized.

Show comment
Hide comment
@mdo

mdo Jan 27, 2012

Member

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.

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 Jan 27, 2012

@jonathaningram

This comment has been minimized.

Show comment
Hide comment
@jonathaningram

jonathaningram Jan 28, 2012

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.

Contributor

jonathaningram commented Jan 28, 2012

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.

@sarmenhb

This comment has been minimized.

Show comment
Hide comment
@sarmenhb

sarmenhb 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.

sarmenhb 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

This comment has been minimized.

Show comment
Hide comment
@cgunther

cgunther Jan 30, 2012

Contributor

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

Contributor

cgunther commented Jan 30, 2012

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

@sarmenhb

This comment has been minimized.

Show comment
Hide comment
@sarmenhb

sarmenhb Jan 30, 2012

nice i love it thanks!

sarmenhb commented Jan 30, 2012

nice i love it thanks!

@mcmire

This comment has been minimized.

Show comment
Hide comment
@mcmire

mcmire 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.

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.

@aceofspades

This comment has been minimized.

Show comment
Hide comment
@aceofspades

aceofspades Apr 6, 2012

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.

aceofspades commented Apr 6, 2012

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

This comment has been minimized.

Show comment
Hide comment
@owenallenaz

owenallenaz Jun 10, 2012

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

owenallenaz commented Jun 10, 2012

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

This comment has been minimized.

Show comment
Hide comment
@yosmanyga

yosmanyga Jul 7, 2012

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.

yosmanyga commented Jul 7, 2012

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

This comment has been minimized.

Show comment
Hide comment
@faucamp

faucamp 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

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

This comment has been minimized.

Show comment
Hide comment
@billyzkid

billyzkid Nov 20, 2012

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...

billyzkid commented Nov 20, 2012

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

This comment has been minimized.

Show comment
Hide comment
@pamelafox-coursera

pamelafox-coursera Dec 22, 2012

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

pamelafox-coursera commented Dec 22, 2012

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

@ghost

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost 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.

ghost 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

This comment has been minimized.

Show comment
Hide comment
@mrchess

mrchess Feb 17, 2013

+1. Wish this could be revisited.

mrchess commented Feb 17, 2013

+1. Wish this could be revisited.

@boulox

This comment has been minimized.

Show comment
Hide comment
@boulox

boulox Feb 17, 2013

Contributor

@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";

}

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

This comment has been minimized.

Show comment
Hide comment
@AndreasHeintze

AndreasHeintze Feb 22, 2013

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.

AndreasHeintze commented Feb 22, 2013

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

This comment has been minimized.

Show comment
Hide comment
@NgMike

NgMike 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.

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.

@ghost

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost 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.

ghost 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.

@ghost

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost Mar 13, 2013

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

ghost commented Mar 13, 2013

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

@arturadib

This comment has been minimized.

Show comment
Hide comment
@arturadib

arturadib commented Oct 2, 2013

@sym3tri

This comment has been minimized.

Show comment
Hide comment
@sym3tri

sym3tri Dec 5, 2013

+1 for prefixes

sym3tri commented Dec 5, 2013

+1 for prefixes

@TimothyGuo

This comment has been minimized.

Show comment
Hide comment
@TimothyGuo

TimothyGuo Feb 6, 2014

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-

TimothyGuo commented Feb 6, 2014

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

This comment has been minimized.

Show comment
Hide comment
@rmeschian

rmeschian May 12, 2014

+1 for prefixes

rmeschian commented May 12, 2014

+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.