CODEWITHSUNDEEP
htmlcssasp.net
Koby Douek
Koby Douek

Reputation: 16693

Consolidating similar elements in CSS?

I have a simple CSS with elements which are exactly the same, except the file name for the background image. I have over 50 of these. Can I somehow consolidate them into one element which uses a parameter? Or some other solution of this sort?

.btnAdd {
    background-image:url(Images/Buttons/btnadd.png);
    background-color:transparent;   
    width:34px;     
    height:34px;          
    cursor:pointer;     
    border-style:none;   
 } 
.btnAdd:hover {
    background-image:url(Images/Buttons/btnadd_h.png); 
 } 
 .btnFilter {
    background-image:url(Images/Buttons/btnFilter.png);
    background-color:transparent;   
    width:34px;     
    height:34px;    
    cursor:pointer;     
    border-style:none;   
   } 
   .btnFilter:hover {
    background-image:url(Images/Buttons/btnFilter_h.png); 
   }
   ....
   ....

Thanks, Koby.

Upvotes: 0

Views: 295

Answers (4)

M.G
M.G

Reputation: 1123

Have a look at jQuery UI Icons (http://api.jqueryui.com/theming/icons/) and see how the guys at jQuery solved this problem.

The major step is to create only one background image and then change the background-position when displaying another image.

.ui-icon {
width: 16px;
height: 16px;
}

.ui-icon {
background-image: url(images/ui-icons_222222_256x240.png);
}

.ui-icon-carat-1-n {
background-position: 0 0;
}

.ui-icon-carat-1-ne {
background-position: -16px 0;
}

This will speed up your site because only one image has to be loaded and after that only the position of the background will change.

Upvotes: 1

Huy Chau
Huy Chau

Reputation: 2240

CSS:

.btn {
  background-color:transparent;   
  width:34px;     
  height:34px;          
  cursor:pointer;     
  border-style:none;  
}

.btnDoSomething {
  background-image:url(Images/Buttons/btnDoSomething.png); 
}

.btnDoSomething:hover {
 background-image:url(Images/Buttons/btnDoSomething_h.png); 
}

HTML:

<button type="button" class="btn btnDoSomething">Do something</button>

Upvotes: 1

Sandeeproop
Sandeeproop

Reputation: 1776

In Css it is recommended that you should put this common css in one class and put uncommon part in different classes.

.btn {
  background-color:transparent;   
  width:34px;     
  height:34px;          
  cursor:pointer;     
  border-style:none;   
} 
.btn.btnAdd {
  background-image:url(Images/Buttons/btnadd.png);
} 
.btn.btnAdd:hover {
   background-image:url(Images/Buttons/btnadd_h.png); 
}

.btn.btnFilter {
   background-image:url(Images/Buttons/btnFilter.png);
}

Upvotes: 0

Suresh Ponnukalai
Suresh Ponnukalai

Reputation: 13998

Create one common style and add it in your button additionally like below.

.btnAdd {
background-image:url(Images/Buttons/btnadd.png);
} 
.btnCommon {
background-color:transparent;   
width:34px;     
height:34px;          
cursor:pointer;     
border-style:none;   
}

In your button add it like below.

 <button class="btnCommon btnAdd">Something</button>

Upvotes: 1

Related Questions