0

In my asp.net mvc application, I'm using bundling for css. When I created a new css stylesheet and used the same id names as another page in the application, the styles on the first page were messed up.

I must be doing something wrong as I know that the same id can be used on different pages, but I don't find others having this problem when I searched the web on the subject.

Please help. Thanks.

Samuel
  • 3
  • 3
  • are you saying two CSS files that are styling with the same ID (yet intended to style different pages) are bundled together and causing styling problems on those IDs? If so, sounds like bundling the CSS is the problem. – MikeM Apr 26 '13 at 21:10
  • yes. two separate css files are bundled together each styling a particular id differently. The id, though the same is on different pages. bundling should work though regardless. don't know what i'm missing. – Samuel Apr 26 '13 at 21:17
  • yes, if the page is loading that bundled CSS file then all the styles (from both CSS files) are applied to that ID regardless of page. The solution is to only load the relevant CSS file (and not bundle) or of course use different IDs. – MikeM Apr 26 '13 at 21:23
  • what is the use of bundling then, if could inquire, since no one wants to keep IDs unique across all pages. when would i use bundling. – Samuel Apr 26 '13 at 21:28
  • bundling is a website performance / best practices technique, it helps minimize round trips to the server...see more here: https://developers.google.com/speed/docs/best-practices/rtt#CombineExternalCSS – MikeM Apr 26 '13 at 21:31
  • understood, but at the cost of keeping all IDs unique across pages? – Samuel Apr 26 '13 at 21:32
  • I think `id` re-use throughout an application is unusual and often overcome by using `class` instead. – MikeM Apr 26 '13 at 21:33
  • Please place your explanation of my issue in an answer, and I'd be happy to select it. Your were a great help. God bless. – Samuel Apr 26 '13 at 21:37

2 Answers2

1

The two CSS files are styling with the same ID (yet intended to style different pages) are bundled together and causing styling problems on those IDs.

This is because the page is loading the bundled CSS file then all the styles (from both CSS files) are applied to that ID regardless of page. The solution is to only load the relevant CSS file (and not bundle) or of course use different IDs.

id re-use throughout an application is unusual and often overcome by using class instead.

^^ summarized from comment discussion

MikeM
  • 27,227
  • 4
  • 64
  • 80
  • IMO - I would go with using different classes and leave the bundling. IDK why it'd ever be beneficial to have two different styles sheets using the same ID but different style because they are used on different pages... confusing. – MikeSmithDev Apr 26 '13 at 21:51
0

You should be able to look in your developer tools (firebug, chrome devtools) and see which styles from which stylesheets are messing things up. Or am I misunderstanding the problem?

Jeffery Mills
  • 189
  • 12
  • From chrome devtools it appears, for a given element, that it is combining the styling from the different stylesheets for a particular id and using that. I want it to only take the styling for the element with a given id from the css stylesheet that matches the page the element is on. – Samuel Apr 26 '13 at 21:26