When I write layout, I do it in a way that requires as little new css as possible. To do that, I rely on one liners that do the heavy lifting. When I was new, I

When I write layout, I do it in a way that requires as little new css as possible. To do that, I rely on one liners that do the heavy lifting. When I was new, I would assign a class to a div, then write the padding and margins for that class. I would try to make general classes, like a class I can assign to all buttons, but I didn't have the right mindset. Now, I can define my flex boxes, vertical flex boxes in a snap. Apply one of several common padding and margins to an element in a one-liner. Throw "vertical-center" onto an element to make it align-items:center. 80% of the layout I need to do can be composed in one shot without new css. Then I can make fine-tune adjustments using variables. I don't remember what the exact text of any of the 4 box shadows I use. I know I apply two shadows (one shallow dark one and one further light one), but I couldn't tell you what the opacity is on either. I don't need to. I either apply it in the class or @extend .shadow-1;