4 ms·

When I first learned about CSS I was pretty intrigued by the W3C Core Styles [1]. They were a pretty good illustration of the separation of presentation from t

by renke1 11y ago

When I first learned about CSS I was pretty intrigued by the W3C Core Styles [1]. They were a pretty good illustration of the separation of presentation from the underlying markup. [1]: http://www.w3.org/StyleSheets/Core/ http://www.w3.org/StyleSheets/Core/

dbaupp 11y ago
http://www.csszengarden.com/ http://www.csszengarden.com/ is a neat example of that too: some wildly different visual designs with the same markup.
- ahoge 11y ago
  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.
  - k__ 11y ago
    I use the last approach, libraries that make up my elements. But I always feel bad with all the CSS classes in my markup. Back in the days I often had only <10 CSS classes and created my styles relative to that. I had the hope that those 10 classes would vanish with HTML5 and its special div-tags. But now I'm running around throwing bootstrap classes around like there is no tomorrow.
citizenk 11y ago
Oh, that one does bring back memories! A proto-CSS Zen Garden of sorts, absolutely fascinating at the time. We used to spend hours applying those 8 stylesheets to our pages and deciding which one we preferred... Really edgy types used two, or perhaps even three, different styles on their handwoven Web Pages.

by renke1 11y ago

dbaupp 11y ago

http://www.csszengarden.com/ http://www.csszengarden.com/ is a neat example of that too: some wildly different visual designs with the same markup.

ahoge 11y ago
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.
- k__ 11y ago
  I use the last approach, libraries that make up my elements. But I always feel bad with all the CSS classes in my markup. Back in the days I often had only <10 CSS classes and created my styles relative to that. I had the hope that those 10 classes would vanish with HTML5 and its special div-tags. But now I'm running around throwing bootstrap classes around like there is no tomorrow.

citizenk 11y ago

Oh, that one does bring back memories! A proto-CSS Zen Garden of sorts, absolutely fascinating at the time. We used to spend hours applying those 8 stylesheets to our pages and deciding which one we preferred... Really edgy types used two, or perhaps even three, different styles on their handwoven Web Pages.