-
-
Notifications
You must be signed in to change notification settings - Fork 78.9k
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
Comments
I may have misunderstood you, but CSS is contextual? As in, you can use the selector 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:
It's pretty common. 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: But if we need to use Boostrap's styles we simply add its classes: Also, this method visually separate what class we override or modify (site or Bootstrap) in CSS files: |
I agree with Richard, there should be a prefix for classes. |
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'? |
yep :) |
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., |
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 Also, it seems that in #1026, @fat has said that he'll use |
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. |
If you only want specific components, create a custom build: http://markdotto.com/bs2/docs/download.html |
nice i love it thanks! |
@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. |
The class names are short enough, i.e. There is a very valid reason for prefixing classes. I'm willing to bet there is no reason to not to. |
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 |
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. |
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 |
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... |
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.) |
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. |
+1. Wish this could be revisited. |
@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 ....... // Utility classes } |
That doesn't help me much when I download the customized and compiled version here: So please add the option to add a prefix to this customized download. |
"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. |
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. |
Basically, he's saying Bootstrap applications will not be compatible with other Bootstrap applications... end of story. |
See #1235 (comment) |
+1 for prefixes |
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" |
+1 for prefixes |
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 prefixThe text was updated successfully, but these errors were encountered: