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:
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.
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.
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.
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.
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.
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:
Is this also a magic number?
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
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.
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.
It would be sweet to start collecting examples of magic numbers for a blog post!
One magic number that comes to mind for CSS would be zero, as in:
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.
is good for tightening up most larger headlines
Inset box shadow will looks weird in Opera browser when you not define the border radius at least
1px:Edit!! Not well tested. Just have an experience about this.
For CSS grid. Is this a magic number?
For the parent element when using inline-block to remove the whitespace.
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.
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.