Лучший способ написания этого CSS, чтобы не было так много повторений кода?

Question

Просто интересно, есть ли лучший способ написать этот CSS? Это повторяется довольно часто, это простой пример, так ли это должно быть?

<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

Это возможно:

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

Правка добавила это: самый минималистичный способ - это кодировать html следующим образом:1008 * и css вот так:

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

Но это зависит от ваших потребностей, так как вам могут понадобиться идентификаторы для чего-то другого.

Answer 2

Используйте CSS классы.Например:

.pa { position:absolute; }

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

Тогда ваш HTML будет

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

Большинство вышеперечисленных методов хороши (за исключением тех, которые применяют имена классов, связанные со стилем) - если вы хотите немного сократить свой HTML-код (вместо применения идентификатора и класса к каждому <div/> Вы также можете сделать:

<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; }

(имена классов, которые я добавил, выглядят странно, потому что я не знаю, что эти <div/> у вас есть - рекомендуется всегда использовать имена классов, которые относятся к вашему контенту , не к вашим стилям )

Answer 4

Используйте универсальный класс блоков для применения позиционирования, объедините объявления левого и правого блоков, и нет необходимости каждый раз произносить «div», когда у вас есть уникальные идентификаторы для каждого элемента.(На самом деле это не только не нужно, но и замедлит ваш CSS.)

CSS:

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

И 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

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

РЕДАКТИРОВАТЬ: просто с помощью идентификаторов

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