Zen Garden is pretty much the opposite of what one should do nowadays. Someone wrote some markup and sprinkled a ton of CSS hooks on top and then someone else c

Zen Garden is pretty much the opposite of what one should do nowadays. Someone wrote some markup and sprinkled a ton of CSS hooks on top and then someone else came along and wrote the CSS. It uses these 12 IDs: css-zen-garden, design-archives, design-selection, zen-benefits, zen-explanation, zen-intro, zen-participation, zen-preamble, zen-requirements, zen-resources, zen-summary, zen-supporting And these 39 classes: archives, benefits, css-resources, design-archives, design-name, design-selection, designer-name, explanation, extra1, extra2, extra3, extra4, extra5, extra6, indicator, intro, main, next, page-wrapper, participation, preamble, requirements, resources, select, sidebar, summary, supporting, view-css, viewall, wrapper, zen-accessibility, zen-faq, zen-github, zen-license, zen-resources, zen-submit, zen-translations, zen-validate-css, zen-validate-html If you've ever wondered how some websites end up with a meg of CSS, that's exactly how that happens. Each view/page starts with some markup, then you sprinkle some one-off CSS hooks over it, and then you write some overly specific CSS rules which are impossible to reuse. Rinse and repeat. It's more efficient to create a library of reusable building blocks and then build your views/pages out of these. All of the more organized approaches (BEM, SUIT, etc) work this way. You always use what's already there and you only extend a component or create a new one if it's absolutely necessary.