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

add prefix to all css tags to avoid name collision #1235

Closed
sarmenhb opened this Issue Jan 26, 2012 · 32 comments

Comments

Projects
None yet
@sarmenhb

sarmenhb commented Jan 26, 2012

When i add the bootstrap stylesheet into my application, the bootstrap overrides all other tags i had defined in other stylesheets. it would be nice for the bootstrap to have a name prefix to all defined tags that way naming collisions dont occur.

@mdo

This comment has been minimized.

Show comment
Hide comment
@mdo

mdo Jan 26, 2012

Member

Definitely won't be doing that. 2.0 provides better defaults and namespaces a few other key elements with base classes, but that's it.

Member

mdo commented Jan 26, 2012

Definitely won't be doing that. 2.0 provides better defaults and namespaces a few other key elements with base classes, but that's it.

@mdo mdo closed this Jan 26, 2012

This was referenced Jul 22, 2013

@Surbma

This comment has been minimized.

Show comment
Hide comment
@Surbma

Surbma Jul 22, 2013

I also +1 for prefixing all classes. It can be done with Bootstrap 3.0. Please!

Surbma commented Jul 22, 2013

I also +1 for prefixing all classes. It can be done with Bootstrap 3.0. Please!

@zdroid

This comment has been minimized.

Show comment
Hide comment
@zdroid

zdroid Jul 22, 2013

This isn't needed. Reason - Bootstrap is made to be main CSS framework for web apps. Bootstrap isn't small library, it's complete framework. Prefixing classes is stupid and non-semantic.

zdroid commented Jul 22, 2013

This isn't needed. Reason - Bootstrap is made to be main CSS framework for web apps. Bootstrap isn't small library, it's complete framework. Prefixing classes is stupid and non-semantic.

@Surbma

This comment has been minimized.

Show comment
Hide comment
@Surbma

Surbma Jul 22, 2013

@zdroid I understand your point of view. However Bootstrap can be used as a small library to extend an existing theme's style. That's exactly how I use Bootstrap. So prefixing is not stupid, it can be very-very useful in some cases.

I also understand, that mainly it is used as a complete framework. I can see a solution, if there will be an option on the Customize page for prefixing all classes. It could be a checkbox if I want to have all the styles with prefix or without. Of course, the default setting will be without any prefix.

In this case Bootstrap can be used for all manner. Do you agree, that it will let other developers to use Bootstrap on more projects? It is just a small feature and can help thousands of developers.

Surbma commented Jul 22, 2013

@zdroid I understand your point of view. However Bootstrap can be used as a small library to extend an existing theme's style. That's exactly how I use Bootstrap. So prefixing is not stupid, it can be very-very useful in some cases.

I also understand, that mainly it is used as a complete framework. I can see a solution, if there will be an option on the Customize page for prefixing all classes. It could be a checkbox if I want to have all the styles with prefix or without. Of course, the default setting will be without any prefix.

In this case Bootstrap can be used for all manner. Do you agree, that it will let other developers to use Bootstrap on more projects? It is just a small feature and can help thousands of developers.

@mdo

This comment has been minimized.

Show comment
Hide comment
@mdo

mdo Jul 22, 2013

Member

@zdroid It's not stupid, and it's not non-semantic. Keep your demeaning opinions to yourself when you comment here—this isn't the place for it and I won't stand for it.

Member

mdo commented Jul 22, 2013

@zdroid It's not stupid, and it's not non-semantic. Keep your demeaning opinions to yourself when you comment here—this isn't the place for it and I won't stand for it.

@zdroid

This comment has been minimized.

Show comment
Hide comment
@zdroid

zdroid Jul 22, 2013

@mdo Sorry if I sound aggressive. I just want to point that prefixing isn't needed. If someone just have Bootstrap as customized small lib (s)he can replace names of all classes with -bs- prefix (all modern editors have the multi-replace feature).

@Surbma Just dowload wanted CSS and then prefix class names.

zdroid commented Jul 22, 2013

@mdo Sorry if I sound aggressive. I just want to point that prefixing isn't needed. If someone just have Bootstrap as customized small lib (s)he can replace names of all classes with -bs- prefix (all modern editors have the multi-replace feature).

