Refactor CSS to eliminate “magic numbers”

StackOverflow https://stackoverflow.com/questions/12015888

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.

Était-ce utile?

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

Autres conseils

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

You can use a programming language like php to get rid of magic numbers:

-----------------mystyle.php

<?php const magic=-42; ?>
      .search-modal{
        top: <?php echo magic; ?>
      }

----------------index.php

<head>
 <style>
   <?php include 'mystyle.php'; ?>
 </style>
</head>
<body></body>

Or you can use twig. ----------------mystyle.twig.hrml

{% set magic=-42 %}
   .search-model{
       top: {{ magic }};
   }

Chris Coyier in this post http://css-tricks.com/magic-numbers-in-css/ explains that in CSS, magic numbers:

"They are usually always related to fonts in some way or another"

and that

"Magic numbers in CSS refer to values which "work" under some circumstances but are frail and prone to break when those circumstances change"

In your example,the -42 could be not so evil as thought. The question is, Does it breaks when something changes as the page zoom or the type of font? I changed the zoom and nothing bad happened.

@Kevin Perrine version could be better for the imgs layout, but look that the modal-container is higher than the original version. If you would like to put it in a lower position, then you could set the top property of some container to any number that fits your need, even a no rounded number as 42.

But of course, if there is a way to prevent using a random number, that is the way to go

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top