Databases
StackOverflow2013
Postsdbo
POA css rule for each html element VS several simple css rules for each element?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POA css rule for each html element VS several simple css rules for each element?
    text
    copied!<p>There are 2 methods for external css assignments.I am using the first method; most websites use the second method. I wonder whether I am doing it wrong!</p> <p><b>Fisrt method:</b></p> <p>Create a class for almost each &amp; every css rule and use them anywhere.</p> <pre><code>&lt;div class="f_left d_iblock"&gt; &lt;span class="w_100 f_left"&gt;blah blah&lt;/span&gt; &lt;/div&gt; .f_left{ float:left; } .f_right{ float:right; } .d_block{ display:block; } .w_100{ width:100%; } .... .... </code></pre> <p><b>Second method:</b></p> <p>Create css rules for each element.</p> <pre><code>&lt;div id="container"&gt; &lt;span&gt;blah blah&lt;/span&gt; &lt;/div&gt; #container{ float:left; display:inline-block; } #container span{ width:100%; float:left; font-weight:bold; } </code></pre> <p>In general I am using the first method. I am choosing this method because this provides the following to me.</p> <ul> <li> Small css files hence provide less load time.</li> <li> Reusable css rules.</li> <li> Clear code hence CSS management is more easier than second method.</li> <li> I don't need to create an id or class attribute but only assign css rules. So I don't need to think of a name for each element :) <li> I think browsers can interpret css rules fast so this enhances the performance.</li> </ul> <p>I see most sites generally don't use this method most and I am starting to think that I need to strive to improve performance, but I am bulking html files instead of css with writing 3 to 4 css rule names to each element.</p> <p>Note:I know little English. I hope you can understand me. I will be happy if you can write simple sentences :)</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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