css- conflict in css styles with another css file

Question

I'm working on a website ,the problem is this . I've some div s and tables in my page .

I've written some classes and styles for them and make them looks like the way I want .

then I add a jquery plugin and it had a css file . I include it and a lots of my styles get ruined and changed .

I used !important at class names , try to edit them and it soleve some of them but most of them are still bad .

Is there any way I make the styles separate ? a way to make the jquery css files only work for it self and doesn't effect the whole page ?

I really need more information, I can't smell your problem. Is the plugin really necessary? Does it need the .css file or can you delete it? Have you tried renaming your classes? — Nick
– Nick, Commented Dec 11, 2014 at 8:23

errand · Accepted Answer · 2014-12-11 08:33:36Z

no beer and no code makes homer go crazy! there are two options, why the foreign css is fuckin' up your design.

1st - you use the same class and id names.

this could be easily countered by changing your class names to something unique. i usually add a prefix to my classes and id's to achieve that...

2nd - the included plugin styles the elements itself and makes no use of class names or ids

this can be countered in changing the css loading order. first the plugin, second your own stylesheet.

according to http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/ : The last rule defined overrides any previous, conflicting rules.

if it's still messing up with some of your elements, then you probably haven't designed those elements in your css and therefore take the other style.

nevertheless, the best approach would be, to take the plugin stylesheet and strip it of everything, that conflicts with your stylsheet, so that you have no more conflicting rules!

Tomer Almog · Accepted Answer · 2014-12-11 08:37:16Z

2

you can:

Change your class names
Make sure you include your css after the plugin css (so you override the plugin)
Create a class name for your page and use nested class names (.page-name div.className)
Inspect the elements with something like firebug or any other developer tool and see how the plugin css is overriding your css (with !important, longer nesting or just because it was declared later).

answered Dec 11, 2014 at 8:37

Tomer Almog

3,8783 gold badges33 silver badges37 bronze badges

Collectives™ on Stack Overflow

css- conflict in css styles with another css file

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related