Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS “magic numbers” in CSS

  • This topic is empty.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #42565
    iamacatperson
    Participant

    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?

    #123785
    Paulie_D
    Member

    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

    #123819
    Chris Coyier
    Keymaster

    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.

    #123820
    Chris Coyier
    Keymaster

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

    #123821
    zachstronaut
    Member

    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.

    #123822
    Kitty Giraudel
    Participant

    margin-left: -13px

    #123832
    petridisc
    Participant

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

    #123884
    Paulie_D
    Member

    font-size:0;

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

    #123901
    iamacatperson
    Participant

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

    #123927

    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 10 posts - 1 through 10 (of 10 total)
  • The forum ‘CSS’ is closed to new topics and replies.