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.

@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
– MimiEAM, Commented Aug 18, 2012 at 4:50
In this question, I'm defining magic numbers the way they're defined in multiple CSS style guides. See: Wordpress CSS Style Guide for example. — Kevin Perrine
– Kevin Perrine, Commented Aug 18, 2012 at 4:56

user207421 · Accepted Answer · 2012-08-19 01:15:57Z

2

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

answered Aug 19, 2012 at 1:15

user207421

312k45 gold badges324 silver badges493 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Kevin Perrine Over a year ago

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 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;

user207421 Over a year ago

@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.

Kevin Perrine Over a year ago

see this answer for how I solved the problem.

user207421 Over a year ago

@Julix And you can easily avoid them with pre-processors too. Your point eludes me.

Julix Over a year ago

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"?

Kevin Perrine · Accepted Answer · 2012-08-25 14:55:19Z

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

Dariush Jafari · Accepted Answer · 2012-08-19 01:07:01Z

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

answered Aug 19, 2012 at 1:07

Dariush Jafari

5,4538 gold badges45 silver badges74 bronze badges

2 Comments

Ayush Over a year ago

If you're thinking of pre-processing your CSS using PHP, might as well use LESS.

steveax Over a year ago

That's just moving the definition of the magic number somewhere other than the style sheet.

Webritos · Accepted Answer · 2014-08-04 10:08:46Z

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

Collectives™ on Stack Overflow

Refactor CSS to eliminate "magic numbers"

4 Answers 4

5 Comments

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related