Originally published as a series of tweets.
So you’ve got some type on a website. That’s some CSS right there, to start. But you should style the fallbacks primarily, and style the intended type if it has loaded. So there’s now a condition in your styles.
And you’ll want to adjust other things depending on the typeface (size, line-height, etc.) … so there’s another condition. And some of those things won’t be specific values, they’ll be calculated dynamically via something like Modular Scale … so that’s functions all up in your conditionals.
And then you have media and container queries, which are conditional.
That’s a lot of logic, laid out in your styles. Where does it belong? How much goes in ordinary styles, and how much in mixins/functions? In what order are these conditional choices nested? How do you avoid problems with inheritance? (This is the big one for me right now — I find myself with elements inheriting rules tied to very specific selectors because of how I’ve nested conditional stuff.)
Still thinking about it.