@Surbma Just dowload wanted CSS and then prefix class names.

@mdo

This comment has been minimized.

Show comment
Hide comment
@mdo

mdo Jul 22, 2013

Member

@zdroid What would you find and replace—a .? I don't think that's a very feasible solution. Finding and replacing across an entire directory isn't doable without someone to easily modify.

Member

mdo commented Jul 22, 2013

@zdroid What would you find and replace—a .? I don't think that's a very feasible solution. Finding and replacing across an entire directory isn't doable without someone to easily modify.

@zdroid

This comment has been minimized.

Show comment
Hide comment
@zdroid

zdroid Jul 22, 2013

Hmm. Than make BS Mini. Remove all big things, just keep the most-needed
ones and prefix classes, like in Pure. I don't have any other idea.

2013/7/22 Mark Otto notifications@github.com

@zdroid https://github.com/ZDroid What would you find and replace—a .?
I don't think that's a very feasible solution. Finding and replacing across
an entire directory isn't doable without someone to easily modify.


Reply to this email directly or view it on GitHubhttps://github.com/twbs/bootstrap/issues/1235#issuecomment-21371708
.

Zlatan Vasović - ZDroid

zdroid commented Jul 22, 2013

Hmm. Than make BS Mini. Remove all big things, just keep the most-needed
ones and prefix classes, like in Pure. I don't have any other idea.

2013/7/22 Mark Otto notifications@github.com

@zdroid https://github.com/ZDroid What would you find and replace—a .?
I don't think that's a very feasible solution. Finding and replacing across
an entire directory isn't doable without someone to easily modify.


Reply to this email directly or view it on GitHubhttps://github.com/twbs/bootstrap/issues/1235#issuecomment-21371708
.

Zlatan Vasović - ZDroid

@mdo

This comment has been minimized.

Show comment
Hide comment
@mdo

mdo Jul 22, 2013

Member

How does a new library solve the problem of conflicting namespaces, @zdroid? Besides, the prefix thing is something that could be optional I imagine—we set it to nothing by default, but folks could customize it.

Member

mdo commented Jul 22, 2013

How does a new library solve the problem of conflicting namespaces, @zdroid? Besides, the prefix thing is something that could be optional I imagine—we set it to nothing by default, but folks could customize it.

@apfelbox

This comment has been minimized.

Show comment
Hide comment
@apfelbox

apfelbox Jul 22, 2013

Well, you could use a variable for that.

.#{prefix}modal etc and just set $prefix: "" by default (I only use SASS, so I am not sure about the correct LESS syntax).
Would involve a one-time manual editing of all class names, though.

apfelbox commented Jul 22, 2013

Well, you could use a variable for that.

.#{prefix}modal etc and just set $prefix: "" by default (I only use SASS, so I am not sure about the correct LESS syntax).
Would involve a one-time manual editing of all class names, though.

@mdo

This comment has been minimized.

Show comment
Hide comment
@mdo

mdo Jul 22, 2013

Member

@apfelbox Yup, that's the idea, if we go with the option to prefix.

Member

mdo commented Jul 22, 2013

@apfelbox Yup, that's the idea, if we go with the option to prefix.

@zdroid

This comment has been minimized.

Show comment
Hide comment
@zdroid

zdroid Jul 22, 2013

Good idea.

2013/7/22 Mark Otto notifications@github.com

@apfelbox https://github.com/apfelbox Yup, that's the idea, if we go
with the option to prefix.


Reply to this email directly or view it on GitHubhttps://github.com/twbs/bootstrap/issues/1235#issuecomment-21373129
.

Zlatan Vasović - ZDroid

zdroid commented Jul 22, 2013

Good idea.

2013/7/22 Mark Otto notifications@github.com

@apfelbox https://github.com/apfelbox Yup, that's the idea, if we go
with the option to prefix.


Reply to this email directly or view it on GitHubhttps://github.com/twbs/bootstrap/issues/1235#issuecomment-21373129
.

Zlatan Vasović - ZDroid

@cvrebert cvrebert referenced this issue Aug 30, 2013

Closed

CSS scope? #10304

@silviu-burcea

This comment has been minimized.

Show comment
Hide comment
@silviu-burcea

