CSS Conflicts and Overrides

[eluser]Fielder[/eluser]
When I've used other "plugins" and "frameworks" such as online form templates(wufoo), navigation menus, 960 grid systems, js frameworks such as extjs, etc... they all come with their own .css file to stylize their respective output. I'm running into a problem now where all these different .css files are starting to conflict with each other altering each others layout.

For instance, I'm loading

Code:

<?= css('reset.css'); ?>
<?= css('1000_20_10_10.css'); ?>
<?= css('grid.css'); ?>
<?= css('jquery.treeview.css'); ?>
<?= css('jquery.autocomplete.css'); ?>
<?= css('form.css'); ?>
<?= css('default.css'); ?>
<?= css('extjs/ext-all.css'); ?>
<?= css('extjs.css'); ?>

all of which may be used on a given view. And some of these .css are quite detailed and extensive that I couldn't possibly manually modify them to all work nicely together. I'm at a point now where extjs comes with some really nice grids and tables that I need to use, but their .css files are rearranging parts of the entire site.

What has you're experience been with css overrides and how to manage/make them live happily together?

[eluser]Colin Williams[/eluser]
I usually either just recreate the CSS provided or incorporate it nicely. I have a very peculiar way of organizing and writing markup and stylesheets, so I don't care much for using stuff like "grid systems" or "css frameworks." One of the reasons I don't is this one you've just experienced. None of this code was written specifically for your web site/application, so it's no wonder it doesn't work perfectly.

[eluser]jdfwarrior[/eluser]
@Colin: css frameworks have their place and can save a LOT of time when implemented correctly.

@Fielder: That's a LOT of includes. I'm sure there are probably quite a few .js includes to go with it as well. That's got to be killing site performance, is it not? I like to try all the different libraries and frameworks and such as well. I like playing with the, tweaking them, etc. However, as you can tell, if you start trying to use too many at once, things start acting quirky. Frameworks/Libraries/Plugins are nice, and save time, but looks like you have a large dependence on them. Maybe you should step back a little and not rely so much on frameworks and plugins to do EVERYTHING and create some of the stuff on your own that way you have control of all the css and can control how it all plays together.

[eluser]naren_nag[/eluser]
I see two problems:

No. 1: You seem to be using two grid css files

No. 2: The conflict could very well be happening because you are using both ext-js and jquery ... why don't you drop one and see if things are still looking good when only using the other.

And while it's fairly easy to plug things in from all over the place, I've found it's best to pick a javascript framework for a project and then figure out how to do everything with that, one, framework.

You could also try setting explicit css for the elements that are misbehaving when you include ext-js

I get the feeling that you are including different CSS/Javascript frameworks. In my experience, that's never a good idea.

cheers.

naren

[eluser]Fielder[/eluser]
JD, you don't want to see my js includes then.. it's quite a bit which is why i had posted another thread asking about how people managed or selectively loaded various js files to cut down on load times. The site actually seems to run well, at least until I recently added extjs which it seems to have slowed some. A lot of these frameworks I really don't know enough about to code myself, hence the benefit of simply using them. But I guess once I get to the end of the functioning project I can go back and start looking closely at them and breaking them down (all the while learning for myself) and restyle the layout specifics.

The jquery css file doesn't actually have any css code in it affecting the styled layout. But the extjs css and my default css are conflicting.

Thanks for the input. Ill have to live with it for now since its purely aesthetics right now.

[eluser]Colin Williams[/eluser]
@jdfwarrior Meh.. to each his own. On the scale from good to evil, I guess CSS frameworks are slightly on this side of good.

[eluser]oldroy[/eluser]
Fielder,

Here is how I got extjs to play with 960.gs

<code>
&lt;link href="&lt;?= base_url();?&gt;css/960.css" rel="stylesheet" type="text/css" /&gt;
&lt;link href="&lt;?= base_url();?&gt;css/text.css" rel="stylesheet" type="text/css" /&gt;
&lt;link href="&lt;?= base_url();?&gt;css/reset.css" rel="stylesheet" type="text/css" /&gt;
&lt;link href="&lt;?= base_url();?&gt;css/default3.css" rel="stylesheet" type="text/css" /&gt;
&lt;link href="&lt;?= base_url();?&gt;js/ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" /&gt;

</code>

any other order I had problems with. There are still a few conflicts. Just watch the css cascade in firebug and you can see where they bump into each other.

Also, unless your jquery css will likely conflict with your extjs css.