Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

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



2:31 am on Feb 21, 2012 (gmt 0)

5+ Year Member

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.


7:41 am on Feb 21, 2012 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member

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?


4:57 pm on Feb 21, 2012 (gmt 0)

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member

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 . . . )


9:28 pm on Feb 25, 2012 (gmt 0)

5+ Year Member

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.


5:17 am on Feb 26, 2012 (gmt 0)

WebmasterWorld Administrator 5+ Year Member Top Contributors Of The Month

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.

Featured Threads

Hot Threads This Week

Hot Threads This Month