8. Thou shalt comment all magic numbers and browser hacks

A variables file should exist in each project that contains all variables relevant to the project.

Tip

PostCSS facilitates variables and mixins defined in either CSS files or as JavaScript objects. You can read more about the latter here (https://benfrain.com/creating-and-referencing-javascript-mixins-and-variables-with-postcss/).

If a situation arises where a pixel based value needs entering into the authoring style sheets, that isn't already defined in the variables this should serve as a red flag to you. This scenario is also covered above. In the case where a magic number needs entering in the authoring style sheets, ensure a comment is added on the line above to explain its relevance. This may seem superfluous at the time but think of others and yourself in 3 months time. Why did you add a negative margin of 17 pixels to that element?

Example:

.med-Video {
    position: relative;
    background-color: $color-black;
...