6

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.

Kevin Perrine
  • 407
  • 2
  • 14
  • 1
    What is a magic number? `top: -42px;`? – Blender Aug 18 '12 at 04:41
  • @Blender those are random numbers assigned to variables in the code without clear reason , -- but In css they are more or less justified, otherwise you will have a css file overusing variables, no really readable in some cases – MimiEAM Aug 18 '12 at 04:50
  • Magic number: http://en.wikipedia.org/wiki/Magic_number_(programming)#Unnamed_numerical_constants – Vikdor Aug 18 '12 at 04:50
  • In this question, I'm defining magic numbers the way they're defined in multiple CSS style guides. See: [Wordpress CSS Style Guide](http://make.wordpress.org/core/handbook/coding-standards/css/#best-practices) for example. – Kevin Perrine Aug 18 '12 at 04:56

4 Answers4

2

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

user207421
  • 305,947
  • 44
  • 307
  • 483
  • Yeah, I use less, but that's not the point of the question. Sure, I can assign a variable the value of -42px and pass it that way, but that misses what I'm trying to figure out. [WordPress's Style Guide](http://make.wordpress.org/core/handbook/coding-standards/css/#best-practices) 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; – Kevin Perrine Aug 19 '12 at 03:03
  • @KevinPerrine In that case you should tell us what the problem is that you are trying to solve with the -42px. As it is, I've answered the question you asked. – user207421 Aug 21 '12 at 05:17
  • see this [answer](http://stackoverflow.com/a/12123012/1149628) for how I solved the problem. – Kevin Perrine Aug 25 '12 at 14:56
  • @Julix And you can easily avoid them with pre-processors too. Your point eludes me. – user207421 Dec 22 '17 at 00:11
  • Then you should elaborate at least a little on how - some definitions have magic numbers be "unnamed" - i.e. as soon as you declare a semantically named variable and store the magic number there it now is just a custom value, like an option or a setting, but really that just moves where the magic number is stored. --- the op used the definition: "number that's used on a one-off basis to "fix" (read: band-aid) a problem" ---- as far as I can tell that doesn't go away just from using LESS or SCSS. - It's an old question, but your answer didn't answer it. --- How is it "easy to avoid them"? – Julix Dec 23 '17 at 10:28
1

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;
}
Kevin Perrine
  • 407
  • 2
  • 14
0

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 }};
   }
Dariush Jafari
  • 5,223
  • 7
  • 42
  • 71
0

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

Webritos
  • 39
  • 5