Magic numbers

Magic numbers are those random numbers that just make the layout work or look nice. There is not any kind of logic behind those numbers, there is not a reason behind them except that they just work. For example:

1
2
3
.page {
margin-top: 67px;
}

If some developer comes to the project, a few years after the first dev added the magic number, they might not know why 67px, why not 57px or 47px? What is the logic behind that number? It looks like it is there just because it worked. Now the new dev is scared to touch that number, they do not want to break the whole layout.

Magic number analogy, @programmersmeme

Magic numbers limit the layout, this one limits the space above the page. There is no fluidity in there. For example, nothing that is larger than 67px can ever be added above. But what if another element shows up before the page and we don’t want that space at all? Are we going to overwrite it and reset margin to 0?

I would remove the margin-top completely and add space with padding-top. Other elements can be added before the page. Padding would not have any effect on them. I also love to save those kind of gutters into a scss variable with a descriptive name. In this case this kind of gutter can be named $topPageGutter or mainTopGutter. It depends on the architecture you already developed in your project.

1
2
3
4
5
$mainTopGutter: 50px;

.page {
padding-top: $mainTopGutter;
}

Read more about fluid layout here

Read more about magic numbers in this article

My two cents are to try to find logic behind the unit values