I feel like I never too the time to look at my CSS and think, “How could this be organized?” Styles always felt.. different when it came to organizing them, as if it was not that important to organize them.

Today I looked around and quickly found a thing called 7-1 pattern. It is a way of structuring your css in a folder-based way.

Seven folders are recommended plus a main.css that’s only importing the other files. The 1-part is about putting exactly one logical piece in one file. So, in layout, you might have header.css, footer.css, wrapper.css in layouts and in components button.css and post-list.css.

I won’t go into more detail but what struck me is that this is the kind of structured and opinionated structure that I enjoy so much about Phoenix. Most of the time, you don’t need to think where something will go, because there is a place for it already and all its friends are there, too.

Links to this note (1)