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

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • 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.