Better way of writing this CSS?

Question

Hi all, just wondering if there is a better way to write this CSS? It repeats quite a lot, this is a simple example, does it have to be this way?

<style type="text/css">
    div#leftBlock
    {
        position:absolute;      
        z-index: 1;
    }
    div#rightBlock
    {
        position:absolute;
        z-index: 1;
    }
    div#centerBlock
    {
        position:absolute;
        z-index: 2;
    }
    div#animateblock
    {
        position:absolute;
        z-index: 3;
    }
</style>

...

<div id="leftBlock" onclick="leftClick()"></div>
<div id="rightBlock" onclick="rightClick()"></div>
<div id="centerBlock"  onclick="centerClick()"></div>
<div id="animateBlock"></div>

Answer 1

Use CSS classes. For example:

.pa { position:absolute; }

div#leftBlock
{   
    z-index: 1;
}
div#rightBlock
{
    z-index: 1;
}
div#centerBlock
{
    z-index: 2;
}
div#animateblock
{
    z-index: 3;
}

Then your html will be

<div id="leftBlock" class="pa" onclick="leftClick()"></div>
<div id="rightBlock" class="pa" onclick="rightClick()"></div>
<div id="centerBlock"  class="pa" onclick="centerClick()"></div>
<div id="animateBlock"class="pa" ></div>

Answer 2

    div 
    { 
        position:absolute;       
    } 
div#leftBlock, div#rightBlock 
    { 
        z-index: 1; 
    } 
 div#centerBlock   
    {   
         z-index: 2;   
    }   
 div#animateblock 
    { 
        z-index: 3; 
    } 

EDIT: just using id's

#leftBlock, #rightBlock, #centerBlock, #animateblock  
{
  position:absolute;
}
#leftBlock, #rightBlock  
{  
   z-index: 1;  
}  
#centerBlock    
{    
   z-index: 2;    
}    
#animateblock  
{  
   z-index: 3;  
}

Answer 3

This perhaps:

#leftBlock, #rightBlock
{
    position:absolute;      
    z-index: 1;
}
#centerBlock
{
    position:absolute;
    z-index: 2;
}
#animateblock
{
    position:absolute;
    z-index: 3;
}

Edit added this: the most minimalist way would be to code the html like so (drop the ids):

<div class="layout" onclick="leftClick()"></div>
<div class="layout" onclick="rightClick()"></div>
<div class="layout centerBlock" onclick="centerClick()"></div>
<div class="layout animated" ></div>

and the css like so:

.layout {position: absolute; z-index: 1;}
.centerBlock {z-index: 2;}
.animated {z-index: 3;}

But that depends on your needs, as you may need the ids for something else.

Answer 4

Use a generic block class to apply the positioning, combine the left and right block declarations, and there is no need to say "div" each time when you have unique IDs on each element. (In fact it not only is it not needed, but it will make your CSS slower.)

CSS:

.block { position:absolute; }
#leftBlock, #rightBlock { z-index: 1; }
#centerBlock { z-index: 2; }
#animateblock { z-index: 3; }

And HTML:

<div id="leftBlock" class="block" onclick="leftClick()"></div>
<div id="rightBlock" class="block" onclick="rightClick()"></div>
<div id="centerBlock"  class="block" onclick="centerClick()"></div>
<div id="animateBlock"class="block"></div>

Answer 5

Most of the above methods are great (except for the ones that apply style-related class-names) - if you wanted to shorten your HTML a little more (rather than applying both an ID and a class to each <div/>, you could also do:

<div class="something"> </div>
<div class="something"> </div>
<div class="something somename"> </div>
<div class="something somethingrelevant"> </div>

.something{ position:absolute; z-index:1; }
.somename{ z-index:2; }
.somethingrelevant{ z-index:3; }

(the class-names I've added are odd looking because I don't know what these <div/>s you have contain - its recommended that you always use class-names that relate to your content, not to your styles)