silviu-burcea Aug 30, 2013

I am also using TB in some parts of my pages and I really hope that CSS scope will make it into master. If someone doesn't really need it, CSS scope can be an empty string and the problem is solved. I don't think it's so much work to do and the overhead should be 0.

silviu-burcea commented Aug 30, 2013

I am also using TB in some parts of my pages and I really hope that CSS scope will make it into master. If someone doesn't really need it, CSS scope can be an empty string and the problem is solved. I don't think it's so much work to do and the overhead should be 0.

@andythenorth

This comment has been minimized.

Show comment
Hide comment
@andythenorth

andythenorth Sep 4, 2013

+1 to optional prefix. Retrofitting Bootstrap to an existing app is quite different to starting from scratch with it (have done both).

Optional prefix allows selective migration to Bootstrap without blocking releases for weeks/months of QA and fixes on the skin.

Prefix is also defensive against other libraries (or user-embedded stuff) that might be badly behaved about class names.

Currently considering a compilation step that mangles prefixes on via python or such. Probably horribly ugly :)

andythenorth commented Sep 4, 2013

+1 to optional prefix. Retrofitting Bootstrap to an existing app is quite different to starting from scratch with it (have done both).

Optional prefix allows selective migration to Bootstrap without blocking releases for weeks/months of QA and fixes on the skin.

Prefix is also defensive against other libraries (or user-embedded stuff) that might be badly behaved about class names.

Currently considering a compilation step that mangles prefixes on via python or such. Probably horribly ugly :)

@mdo

This comment has been minimized.

Show comment
Hide comment
@mdo

mdo Sep 4, 2013

Member

Not going to happen folks, sorry.

Member

mdo commented Sep 4, 2013

Not going to happen folks, sorry.

@silviu-burcea

This comment has been minimized.

Show comment
Hide comment
@silviu-burcea

silviu-burcea Sep 5, 2013

Are there any reasons?

silviu-burcea commented Sep 5, 2013

Are there any reasons?

@arturadib

This comment has been minimized.

Show comment
Hide comment
@arturadib

arturadib Oct 2, 2013

Just wanted to add an argument for namespacing I haven't seen yet- In addition to collision issues, the lack of class prefixes makes it incredibly hard to pluck Bootstrap out of one's code base, so you're essentially committed to Bootstrap for life.

With prefixes you could do a global search and identify exactly what HTML files/elements made use of it, and make changes accordingly.

arturadib commented Oct 2, 2013

Just wanted to add an argument for namespacing I haven't seen yet- In addition to collision issues, the lack of class prefixes makes it incredibly hard to pluck Bootstrap out of one's code base, so you're essentially committed to Bootstrap for life.

With prefixes you could do a global search and identify exactly what HTML files/elements made use of it, and make changes accordingly.

@Surbma

This comment has been minimized.

Show comment
Hide comment
@Surbma

Surbma Oct 3, 2013

@arturadib Thank you for your point of view! You are absolutely right. I just want to add, if somebody makes a complete webdesign based on Bootstrap, that is fine without any prefixes, since the theme is 100% Bootstrap.

Prefixing makes sense when you want to use just part of it to extend a theme. I'm working with WordPress and I have made a Twitter Bootstrap plugin just for the special effects: tabs, collapse, modal, buttons, etc. So for me, prefix would be very useful not to conflict with themes, as this plugin not made for one special theme, but for many WordPress themes. It is essential for me.

I just don't understand if a solution would be beneficial for a lot of developers and this solution will not have any negative effect for those who doesn't need it, than why one not would make it possible? It could be a simple checkbox on the Customize page if we want to have prefix or not. Of course, the default setting would be without prefix. It's that simple. Everybody will be happy! :)

Surbma commented Oct 3, 2013

@arturadib Thank you for your point of view! You are absolutely right. I just want to add, if somebody makes a complete webdesign based on Bootstrap, that is fine without any prefixes, since the theme is 100% Bootstrap.

Prefixing makes sense when you want to use just part of it to extend a theme. I'm working with WordPress and I have made a Twitter Bootstrap plugin just for the special effects: tabs, collapse, modal, buttons, etc. So for me, prefix would be very useful not to conflict with themes, as this plugin not made for one special theme, but for many WordPress themes. It is essential for me.

