Grow your CSS skills. Land your dream job.

“magic numbers” in CSS

  • # February 8, 2013 at 3:58 am

    I understand that it’s supposed to be those one-off solutions using some arbitrary number to make the layout work.

    But how about when you need to use “margin-top: -32px” (for example) for an element that needs to overflow outside the box? Think about a paperclip image that needs to be positioned with seemingly arbitrary numbers as a design element to a specific div box. Is this considered a “magic number” too?

    Or let’s say you have a main-content block and for styling purposes, you like this to overlap the top section a bit so you add again “margin-top: -20px;”. Like in this image:

    ![Alt text](http://i48.tinypic.com/15x9xc8.png)

    Is this also a magic number?

    # February 8, 2013 at 6:27 am

    Negative margin is a handy property.

    However, there are a couple of ways of achieving the overlap you mentioned but they work in different ways.

    Negative margin is one and Relative positioning is another. Which one you use will depend on your required layout.

    I’ve created a small example to show the principal differences.

    http://codepen.io/Paulie-D/pen/IuLfJ

    # February 8, 2013 at 6:31 am

    To answer your question, generally a magic number is a specific value designed to fix a problem. In the case of offsetting an element, that may be more of a style adjustment than a fix to a problem, so I would say that is not considered a magic number.

    # February 8, 2013 at 3:50 pm

    This is a great question. I’d say in the example case it’s not a magic number. It’s a specific design choice, like any other positioning or spacing. To me magic numbers are more related to “fixing” problems. They are also often related to fonts as well. Not just directly font-size or line-height or whatever specifically but anything that is affected by those things.

    # February 8, 2013 at 3:51 pm

    It would be sweet to start collecting examples of magic numbers for a blog post!

    # February 8, 2013 at 3:56 pm

    One magic number that comes to mind for CSS would be zero, as in:

    -webkit-transform: translateZ(0);

    This is the cause of and solution to a number of problems in Webkit based browsers, especially Mobile Safari.

    If you transform any elements at all in your code, you may need to apply this transformation to the parent element(s), too in order to increase performance and reduce flicker.

    It can also be a way to get better performance when animating opacity.

    # February 8, 2013 at 4:07 pm

    margin-left: -13px

    # February 8, 2013 at 5:42 pm

    letter-spacing: -.05em;
    is good for tightening up most larger headlines

    # February 9, 2013 at 6:28 am

    Inset box shadow will looks weird in Opera browser when you not define the border radius at least `1px`:

    /* bug? */
    div {
    box-shadow:inset 0 0 0 1px white;
    border-radius:1px;
    }

    Edit!! Not well tested. Just have an experience about this.

    # February 9, 2013 at 6:32 am
    /* prevent empty column/grid */
    min-height:1px;

    For CSS grid. Is this a magic number?

    # February 9, 2013 at 9:59 am

    font-size:0;

    For the parent element when using **inline-block** to remove the whitespace.

    # February 9, 2013 at 10:38 am

    **chriscoyier:** Yes, a blog entry about magic numbers would be nice for discussion’s sake and clarity. ;)

    But given some of the examples, I now have a clearer notion of what magic numbers are. As I understand it, magic numbers are used as a fix when there could have been a more proper way of achieving a specific layout.

    In my example, it isn’t a magic number because that’s the only way it could have been achieved (whether using _margin-top_ or _top_) and the layout won’t necessarily break if I remove that number.

    # February 9, 2013 at 1:41 pm

    What Chris said. Magic numbers are values that are used in response to a problem because they “just work”. If you KNOW that you want the element to be exactly 32px higher, that’s not a magic number; it’s a design choice.

    It’s similar to !important…if you KNOW you never want something to be overridden, it’s fine to use. But if you use it to fix a specificity problem, things can get messy.

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".