Specificity question 2

[j4606]

At work I was asked to copy over some styles today to a new web app. It would have been an easy job but I tend to want to fix things if I think their wrong. I like things running as efficiently as possible. I noticed the previous designer had qualified all his class names by tag and sometimes even his ids. Example:

TABLE.partsList TD.price
{
    text-align: right;
}

Maybe I'm wrong here but isn't this less efficient then the simpler/cleaner way of just using class names?

.partsList
{
    text-align: right;
}

I wouldn’t be able to understand why he would qualify a class name with a tag. Maybe he knew something I don't? I tried Google but I don't get too much information back expect for Mozilla. But could this work faster in ie? I've seen some crazy css tricks and tips, but this is new.

Thanks for the help.

 

[traingamer]

Maybe, but I'd be careful.

The original css will right align a td with a class of price within a table with a class of partsList.

Your css will right align everything with a class of partsList. Therefore if you assign that class to a table, all of the columns will be aligned right, not just the price column.

The original css allows you to define a style for an entire table (partsList) and then specifically override that for one column with a class of price. I'm willing to bet that there is a lot more css for table partsList that we haven't seen here.

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill

 

[Vragabond]

I've never heard of anything like that speeding up css parsing. The only thing I can think of is that the previous developer was just used to this kind of syntax. Very rarely I would specify a tag alongside the class:

1. When it is a list, Geckos seem to ignore the list-style-type property if it is given to anything but a named list (either ol or ul).
2. When I use the class in different circumstances and the class needs to behave differently when applied to one certain element. Then I will have a general class for all elements and a specific one for the special tag.

Why using dependencies? I have noticed a lot of people get hooked on dependencies too much. For instance, how often will you have to use an id within the other id. Since ids cannot exist in more than one instance in a page, that one id will most probably always be in the same spot. On the other hand, there are definitely legitimate reasons to use id within id dependencies.

Your dependency might be because .price class acts differently if it is not within the .partsList table. Or it is simply someone being hooked on too complex selectors. I would remove it like you did and see if anything changes.

Lastly, there's the cascading effect of specificity due to complexity. Say if I have #container and #content. If I say:
#container #content p { ... }
That has a very high specificity (according to SW 201)
So if I want to have a special paragraph within the content that will have to overwrite some default #content paragraph stuff I need to do this:
#container #content .special { ... }
And of course, the more elements you add, the more dependencies you need to include to maintain the high specificity. That could be the third reason why the developer had to overengineer that.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[j4606]

Thanks for the responses I think it is just someone being hooked on complex selectors. I'm going to go ahead and start cleaning up some of the mess I was given. I got this from moz dev central if anyone is interested.
Link:

http://developer.mozilla.org/en/docs/Writing_Efficient_CSS

Don't qualify ID-categorized rules with tag names or classes

If you have a style rule that has an ID selector as its key selector, don't bother also adding the tag name to the rule. IDs are unique, so you're slowing down the matching for no real reason.

    * BAD - button#backButton { }
    * BAD - .menu-left#newMenuIcon { }
    * GOOD - #backButton { }
    * GOOD - #newMenuIcon { } 

Don't qualify class-categorized rules with tag names

Similar to the rule above, all of our classes will be unique. The convention you should use is to include the tag name in the class name.

    * BAD - treecell.indented { }
    * GOOD - .treecell-indented { }

I think maybe the developer was selector happy. As far as I can see there is only one instance of each css class per page. I still haven’t been able to find out if selectors slow down ie or not. I've seen some crazy things in ie. Like inline styles working a lot faster than css inherited style. Maybe it was written like this to be compatible with some old browser or cause the dev learned to code when a style like this was needed. I don't know it’s a mystery but I've searched around with no results. Thanks for the input though.