homepage Welcome to WebmasterWorld Guest from 54.226.180.223
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

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




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

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




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

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




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

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




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

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




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

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved