CSS Architecture

engineering.appfolio.com

4 pointsmikegirouard2 comments

I like this point "Never use a mixin if you’re not passing an argument. Mixins without arguments are much better used as templates which can be extended." Which is a fair call I think.

However "Never nest rules purely for code organization. Only nest when the outputted CSS is what you want." is something I find harder to agree with.

If you don't do this then you're missing out on a ton of productivity from these tools and for what? Saving a few bytes in a CSS file that's going to be cached after the first request.

It's a pity we can't use Less or Sass directly in the browser in a reliable manner. CSS4 maybe?

The suggestion "Never nest rules purely for code organization" isn't to save a few bytes, it's avoid the specificity trap. Too many people who write Sass use nesting to make their code look more appealing in their editor, but what they end up with is unnecessarily specific selectors.

The file size issue isn't really that much of a concern unless you're on a really large site, but specificity issues affect everyone.

Reply on news.ycombinator.com