I just don't understand if a solution would be beneficial for a lot of developers and this solution will not have any negative effect for those who doesn't need it, than why one not would make it possible? It could be a simple checkbox on the Customize page if we want to have prefix or not. Of course, the default setting would be without prefix. It's that simple. Everybody will be happy! :)

@ghost

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost Nov 6, 2013

If anyone is still interested, I've made it an online service. Simply enter a prefix and paste your stylesheet, insta-get the prefixed version. Try it here: http://www.css-prefix.com/
Feedbacks are welcome.

ghost commented Nov 6, 2013

If anyone is still interested, I've made it an online service. Simply enter a prefix and paste your stylesheet, insta-get the prefixed version. Try it here: http://www.css-prefix.com/
Feedbacks are welcome.

@FagnerMartinsBrack

This comment has been minimized.

Show comment
Hide comment
@FagnerMartinsBrack

FagnerMartinsBrack Nov 6, 2013

@germainguglielmetti
I suppose .aaa as prefix and .test{} should result into .aaa-test{} or something like that, otherwise you are increasing specificity with no reason. Currently it results into .aaa .test{}.

FagnerMartinsBrack commented Nov 6, 2013

@germainguglielmetti
I suppose .aaa as prefix and .test{} should result into .aaa-test{} or something like that, otherwise you are increasing specificity with no reason. Currently it results into .aaa .test{}.

@ghost

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost Nov 6, 2013

It's .aaa .test{} on purpose, but I could easily remove the extra white space and let the user type it (or type a dash as per your suggestion). I'll post as soon as ready!

ghost commented Nov 6, 2013

It's .aaa .test{} on purpose, but I could easily remove the extra white space and let the user type it (or type a dash as per your suggestion). I'll post as soon as ready!

@FagnerMartinsBrack

This comment has been minimized.

Show comment
Hide comment
@FagnerMartinsBrack

FagnerMartinsBrack Nov 6, 2013

I don't want to create too much noise for something not related to this project, but the tool does not solve the issue as it stands.

FagnerMartinsBrack commented Nov 6, 2013

I don't want to create too much noise for something not related to this project, but the tool does not solve the issue as it stands.

@arturadib

This comment has been minimized.

Show comment
Hide comment
@arturadib

arturadib Nov 6, 2013

@germainguglielmetti Lots of potential, but I agree with @FagnerMartinsBrack – as it stands it doesn't solve the problem. We need a prefix in the name, without incurring side-effects (i.e. additional selector levels).

arturadib commented Nov 6, 2013

@germainguglielmetti Lots of potential, but I agree with @FagnerMartinsBrack – as it stands it doesn't solve the problem. We need a prefix in the name, without incurring side-effects (i.e. additional selector levels).

@zdroid

This comment has been minimized.

Show comment
Hide comment
@zdroid

zdroid Nov 6, 2013

I found a good solution. Class selectors should be: .@{bs-prefix}selector { ... } and add @bs-prefix variable to variables.less. Default content should be blank. Prefix version should have bs- as prefix.

@mdo Am I right?

zdroid commented Nov 6, 2013

I found a good solution. Class selectors should be: .@{bs-prefix}selector { ... } and add @bs-prefix variable to variables.less. Default content should be blank. Prefix version should have bs- as prefix.

@mdo Am I right?

@ghost

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost Nov 6, 2013

@arturadib I've updated the prototype so that the prefix can be user-defined (dash, space, nothing...) does it help?

ghost commented Nov 6, 2013

@arturadib I've updated the prototype so that the prefix can be user-defined (dash, space, nothing...) does it help?

@apfelbox

This comment has been minimized.

Show comment
Hide comment
@apfelbox

apfelbox Nov 11, 2013

@zdroid that was already suggested 4 months ago, but yes.

apfelbox commented Nov 11, 2013

@zdroid that was already suggested 4 months ago, but yes.

@zdroid

This comment has been minimized.

Show comment
Hide comment
@zdroid

zdroid Nov 11, 2013

@apfelbox I know, I'm justing pointing to less version.

zdroid commented Nov 11, 2013

