Question

I am sorry if my question is not overly clear.

I will first illustrate my question with an exmaple:

<div id="parent">
  /*This contains a dynamically generated amount of children from 1 - 200*/
  <div class="child"></div>
</div>

Is it best practice/faster to style each child using .child {} or using #parent div {}

If there are 200 children then that is a lot of additional text.

Thank you

Answer 1

You should apply your styles in a semantical way. If you want to style all elements with class child, go ahead with .child. If you want to style all div below the parent, go for #parent div.

The style should be easy to read and maintain, and if possible adopt to new “situations” automagically.

If possible, you should also consider the size of your website. A #parent div without classes child for each div certainly is smaller than div.class and a class given for each div.

So bascially, it all depends on what you want to do and your target audience. A regular desktop system with broadband connection can handle either, a handheld with slow and expensive GSM connection might not.