Is it bad form to use IDs for solving CSS weight problems?

[Megalith]

I'm currently working on the theme for my WordPress site and have to stylize all of the loop's parts (post title, byline, content, "read more" button, etc.), and it's driving me absolutely crazy because everything is set up with different selectors and there's a lot of nested material. I've been trying to target each portion of the loop, but I end up with strange conflicts (links changing size when I simply added some code for them to change color when hovered over, etc.).

The only thing that has been working so far is if I wrap each part of the loop in its own ID as a means of increasing the weight of the styles applied. But is this a bad way of doing it? It feels like a lot of extra code.

[alt131]

Hi Megalith,
As a quick response, you are right about being uncomfortable having to add extra code - and being concerned about nesting. The other side is that if working with existing themes that may be your only option without re-writing the theme itself, and browser engines (well at least firefox) are now written so id's are stored in a hash which means they are actually fast and easy to access. (Note you should really only need to id the specific element you are targetting to increase the weight.)

Another option could be to take advantage of more advanced Level 3 Selectors [w3.org] (go to section 2 for a list).

... and to the "lurking" css-er currently working with wordpress a lot" Your experience is invaluable here. Can you make some comments about how you deal with this sort of issue?

[rocknbil]

I wrap each part of the loop in its own ID as a means of increasing the weight of the styles applied. But is this a bad way of doing it? It feels like a lot of extra code.

Yeah Wordpress themes drive me nuts. :-\ There's always a ton of selectors that aren't even used anywhere on some sites. The global reset seems to be a common approach, and I despise it. Documents have a natural flow, work with them and modify it as required. I have a few WP sites under my belt, some of which I've "cleaned up" so I use those as a baseline building out new themes. Generally my WP theme CSS ranges from 400 - 700 lines. </rant>

Can you first back up and see if there's some descendant method you can apply, like this?

.outer .content .post .some-class p a {}

That's excessive in a different way, but it may be specific enough to suit your needs. Personally I always try to take the path of least resistance, modifying the theme files as little as possible - if anything, stripping out a bunch of stuff (which is really a redesign, as alt131 says . . . )

[Megalith]

The theme I'm working on is actually completely custom.

The problem was that...well, I didn't understand CSS as well as I thought and wasn't using classes properly. Most things look about right now.

[not2easy]

You didn't mention the browser you use, but Firefox offers a Web Developer Toolbar that can show you the specific css that affects a given part of the viewed page, if that would help. When activated you just highlight the area you'd like to change and it will show you what to edit in the css. It will let you edit it while you view the page so you can play around with it (without actually altering your css file) until you like the results and then copy it from the viewer and paste it into your css file. Safari has a similar toolbar but I haven't used it as much.

If you do a lot of WordPress sites I suggest using Artisteer. The interface lets you create your own themes choosing colors, fonts layouts, buttons, everything. You can use it with Wordpress to build sites that don't look anything like a WP theme.