@apfelbox I know, I'm justing pointing to less version.

@ghost

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost Nov 11, 2013

Szükségünk van egy előtag a nevét, anélkül mellékhatások (pl. további választó szint)hogy már javasolták 4 hónappal ezelőtt, de igen.

ghost commented Nov 11, 2013

Szükségünk van egy előtag a nevét, anélkül mellékhatások (pl. további választó szint)hogy már javasolták 4 hónappal ezelőtt, de igen.

@donaldpipowitch

This comment has been minimized.

Show comment
Hide comment
@donaldpipowitch

donaldpipowitch Nov 21, 2013

Contributor

Even if you use Bootstrap as the only framework in your project, prefixing would make upgrading a lot easier. It is just useful to see how and where you used Bootstrap in your project and prefixing makes it easier to find the right places.

Contributor

donaldpipowitch commented Nov 21, 2013

Even if you use Bootstrap as the only framework in your project, prefixing would make upgrading a lot easier. It is just useful to see how and where you used Bootstrap in your project and prefixing makes it easier to find the right places.

@pparavicini

This comment has been minimized.

Show comment
Hide comment
@pparavicini

pparavicini Feb 27, 2014

+1 for prefixing. I am trying to learn Bootstrap for quick prototyping, but most of the projects in which I work are highly custom look&feels where our css gurus want to use their own stylesheet. It would increase adoption of bootstrap if one could use it selectively without risking collisions with other stylesheet naming conventions. That said, thanks for the framework, it is certainly quite useful.

pparavicini commented Feb 27, 2014

+1 for prefixing. I am trying to learn Bootstrap for quick prototyping, but most of the projects in which I work are highly custom look&feels where our css gurus want to use their own stylesheet. It would increase adoption of bootstrap if one could use it selectively without risking collisions with other stylesheet naming conventions. That said, thanks for the framework, it is certainly quite useful.

@elacdude

This comment has been minimized.

Show comment
Hide comment
@elacdude

elacdude Mar 19, 2014

I also just registered so I can post that I would like prefixing support too. I think it is extremely immature for mdo to not consider it. I think he just wants people to be forced into using bootstrap for everything and he doesn't want it any other way. It's as if he is taking offense to people using some other style of coding. Sounds pretty immature to me...

My website template was not made with bootstrap. But I downloaded a plugin that uses it and it broke my template because of name collisions. I have been pulling my hair out for the past 4 hours trying to fix it. I just found this thread about prefixes and www.css-prefix.com may help. I'll try that.

elacdude commented Mar 19, 2014

I also just registered so I can post that I would like prefixing support too. I think it is extremely immature for mdo to not consider it. I think he just wants people to be forced into using bootstrap for everything and he doesn't want it any other way. It's as if he is taking offense to people using some other style of coding. Sounds pretty immature to me...

My website template was not made with bootstrap. But I downloaded a plugin that uses it and it broke my template because of name collisions. I have been pulling my hair out for the past 4 hours trying to fix it. I just found this thread about prefixes and www.css-prefix.com may help. I'll try that.

@tyomo4ka

This comment has been minimized.

Show comment
Hide comment
@tyomo4ka

tyomo4ka Jun 9, 2014

+1 for class prefixes

This feature is important for 3d party JS applications!

tyomo4ka commented Jun 9, 2014

+1 for class prefixes

This feature is important for 3d party JS applications!

@ghost

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost Jun 9, 2014

Hi Artem could you give an example of what css-prefix.com should output
with class prefixes support?

Thanks!

2014-06-09 17:54 GMT+02:00 Artem notifications@github.com:

+1 for class prefixes

This feature is important for 3d party JS applications!


Reply to this email directly or view it on GitHub
#1235 (comment).

ghost commented Jun 9, 2014

Hi Artem could you give an example of what css-prefix.com should output
with class prefixes support?

Thanks!

2014-06-09 17:54 GMT+02:00 Artem notifications@github.com:

+1 for class prefixes

This feature is important for 3d party JS applications!


Reply to this email directly or view it on GitHub
#1235 (comment).

@twbs twbs locked and limited conversation to collaborators Jun 9, 2014

@cvrebert cvrebert added the css label Mar 3, 2015

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.