Multiple before statements. Is there a way of using less code to do the same thing?

Question

Right I have some css code I use to make my buttons. I am using pseudo elements to create my button icons, and I load my buttons from a sprite sheet. In my example I have 3 buttons, but sometimes I have more.

If you study my css you can see that the only thing changing between each pseudo element is sprite position. So a lot of code is being repeated.

Is there anyway I can use less code, but do the same thing?

.add_button,
.excel_button,
.history_button {
    color: #000;
    padding-right: 10px;
    padding-left: 10px;
    padding-top: 5px;
    padding-bottom: 2px;
    border-radius: 5px;
    border: 2px solid #009900;
    height: 25px;
    width: 165px;
    margin-bottom: 5px;
    cursor: pointer;
    font-weight: 500;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    -webkit-user-select: none;  
    -moz-user-select: none;    
    -ms-user-select: none;      
    user-select: none;
     position: relative; 
}
.add_button::before {
    content: "";
    width: 25px;
    height: 25px;
    background: url("../../images/buttons/buttons_25x25.png") 0px 0px no-repeat;
    float: left; 
    margin: -1px 10px 0px 0;
}
.excel_button::before {
    content: "";
    width: 25px;
    height: 25px;
    background: url("../../images/buttons/buttons_25x25.png") -99px -50px no-repeat;
    float: left; 
    margin: -1px 10px 0px 0;
}
.history_button::before {
    content: "";
    width: 25px;
    height: 25px;
    background: url("../../images/buttons/buttons_25x25.png") -125px 0px no-repeat;
    float: left; 
    margin: -1px 10px 0px 0;
}

In addition to the answers below, you may want to opt for using single colons `:` for your pseudo-elements for support of IE8 and below. Not only does it save you a few bytes, it also extends your code coverage. See: http://stackoverflow.com/a/10181948/5812121 and http://caniuse.com/#search=%3A%3A — timolawl, Apr 25 '16 at 13:31

Huelfe · Accepted Answer · 2016-04-25T14:28:33.067

5

something like this?

.add_button::before, .excel_button::before, .history_button::before {
    content: "";
    width: 25px;
    height: 25px;
    background: url("../../images/buttons/buttons_25x25.png") 0 0 no-repeat;
    float: left; 
    margin: -1px 10px 0 0;
}
.excel_button::before {
    background-position: -99px -50px;
}
.history_button::before {
    background-position: -125px 0;
}

edited Apr 25 '16 at 14:28

answered Apr 25 '16 at 13:27

Huelfe

1,776
16
25

2

Nice! You can further reduce it by removing the units from zero based values so `0px` becomes `0` (as 0 is 0 regardless of unit). Its only a small change but none-the-less, it's a reduction. – Chris Spittles Apr 25 '16 at 13:33
1

I know I shouldn't thank you, but thank you anyway. I keep forgetting about using 0 instead of 0px as well. – Thomas Williams Apr 25 '16 at 14:51

score 4 · Answer 2 · answered Apr 25 '16 at 13:27

4

You need to use three ::before pseudo selectors, as you have different icons. But you can reduce it further this way:

.add_button::before,
.excel_button::before,
.history_button::before {
  content: "";
  width: 25px;
  height: 25px;
  background: url("../../images/buttons/buttons_25x25.png") 0px 0px no-repeat;
  float: left; 
  margin: -1px 10px 0px 0;
}
.add_button::before {
  background-position: 0px 0px;
}
.excel_button::before {
  background-position: -99px -50px;
}
.history_button::before {
  background-position: -125px 0px;
}

answered Apr 25 '16 at 13:27

Praveen Kumar Purushothaman

164,888
24
203
252

Your answer is correct, but I gave the tick to Huelfe because I believe he gave the answer first. – Thomas Williams Apr 25 '16 at 14:50
@ThomasWilliams Technically I answered first, 6 seconds earlier than him. You can hover on the `1 hour ago` to see the time in seconds. – Praveen Kumar Purushothaman Apr 25 '16 at 14:56
That's right - which is why I upvoted this answer (mine came in 9 seconds after this one). – random_user_name Apr 25 '16 at 15:03
I am very sorry. I assumed because he was at the top he answered first, but I have left him with the tick as he has added a little extra. I wish I could give all three of you a tick, as it has helped me tremendously. – Thomas Williams Apr 25 '16 at 15:54

random_user_name · Answer 3 · 2016-04-25T13:43:16.633

2

Yes!

You can refactor your code like so:

/* put all of the "common" styles here */
.add_button::before,
.excel_button::before,
.history_button::before {
    content: "";
    width: 25px;
    height: 25px;
    /* zero is unitless, so don't need px */
    background-position: 0 0;
    float: left; 
    margin: -1px 10px 0 0;
}

/* override only those styles that change here */
.excel_button::before {
    background-position: -99px -50px;
}

.history_button::before {
    background-position: -125px 0 no-repeat;
}

edited Apr 25 '16 at 13:43

answered Apr 25 '16 at 13:27

random_user_name

25,694
7
76
115

Your answer is correct, but I gave the tick to Huelfe because I believe he gave the answer first. – Thomas Williams Apr 25 '16 at 14:47
@ThomasWilliams - actually, Praveen's answer was first. He deserves the tick (although Huelfe's and mine are more complete, addressing the unitless zero values). – random_user_name Apr 25 '16 at 15:04

Multiple before statements. Is there a way of using less code to do the same thing?

3 Answers3