Jump to content

CSS efficiency question - nested rules


vineld

Recommended Posts

I am always trying to make my applications run as efficiently as possible and am trying to remove as many unnecessary operations as possible without making the code less readable, both for performance and environmental reasons (which is really one in the same in most cases).

 

Regarding CSS, which of the following two alternatives is the quickest:

 

.firstClass
{
     blabla
}
.secondClass
{
     blabla
}

 

 

 

.firstClass
{
     blabla
}
.firstClass htmlTag
{
     blabla
}

 

 

Will this ever make a difference? If so, then why? I know there are reasons why I might choose one over the other (and must in certain cases) but now I'm only talking about the performance.

Link to comment
https://forums.phpfreaks.com/topic/167682-css-efficiency-question-nested-rules/
Share on other sites

The difference really minuscule and it really doesn't matter which you choose when developing something on a small scale.  You're going to have to define secondClass wherever you need it inside your html, so that will increase the file size your user needs to receive (anywhere from a few bits to bytes, depending on how large the name is and how much you repeat).  However, if you're giving .firstClass htmlTag, then the browser engine has to look at the class, and look for each 'htmlTag' that exists within .firstClass (instead of just looking just for each .firstClass in the CSS).  There's really no concrete answer for such an insignificant thing.

People rarely have dialup anymore, and even then a byte isn't really an issue (especially when you see webpages that are KBs big.  Browsers typically handle coding differently.  There are larger things to worry about when writing code, which are more apparent in the more advanced web design, such as PHP and MySQL.  At this point, it's better to focus on your style.

If you know a little about PHP, echo and print can do the same thing.  Echo is slightly more efficient than print, though (since echo is just a construct).  Also, the difference betweeing use ' and " is important.  " is slightly less efficient since special commands can appear inside double quotes, so PHP must search for them.  Using ' takes the text as-is, no processing required.  Of course, the above are only different in terms of microseconds, but most programmers seem to ignore those nuances, since they're only worried about the product.

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.