Refactor CSS to eliminate "magic numbers"

Question

I know magic numbers are bad, but I still come across times when they seem unavoidable. I've created an example that I'd love for someone to show me how to refactor and eliminate the magic number.

Hopefully, this will help me think differently about eliminating them in the future.

My example on CodePen: http://codepen.io/kevinsperrine/pen/LiGlb

Edit: Line 51 of the css file contains the "magic number".

top: -42px; 

Edit 2: In an attempt to clarify what I'm asking: WordPress's Style Guide defines a CSS magic number as a number that's used on a one-off basis to "fix" (read: band-aid) a problem. I'm asking more on how to change both the HTML & CSS to not even need the use of the -42px. In my experience, it seems these types of problems arise often in web development, so I used this case as an example in hopes that someone more experienced than I can refactor the code, so that the "magic numbers" aren't needed.

Answer 1

Have a look at LESS: it does exactly this and much more. Very nice preprocessor for CSS.

Answer 2

I've refactored the code into these parts below. Essentially, I removed the two different img tags, and included them as background images on classes. This lets me set the height of the search icon to be the same at the search modal. When clicked, an active class is added that changes the both the background image, and the z-index position, so that both images are always in the same place. No need for the -42px hack to move the "active" image back up to where it belongs. The full code is available in a fork of my original codepen.

<! --- HTML -- >
<div class="search-modal-container">
    <a id="search" class="search" href="#search" data-target=".search-modal"><i class="icon icon-20 icon-search"></i></a>
    <div class="search-modal is-hidden">
      <div class="search-modal-input">
        <form action="" method="post">
          <input type="text" value="" placeholder="Search">
          <input type="submit" value="GO" class="btn btn-primary btn-full">
        </form>
      </div>
    </div>
</div>

The CSS (Less) now looks like this:

/* CSS */
.search-modal-container {
  float: right;
  position: relative;

  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

.search-modal {
    background-color: @menu-background-color;
    height: 100px;
    min-width: 325px;
    position: absolute;
    right: 0;
    z-index: @zindexModal;
    box-shadow: 1px 5px 4px @background-color;
    border-radius: 2px;
}

.is-hidden {
    display: none; 
}

.search {
  float: right;
}

.icon-search {
  width: 20px;
  height: 100px;
  display: block;
  background: url("http://c3.goconstrukt.com/img/search.png") no-repeat center center;
}

.icon-search.is-active {
  position: relative;
  z-index: @zindexModal + 1;
    background: @background-color url("http://c3.goconstrukt.com/img/search-active.png") no-repeat center center;

      &:after {
        content: '';
            width: 0;
            height: 0;
            border-width: 50px 15px 50px 0;
            border-style: solid;
            border-color: transparent @background-color;
        position: absolute;
        right: 100%;
    }
}

.search-modal-input {
    padding: 0.75em;
    float: left;
}