Watched my portfolio piece go from 40 divs to one element after a month of grid practice
A month ago my CSS-only coffee cup was built out of like 40 nested divs and it looked pretty rough around the edges. I kept messing with it on weekends, mostly just reading up on grid and pseudo elements, and last Tuesday I rebuilt the whole thing using a single div plus ::before and ::after. The shape is cleaner now and it animates way smoother since there's less stuff for the browser to move around. I still feel like I'm guessing half the time though, does anyone have a good way to plan out which parts of a shape should be pseudo elements versus real elements?