current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Code Review Stack Exchange is a question and answer site for peer programmer code reviews. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top
up vote 1 down vote favorite

I am using the universal selector in CSS:

#containerDiv.containerTable tr td *
{
max-width:240px;
}

But Visual Studio suggests:

"Performance: Never use the universal selector. It has a big negative impact on browser rendering"

Will this have such a big impact? If so how can I overcome this? I have used * before and I have not seen any noticeable impact.

share|improve this question
    
Are you trying to set the max-width of tds or of their inner elements? – Spike Oct 9 '15 at 10:46
    
All elements that anyone adds into the td – vignesh Oct 9 '15 at 10:58
up vote 4 down vote accepted

The problem with the universal selector is that... it's universal. It's affecting all descendants, present and future. Impact is not really noticeable in small scale, but when your app starts to grow (like packing more and more stuff in <td>), or if fast rendering is critical (like say render at 60fps for smooth animation), then the effects will show.

The way you're asking this question seems to imply that you're using tables for layout. Otherwise, <td> content shouldn't be that many to warrant a universal selector. Don't use tables for layouting. Tables don't get rendered until all the markup of the table (from <table> to </table>) is parsed. In the meantime, all you will be seeing is a big blank space. Not good.

share|improve this answer
up vote 2 down vote

Like most things micro-soft and browser, this is a bit out of date. You aren't going to kill your page with the * selector if it's used sparingly and / or scoped.

Having said that, you could probably could go crazy it with the * selector as css selectors are evaluated right to left - meaning that each rule that ends with a * will need to be checked for every element the page renders, making it the least efficient thing to end with. Combine this with using it on every selector and nesting it deeply and you probably could jam things up.

Separately, I'd assess the other part of the selector, putting a class on each <td>: <td class='my-table-cell'> would make for a much nicer selector: more modular and therefore easier to re-use; easier to understand; and less specific.

.my-table-cell *

share|improve this answer
up vote 1 down vote

Testing it reveals that "sweating over the selectors used in modern browsers is futile; most selection methods are now so fast it’s really not worth spending much time over." Source

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.