Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Your both method is not so good yet. you can write second method like this:</p> <pre><code>#container{ float:left; } #container span{ display:block; font-weight:bold; } </code></pre> <p>But your approach for creating a separate class for every property is not good. </p> <p>There are some good article you have to read about check these </p> <p><a href="https://developers.google.com/speed/docs/best-practices/rendering" rel="nofollow">https://developers.google.com/speed/docs/best-practices/rendering</a></p> <p><a href="https://developer.mozilla.org/en/Writing_Efficient_CSS" rel="nofollow">https://developer.mozilla.org/en/Writing_Efficient_CSS</a></p> <p><strong>UPDATED</strong></p> <p>Why your approach is not good suppose i have three different element there most of the property is same but are different.</p> <p>For Example:</p> <pre><code>.one{ float:left; font-family:"tahoma"; font-weight:bold; font-size:15px; color:#000; line-height:1.5; } .two{ float:left; font-family:"tahoma"; font-weight:bold; font-size:18px; color:#000; line-height:1.5; } .three{ float:left; font-family:"tahoma"; font-weight:bold; font-size:13px; color:#000; line-height:1.5; } </code></pre> <p>You can write this in a better way which decrease your CSS file size. Write like this:</p> <pre><code>.one, .two, .three{ float:left; font-family:"tahoma"; font-weight:bold; font-size:15px; color:#000; line-height:1.5; } .two{ font-size:18px; } .three{ font-size:13px; } </code></pre> <p>So, if i go through your approach i have to define each property separately, it's time consuming &amp; heavy also. </p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload